たかおLab

CSSを作ったらとりあえずこれを書く

HTML, CSS プログラミング
HTML5とCSS3のロゴ画像

いつもCSSを書き始めるとき、「とりあえず何のプロペティを指定すればいいんだっけ?」となるのでメモしておきます。

 

加えて、今まで深く理解していなかった部分に関しても勉強し直しました。

 

 

 

CSS作ったらとりあえずこれを書く(って本で学んだ)

 

 

以降、コメントアウトした①〜③について勉強し直したメモを残します。

 

 

① rem と em の違い

 

remは「root + em」の意味で、ルート要素(html要素)のfont-sizeを1とした倍率を指定します。

 

emと違い、親要素のfont-sizeプロパティの値を意識せず常にhtml要素に対する倍率を指定すればので、管理が楽になります。

 

加えて、html要素のfont-sizeプロパティの値を変更することで、remを使用した箇所すべてのfont-sizeを相対的に変更することができます。

 

 

 

remを使用する際、html要素のfont-sizeは%指定されることが一般的です。

 

主要なブラウザのデフォルトフォントサイズは16pxなので、62.5%を指定して約10pxにします。

 

px指定でなく%指定にすることで、ユーザがブラウザの設定でデフォルトの文字サイズを変更していた場合にもある程度その設定を反映することができます。

 

 

② 文字フォントについて

 

OSによってデフォルトで入っているフォントが異なるので、font-familyプロパティで指定するフォントの種類について注意が必要です。

 

今回はMac向けにHiragino Kaku Gothic ProN、Windows向けにMeiryo(メイリオ)を指定しています。

 

フォント名に半角スペースやマルチバイト文字が含まれる場合には、シングルクォーテーション(’)またはダブルクォーテーション(”)で囲みます。

 

先に指定したフォントから優先的に適用され、そのフォントがOSに入っていなければ次に指定したフォントが適用されます。

 

指定したフォントが一つも入っていなかった場合は、最後に指定したsans-serif(ゴシック体)が適用されます。

 

 

③box-sizingについて

 

box-sizingプロパティでは、要素の幅と高さの指定がボックスモデルのどの範囲を指すかという決まりを変更できます。

 

box-sizingの初期値はcontent-boxで、幅と高さの指定はコンテンツエリアを指します。

 

そのため、widthやheightの値が反映されるのはコンテンツエリアに対してのみであり、paddingやborderの領域は含まれません。

 

これだと、paddingやborderの領域のwidthやheightについては別で指定しなければならないので、直感的に幅や高さの指定できません。

 

そこで、box-sizing: border-box; という指定すると、widthとheightの指定がボーダーエリアを指すようになるので、paddingとborderを含めた要素全体のサイズをwidthとheightで指定できるようになります。

 

③では、この設定をbody以下のすべての要素と擬似要素に指定しています。

 

 

以上です。これで多分忘れない。

 

 

参考文献

 

HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方

font-familyの書き方まとめ:CSSでフォント種類を指定しよう