おきがるみがる

お気軽&身軽に生活・仕事・趣味を楽しむ雑記ブログです。一応スナップ写真がメインです。

エビスコムさんの『HTML5&CSS3レッスンブック』で学んだことまとめ

www.okigaru-migaru.net

ここしばらく『HTML5&CSS3レッスンブック』で勉強をしてきました。

学習し終わって大事だと思ったところをまとめておきます。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

マークアップした中身が何であるか明確にする

HTML5ではページの各パーツにおいて、マークアップした中身が何であるかを明確にする必要があります。

例えばメインコンテンツを表示するところはmainタグでマークアップして、記事はarticleタグ、ヘッダーはheaderタグ、フッターはfooterタグといった具合です。

これはセマンティクスという概念で、要はコンピュータがページの中身を理解するためのものです。

こうすることでSiriがユーザの問いに対して正確な情報を渡せたり、メインコンテンツを抽出表示したりできるわけですね。

見た目には成果がわかりにくいですが、今後の技術革新についていくにはかなり必要なことだと思います。

セクションごとに見出しのレベルはリセットされる

ブログを書く人にとって見出しタグはお馴染みですね。

以前までは1つのページにh1タグは1つだけで、順番を飛ばしてマークアップしてはいけないというルールがありました。

HTML5ではセクションごとに見出しを設定してもOKというルールらしいです。

はてなブログではブログタイトルと記事タイトルの両方にh1タグが使われていますが、これはheaderとarticleで別々のセクションだから成り立っていたわけですね。

ただ、はてなブログの大見出しがh3タグから始まる問題については、articleセクションにおける記事タイトルがh1タグな以上は、大見出しはh2タグから始まるべきだと思います。

CSSの記述方法

CSSは、

セレクタ { プロパティ : 値;}

という風に記述されます。基本中の基本ですね。連続で記述しない場合は最後の「;」は無くてもOKです。

この中でもセレクタの記述方法がかなり重要だと思いました。言い換えればこれをマスターすればかなり自由にデザインを組めるかと思います。

セレクタの記述で様々な条件が付けられる

例えば記事セクションであるarticleで使用するh1タグとは別に、補足情報を示すasideのh1タグを別のデザインにするとしましょう。

そういう場合はCSSのセレクタをaside h1と記述することで、個別にデザインを変えることが可能です。

またクラス属性とID属性をすることでより自由度はより増します。クラス指定は「.」を頭に付けて、ID指定は「#」を頭に付けて任意のセレクタ名を記述できます。

両方とも同じような働きをしますが、クラス属性とは違ってID属性は1ページ中に1度しかマークアップできないので使い分けが必要です。

ブログによくある段組みはfloatでつくる

最近のブログは2カラムや3カラムが主流です。スマホでは1カラムで表示する方が良いとされていますね。

そのデザインは段組みと呼ばれるもので、floatプロパティを使って作ります。回り込みを指定するというわけですね。

最近多いメインカラムが左、サイドバーが右というデザインの場合、メインカラムのセレクタのfloatプロパティをleftに、サイドバーをrightにすることで可能です。

そしてフッターは回り込みをせずに下に表示するのでfloatプロパティをnoneにするという感じですね。

スマホの1カラムの場合はメインカラムもサイドバーもfloatを指定しなければ1カラムになるという仕組みです。

『HTML5&CSS3/2.1全事典』を片手にコーディング

ざっくり基本的なところは学びましたが、「あれ、どんな記述をするんだっけ?」と思った時にパッと調べられるようにしたいですね。

できるポケット HTML5&CSS3/2.1全事典

できるポケット HTML5&CSS3/2.1全事典

そこで『できるポケット HTML5&CSS3/2.1全事典』を買いました。この手の本はいくつかあるのですが、この本が1ページがスッキリと見やすくて良かったです。

カテゴリごとにページが分けられていますし、索引もついているので必要な項目をすぐに引くことができます。

あとサイズが小さくて保管も楽ですし、結構開きやすいです。

これプラスGoogle先生に頼ればなんとか作っていけそうですね。

次はレスポンシブWebデザインについて学びます

元はといえばJavaScriptを学ぶ土台作りのためにHTML5とCSS3を勉強してきました。

いよいよJavaScript! と言いたいところですが、まだやり残していることがあります。レスポンシブWebデザイン(RWD)です。

エビスコムさんの書籍にHTML5とCSS3の教本にRWDを対応させたものもありますが、HTML5とCSS3は勉強したところなのでRWDの専門書でしっかりと学びたいところです。

レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (Web Professional Books)

レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (Web Professional Books)

そこで菊池崇さんの『レスポンシブWebデザイン』を買ってきました。RWDを学ぶには定番の書籍とのこと。

2013年刊行と少し陳腐化しているような気もしますが、基本的なことはすべて学べそうですし、最新の情報や対応についてはググって調べればいくらでも出てくるでしょうしね。

そういうわけで次回からはRWDについて勉強していきますよ〜。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック