偏差値35が挑戦するWEB業界への道

twitterを使って過去の自分とディスカッションをイメージした画像
カテゴリ: DISCUSSION
あまりやってることを聞いたことがないので新たなジャンルとしてブログで半月くらいに1回程度のペースでやっていこうと思います。
Twitterはマイクロブログと言うだけあって、ちょっとした日記でもあります。その小さな日記は普通のブログとは違って気軽に思ったことを書き残すことができます。
つまり、過去を遡ることができます。
僕は思ったことをよく書いているので、それに対してのツッコミとかとかとりあえず自分のツイートまとめですｗ この記事の続きを読む

portfolioのアイキャッチ
カテゴリ: ABOUT
※このエントリーは就職活動に使えるように正確な情報を掲載しています。
※また、ポートフォリオとしても使用する予定です。
トップページよりアクセスされている場合は「続きを読む」より本記事をご覧ください。 この記事の続きを読む

sectionばかり使うことに対しての浮気を進める画像
カテゴリ: DISCUSSION
マークアップの仕方は十人やったら十人とも違うことなんてほぼ当たり前ですよね。しかし、それって機械が認識するときにもマークアップする人によって結果も変わってきてしまうということ。
それでは適したマークアップとは言えないと思います。
header,footerの使い方はもちろん、sectionを使うタイミングやarticleを使うタイミング。これらはなんとなくで使っていませんか？
WEB歴10ヶ月の初心者且つ低学歴なりに考えてみましたので記事にしてみます。 この記事の続きを読む

masato takahashiのGoogle plusのイメージ画像
カテゴリ: OPTIMIZATION
最近よく、検索をすると検索結果の箇所に「著者」として名前と顔写真が出てきているものをよく見ますよね。
これは自動的に検知されているわけではなく、マークアップをしているからなんですねー（←当たり前ｗ
今回は、情報を提供する側として責任感を負うために顔写真（モザイク有るｗ）と名前を晒してみました。情報を探している側としても写真があることで情報を信じようとする気持ちは写真がない記事よりも強いのではないでしょうか？
ということで、author情報をマークアップしてみたので今回は備忘録として記事にしてみます。 この記事の続きを読む

clearfixをイメージした画像
カテゴリ: DISCUSSION
clearfixは子要素にfloatをかけたときに親要素に高さを持たせてあげるのに有効な手段です。
しかし、せっかくのclearfixという手段があるのにも関わらず嫌ってしまって使わない人も少なからずいらっしゃるのではないでしょうか？
また、Chromeの「要素を検証」から見て要素が高さを持っているから付けなくもいいや！なんて思ってる方もいらっしゃるのでは？！
それでは思わぬ不具合に出くわす可能性も多くなります。
そんなことにならないためにclearfixの適切な使い方を考えてみましょう。 この記事の続きを読む

clip-pathのプロパティをイメージした画像
カテゴリ: CSS3
前回は現在のブラウザで使えるものばかり（background-clipはまだですがｗ）を紹介しましたが、今回は将来的に普及するであろうクリッピング（切り抜き）のプロパティを紹介します。
いままで、親要素でimgを囲んで親要素にoverflow:hiddenとかをして無理矢理表示位置を変えていましたが、今回紹介するプロパティにはそのような必要がありません。
また、CSS2.1からあるような何気に知られていない素晴らしいプロパティがあったりもします。
この辺りを見ていきながら新しい技術を取り入れていきましょう！ この記事の続きを読む

クリッピングをイメージした画像
カテゴリ: CSS3
Photoshopでお馴染みに「クリッピングマスク」という項目。
これは上のレイヤーを下のレイヤーの形に切り抜くことができる便利な機能ですよね！
でもこれをWEB上で使うには、切り抜いて、画像として保存して。。。あぁ、メンドクサイ!!
しかももうちょっと左上の部分欲しかったなーって思ったらまたPhotoshop起動して。。。切り抜いて。。。あぁ。。このまま内蔵切り抜いて死にたい。。。(´・ω・｀)

CSSで表示方法を変えてやればそんな思いはしなくても済む！
というわけで今回はCSSでできる様々なクリッピング方法をご紹介致します。 この記事の続きを読む

html-imports試用編の記事を表した画像
カテゴリ: HTML5
前回（HTML Imports – 準備編）で準備したブラウザを使用して、HTML Importsというものを触っていこうと思います。
HTML Importsとは、HTMLファイルを外部からインポート（呼び込み）するものです。
そのHTMLファイルから好きな部分を抜き取って出力できます。
WordPressでは、それぞれの部分のコンテンツをパーツとして分けています。それと同様なことができるのがHTML Importsの一つの使い方です。
HTTPリクエスト的に問題を生みそうですが、使いどころは多々ありそうです。
まだまだ出始めの技術なので仕様は変わっていくかもしれませんが、少しですが触ってみましたのでレポートとして残しておきます。 この記事の続きを読む

html importsを表した画像
カテゴリ: HTML5
ウェブサイトを作るとき、1ページにつきHTMLファイルは1つだけ。
それが当たり前な2014年2月19日現在ですが、実はその常識が変わる可能性があります。（多分

HTMLファイルを1つのパーツとして、読み込み出力、そしてまた1つのパーツとして読み込み・出力とすることができる、
「HTML Imports」というものがあります。
HTML Importsとは見てのとおり、HTMLファイルをインポート（読み込む）ものです。

このように1つ1つのパーツとして読み込むことができれば、メンテナンス性が向上すると共に、
ソースがすっきりして見やすくなると思われます。

今回はほんの少しながら、HTML Importsに触れてみたのでレポートとして載せておきます。 この記事の続きを読む

Google Chrome Image
カテゴリ: CSS3
「CSSって変数使えんの？」って、コーディングをしている人は誰もが一度は思ったことあるんじゃないでしょうか？
Web歴11ヶ月程度のぼくでも思ったことがありますｗ
最近では、SassやLessなどのCSSプリプロセッサでは当たり前のように使えるようになっています。
しかし、これらにはコンパイルというCSSに直す作業が必要です。
それでは変数が使えてもちょっと手間がかかってしまい嫌ですよね。

しかし！CSS VariablesというものはCSSファイルに書いてブラウザで直接実行することができます。
そんな便利なプロパティを紹介します。
※今回は準備編です。 この記事の続きを読む
3/15までには、ajaxを利用した記事の読み込みを実装する予定です。