はじめに
なぜCSSをいきなり再学習したかというとBootstrapなどCSSフレームワークを利用しない純粋なHTMLとCSSで構築しているサイトの新規ページの依頼がきた CSSフレームワークがないとレイアウト調整が難しいなぁと本当に思いました。いままでBootstrapありがとう！
HTML5 セクション関連の要素
| 要素名 | 説明 |
|---|---|
| header | ヘッダー要素 |
| main | メインコンテンツ |
| footer | フッター |
| article | 独立した記事（１つのページを作れるぐらいの内容を囲むときに利用する） |
| section | セクション（１つの記事の内容を囲むときに利用する） |
| aside | 補足、注釈 |
| nav | ナビゲーション |
覚えておく必要がある
メディアクエリ
- 画面サイズに応じて、ページのレイアウトを変化させる
SP
@media screen and(min-width: 480px) {}
タブレット
@media screen and(min-width: 768px) {}
PC
@media screen and(min-width: 1024px) {}
フルードグリッド
- 画面サイズに応じて、ページ内の要素の大きさを変化させ、グリッドにあわせて配置する
- うまいことを100%指定してうまいこと調整する
- 計算式は下記を利用して100%にうまいことする
変換したい値÷変換したい値の親要素の幅×100
フルードイメージ
画面幅に応じて、イメージ画像の大きさを変化させる
- 基本下記の指定すればOK
img {
max-width: 100px;
}
clearfix
floatプロパティによる回り込みを解除することができる 下記の記述を記載して、そのクラスを指定すればOK
/* clearfix */
.cf { zoom: 1; }
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
リセットCSS
- リセットCSSとは、ブラウザがデフォルトで持っているCSSを打ち消すCSSです。 html5doctor.com
