アキラッシュ

見たものとかやったこととか

HTML5/CSS3モダンコーディング読み終わった

とりあえずWebデザイン関連でちゃんと体系的に知識が欲しい、と思い、その前段階としていいから本をシリーズ第一弾です。

www.shoeisha.co.jp

こちらの本を読み終えたので、新しく知ったことをまとめてみようと思います。
と言っても、ほとんど私にとっては新しいことだったんですが……

所要期間:約3日

わかったこと

  • コーディングの模範的な流れ
  • CSS3で装飾、アニメーション効果をつける基礎
  • 擬似要素について
  • ベンダープレフィックスについて
  • コーディングの考え方について
  • overflow, clearfix, box-sizing や などにまつわる細々としたテクニック

まず前提として、私はWebサイトを作るにあたって、きちんとした勉強をしてきていません。8年ほど前に趣味で展開されていたような無料テンプレートのカスタマイズからはじまり、携帯サイトを繰り返し作成し、CSSフレームワークGoogle先生に頼りながら利用することで、なんとなくマークアップがわかってきた(気になっている)状態です。 お里が知れる……

なのでそもそも体系的な知識がありませんし、ベースがスタート地点であるIE7の時代で止まっています。

というわけで、初心者+浦島太郎というわけのわからない状態で読んだのですが、読んでいて非常に楽しかったです。

コーディングでの模範的な流れ

HTMLマークアップ

CSSベースコーディング(リセットとか、全要素共通の設定とか)

CSS文字関連設定 ↓ 細かいコーディング

模範的というか、「こういう流れで思考するとこうなるのか」という感覚がつかめました。いつも、いままでの制作物はたいてい趣味の延長であることも相まって、とても適当にコーディングしていたんですよね……

ちゃんと設計して、後のことも考えて計画的にコーディングする流れをつかんでおくのは非常に重要だなと思いました。

CSS3で装飾、アニメーション効果をつける基礎

この部分、砂が水を吸うような気分になって一番楽しかったです。

今回とても便利に利用されているなと思ったのは主にこちら。

  • border-radiusプロパティ(角丸)
  • transformプロパティ(変形、移動)
  • transitionプロパティ (なめらかな変化)

括弧内はとりあえず私が理解しているそれぞれの機能です。どれも便利すぎて感動しました。 角丸なんてあんなに面倒臭かったのに……(テーブルと画像を使う方法しか知らなかった)

この3つがあれば大抵のシンプルな装飾はつくれますし、単純なものならアニメーション効果も割と思いのままだなと思いました。CSS3なのでまだ完璧に使えるわけではなさそうですが、今後活用していきたいです。

擬似要素について

::before, ::after擬似要素について。

クラス付加することで、クラス内の前後にコンテンツを挿入できる擬似要素です。知ってはいた、というか見かけたことはあったのですが、よくわからないのでスルーしていたこれまできちんと調べてこなかった要素です。しかも私がWebサイトを作っていた最初のピークの時代(IE7)には存在してなかったっぽいですね。

本を読んでわかったんですが、これ、 めちゃめちゃ便利 ですね。怖い。今までスルーしていたのが怖い。つらい。
本書のサンプル内でも随所に仕様されていました。便利すぎるので今後はちゃんと活用していきたいです。

ベンダープレフィックスについて

ブログとかで最新機能の紹介記事を読んでいたら必ず見かけるこれ、ベンダープレフィックス。

存在はもちろん知ってましたが、どういう風に使って、どういう風な判断でつけるのか詳細に紹介されていてようやく理解しました。

これで、ベンダープレフィックスの自動付加機能や諸々のCSSメタ言語のありがたみがよりわかってきますね。まだほとんど使ってませんけど。

コーディングの考え方について

何度も書いてますがまともに勉強してないし実務経験もないので、コーディングにまつわる考え方など自己流以外知りようもありません。そんな中で本書に書いてあったものがこちらでした。

グレースフルデグラデーション vs プログレッシブエンハンスメント

響きはかっこいいんですが何度も書くのは面倒なこの2つ

  • グレースフルデグラデーション
    最新機能により対応しているモダンブラウザに合わせてデザインを考え、それに対応していないレガシーブラウザでは最低限表示が崩れないように対応する、という方針。

  • プログレッシブエンハンスメント
    上の逆で、レガシーブラウザに合わせてデザインを考え、あとからモダンブラウザで採用可能な機能でちょっとした装飾を追加するという方針です。

個人で作る分にはどっちでも良さそうですが、作るWebページで想定するユーザによって使い分ける必要がありそうですね。

シングルクラス vs マルチクラス

「基本的な仕様は同じだけれど、特定の要素だけ異なるクラス」を作るときに、どのように実装するかという話です。カテゴリによって色が違うボタンを作る場合などですね。

  • シングルクラス
    HTML側で1つのクラス指定で済むよう、CSS側で同じである基本的な仕様も複製し、基本のクラスと、それにそっくりだけれど特定の要素が異なるクラスを作ります。

  • マルチクラス
    HTML側には複数のクラス(基本となる要素を指定したクラスと、変化をもたらすクラス)を指定し、CSS側ではまず基本のクラス、そして特定の要素だけ上書きする小さなクラスを作ります。

前者で行く場合、HTMLのクラス指定がごちゃつかないというメリットがありますが、同じ記述が幾つも生じてCSS側が煩雑になるデメリットがあります。が、もちろん対策も生まれていて、これを改善するのがメタ言語の@extend。ベースクラスを1行で継承してしまうので煩雑になりません。そういう風に使うのか……なるほど便利だ……

でも、たとえばJSで特定の要素だけ変化を加える場合などは後者のマルチクラスに揃えておいた方が楽そうですし、こちらもサイトの完成図をどのように想定するかで使い分けると良さそうだなと思いました。

overflow, clearfix, border-box や などにまつわる細々としたテクニック

場当たり的に使っていたけど実はよくわかっていなかったプロパティと、わかっていたけどその発想がなかった便利テクニックと、全然知らなかった便利テクニックです。

  • overflow
    overflow: hidden; というのがよく出てくるので存在は知ってましたし、役割はわかっていましたが、hidden以外のプロパティや使い所をいまいち理解していませんでした。なかでもoverflow: auto; は便利ですね。要素がはみ出た時にだけスクロール可能にしてくれる(大抵のブラウザで)設定で、よく見ると色々なところで使われていました。

  • .clearfix
    これはプロパティの話ではなくて、「float対策で作っておくと便利なクラス」です。正確にはafter擬似要素を利用して、floatを指定した要素の親要素に設定することで回り込みを解除します。これがあれば余計な要素をHTMLで作ることも必要ないので、とても便利そうです。

  • box-sizing
    これは知らなかったプロパティです。と思ったらCSS3の新要素だったらしいのでそりゃ知らないわ……通常、CSSの width や height プロパティは、その要素のborder、paddingの内側のエリア(content-box)の大きさを指定するものですが、このプロパティを使って box-sizing: border-box; を指定すると、なんということでしょう、ボックスの border の外側までを width, height の対象エリアとして認識してくれます。
    これによって直感的に padding を内側と認識したまま width 指定ができるので、とても便利です。

思ったこと

上に書いたこと以外にも、大きな要素についての知識から考え方の漠然としたものまで、たくさん学び取れた気がします。

なによりもそれによって、今後Webで知識を得るための最初の壁を崩した気分です。基本知識がないとコード読めませんしね……仕様書もとっつきにくいし……

あと数冊これ系のクックブック的な本を読んで、もう少し専門的な仕様に踏み込んだ勉強をしていこうかなと思っています。CodePenなどのサイトを本当の意味で活用できる様になりたい……コード読めるようになりたい……

次はSVGについてもう少し知りたいな。
そんな感じで、あしゅ/ A.sheでした。