HTML5/CSS3でなるほどと思ったTips

今まで蔑ろにしていたマークアップとスタイルシート言語だが、これからの業務で必要になるので書籍を使って学習している。その中でなるほどなと思ったコーディングがあったので備忘録をしてメモしておく。フロントエンドの人にとっては当たり前な表現も含まれているのでそこはスルーして欲しい。

今回、読んだ本は下記。

HTML5/CSS3モダンコーディング

HTMLやCSSって初心者向けの本が多いけど、正直そこは求めていない。バックエンドを習得する上で必然的に基礎は学べるから。この本は脱初心者を目指す人向けに書かれたハンズオン形式の本なので実際の現場を意識して学べる点で良書だと思う。私はIntelliJで最近IdeaVimを使い始めたのとHHKBのキーボードを買ったのでそれらに慣れる訓練としてコピペはせずに全て一からコーディングした。やっぱり時間は掛かっても挙動を見ながらコーディングした方が頭には入る気がする。

そもそもモダンとは何か。以前から不思議に思っていたワードであるがこの本では以下のように定義されている。HTML5/CSS3に対応していないレガシーブラウザを切り捨て、現実的な範囲で次世代のブラウザを意識すること。確かにIEみたいな時代遅れなブラウザに足を引っ張られて新しい技術を使えないのは勿体ない気がするのでその点に関しては賛成である。モダンの定義は理解できたが中身は時代と共に変わっていくからそこは留意していきたい。

@Contents

CSSのセレクタにはIDを使用しない

基本的にCSSセレクタとしてIDは利用しない方が良い。それはなぜかというと、まずスタイルの使い回しができないからだ。IDはクラスと違って、同ページの中では1つのIDを複数使うことはできない。そのため、後々デザインの要素を増やすことになった際には問題が発生する。

次にCSSには詳細度という概念がある点も忘れてはならない。IDはクラスよりも詳細度が高く、IDで指定したスタイルは後からクラスで指定したスタイルで上書きできないので管理が難しくなる。

IDを指定する場面として内部リンクとJavaScriptの処理で特定の要素を指定したい時に用いると良い。

ただし、必ずしもこのルールに従わないといけないわけではない。フロントエンドの有名なガイドラインにSMACSSがあるがそこではレイアウトに関してIDを使うこともある。結局、これらのルールは設計段階で共有しておく必要があるということだ。

floatとclearfix

ある要素の中で横並びのレイアウトを作成したとする。その際にfloatを使用すると、floatをかけた要素の高さを親要素が認識できなくなり表示が崩れてしまう。floatとはコーラフロートと同じで、このプロパティを使うと要素(アイスクリーム)が浮くイメージを持つと分かりやすい。

これを解決するためには子要素にかかっているfloatの回り込みを解除しなければならない。そのための方法としていくつかあるが、clearfixという手法を用いると手軽。下記のように1つクラスを作っておくと使い回しができる。

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

このクラスを回り込みを解除したい親要素に追加するだけでOK。

remとemの違い

CSS3から新たにremという単位が追加された。従来の単位であるemは親要素のfont-sizeを1とした倍率を指定するが、remはルート要素(html要素)のfont-sizeを1とした倍率を指定する。

このプロパティを使うことの利点は下記。

  • 親要素のfont-sizeの値を意識する必要がなくなる
  • html要素のfont-sizeを変更するだけでfont-sizeを相対的に管理できる

remを使用する際はhtml要素にfont-size: 62.5%;を指定することが一般的である(主要ブラウザのデフォルトフォントサイズが16pxだから)。この指定をすることで1.2rem = 12pxのような使い方ができる。

背景画像を敷き詰める

背景やパーツなどのバックグラウンドに画像を用いたりする場合もあると思う。この時、一定のパターンがある場合はrepeatを使うことでファイルサイズを小さくすることが可能である。下記は一例。

.sidebar {
    background: url('../images/sidebar.gif) repeat-x;
}

sidebar.gidは縦長の画像だとする。その際はrepeat-xを指定することで左上端から横方向に背景画像を敷き詰める。縦方向であればrepeat-yを使用する。

サイトロゴのコーディング

サイトロゴはh1要素でマークアップするのがポイント。また、サイトロゴは画像を使われることも多いがその際は検索エンジンのクローラーやスクリーンリーダーはその情報を読み取れるようにしておかないといけない。具体的な方法として下記がある。

  • 画像をimg要素で表示してその要素のalt属性の中にテキストを書く
  • テキストはテキストとして見えない形で記述し、画像は背景画像として表示する

どちらでも良いが私的には前者の方が良いと思う。なぜならCSSでテキストを非表示にすると検索エンジンからペナルティを受ける可能性があるからである。まぁ、よほど大量のテキストを隠したりしなければ大丈夫だと思うけど。

アウトラインを意識する

例えば見出しがあるセクションと無いセクションが混在していることがある。そのような場合はhiddenというdisplay: none;を持ったクラスを新たに作り、HTML内でのみ構造的に分かりやすくするために見出しを置いておくと管理がしやすくなる。

この方法の他にsection要素を使って明示的にセクションを区切ることもできる。ただ、sectionを使う場合であってもその中に自身の見出しを持つことが推奨されているため、hiddenクラスと合わせて明示した方が良いかも。

box-sizingプロパティを活用する

box-sizingプロパティを使うことで要素の幅と高さの指定がボックスモデルのどのエリアを指すかというルールを変更することができる。初期値はcontent-boxで幅の高さの指定はコンテンツエリアを指しているのでpaddingborderの領域は含まれない。基本的にはこれで問題ないかもしれない。

ただ、widthheightにはpaddingborderを含めた要素そのもののサイズを指定できた方が計算が楽になる場合が多い。その時はbox-sizing: border-box;という指定をすると良い。そうすることでwidthheightの指定がボーダーエリアを指すようになる。

line-heightは数値のみで指定

line-heightの値は子要素にも引き継がれるので、pxemなどの形式で指定してしまうと子要素のfont-sizeが変わった時に行の高さが合わなくなってしまう。しかし、数値のみで指定すると割合の基準になるのは常に自身のfont-sizeになる。子要素に引き継がれた際はそれぞれの子要素のfont-sizeが基準になる。

overflowを活用する

何らかの項目(子要素)を囲む親クラスにheightまたはmax-heightプロパティで高さを指定し、overflow-y: auto;を指定すると子要素である項目が親クラスの高さを上回った場合に、はみ出た項目を横方向にスクロールして閲覧することができる。widthまたはmax-widthの場合はoverflow-x: auto;を使用する。また、max-の接頭辞を付けることで中の要素が少ない場合はその高さに合わせて親要素の高さも縮むようになる。逆に一定の高さを保持したいのであればmax-は付けない方が良い。

nth-of-typeとnth-childの違い

  • nth-of-type(n)
    • 同じ階層の要素の種類ごとに順番を数える
  • nth-child(n)
    • 要素の種類に関わらず同じ階層の全ての要素を通して数える
  • nに指定できるのは整数、数式、evenodd

長すぎるテキストの省略

文字数が溢れて「おはようござ…」みたいな表記があるがこれはCSSだけで表現できる。それには下記のプロパティをセットで用いる。

/* 非表示になるテキストの手前で表示領域に収まるように…を表示 */
text-overflow: ellipsis;

/* 折り返しを禁止 */
white-space: nowrap;

/* はみ出した部分を非表示にする */
overflow: hidden;

ベンダープレフィックス

仕様が未確定な機能をブラウザが先行実装したり、独自の機能拡張を実装する場合に使う識別子。

-ms-IE
-webkit-Google Chromem, Safari
-moz-Firefox
-o-Opera

機能の仕様策定状況やブラウザの対応状況は日々変わっているにで下記のサイトを使うなどして最新の状況を確認しておきたい。

CSSでカウントアップ

CSSカウンタを使う手順。

  1. カウンタに命名しカウンタを初期化
    • counter-reset: ranking;
  2. カウンタの値を表示
    • content: counter(ranking);
  3. カウンタの値を増加させる
    • counter-increment: ranking;

様々な結合子

子孫セレクタ(A BA以下にあるB
子セレクタ(A > BA直下にあるB
隣接セレクタ(A + BAの直後にあるB
間接セレクタ(A ~ BAと同階層でA以降にあるB

ブラウザに対する思想

  • グレースフルグラデーション
    • モダンブラウザをターゲットとしたリッチな実装を行いつつ、下位ブラウザでは表示のレベルを落とすという思想
  • プログレッシブエンハンスメント
    • レガシーブラウザや中程度のブラウザをターゲットとしてデザインやコーディングを行い、それに加えて一部のモダンブラウザではモダンな機能を使用したリッチな見せ方を加えるという思想

ポリフィル

例えば、placeholder属性はIE10以上のブラウザに対応しており、IE9では未対応である。しかし、デザイン上の関係でどうしても使いたい時に、非対応のブラウザでも同様の表示をするために機能を追加できるライブラリがある。これをポリフィルという。プレースホルダーであればPlaceholder.jsというJavaScriptのライブラリがあるので読み込ませることで未対応のブラウザでも使用可能になる。

To comment

@Contents
閉じる