はじめに
なぜCSSをいきなり再学習したかというとBootstrapなどCSSフレームワークを利用しない純粋なHTMLとCSSで構築しているサイトの新規ページの依頼がきた CSSフレームワークがないとレイアウト調整が難しいなぁと本当に思いました。いままでBootstrapありがとう!
HTML5 セクション関連の要素
要素名 | 説明 |
---|---|
header | ヘッダー要素 |
main | メインコンテンツ |
footer | フッター |
article | 独立した記事(1つのページを作れるぐらいの内容を囲むときに利用する) |
section | セクション(1つの記事の内容を囲むときに利用する) |
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