CSSについて曖昧な理解な進めていた点が多く、業務では毎回調べ直していました。
そこでちゃんと理解出来ていない箇所について、改めて勉強しまとめています。
要約
- ブロックボックスとインラインボックスの違いを正しく理解する
- CSSが適用されない場合の、通常のWebページ上でのレイアウト方法を理解する
- CSSのレイアウト技術を正しく理解する
-
position: absolute;とposition: relative;の違いは？ - フレックスボックスの挙動を正しく理解したい
- などなど
-
CSSのボックスの概念についてまとめ
- ボックスの概念を理解できると、CSSでレイアウトする際の助けになる
- 一般的には、ブロックボックスとインラインボックスがある
- ボックスには内側の表示型と外側の表示型がある
- displayプロパティを使用して指定する
外側の表示型について
ボックスの外側の表示型による動作の違い
| 外側の表示型 | block | inline |
|---|---|---|
| 配置 | 新しい行に分割 される | 新しい行に分割されない |
widthとheight
|
適用される | 適用されない |
paddingとmarginとborder
|
適用され、他の要素を遠ざけることができる | 左右のみ適用される |
widthが指定されていない場合 |
ボックスはインライン方向に伸びる。コンテナで使用可能な方向を埋める。多くの場合、ボックスはコンテナと同じ幅になり、利用可能な空間の100%を占める | |
| 規定で設定されている要素の例 |
<h1> <p>
|
<a> <span> <em> <strong>
|
| 比較例 |  |
 |
内側の表示型について
- 内側の表示型は、ボックス内の要素をどのようにレイアウトするかを指定する
- 他に指示がない限り、ボックス内の要素は通常フローでレイアウトされる（通常フローについては後続で説明しています）
- 例：
display: flex;を設定した場合- 要素の外側の表示型は
blockを使用 - 要素の内側の表示型は
flexに変更される- 直接の子要素はフレックスアイテムになる
- 要素の外側の表示型は
CSSボックスモデルについて
- ボックスモデルは、ボックスの
マージン、境界、パディング、コンテンツがどのように連携して動作し、ページ上に表示されるボックスを生成するのかを定義する - インラインボックスは、ボックスモデルで定義されている動作の一部だけを使用する
- マージンはボックスの実際のサイズにはカウントされない
ブロックボックスの構成要素
| 構成要素 | 制御するプロパティ |
|---|---|
| コンテンツボックス |
width,heightなど |
| パディングボックス |
paddingなど |
| 境界ボックス |
borderなど |
| マージンボックス |
marginなど |
標準ボックスモデルと代替ボックスモデル
| 比較 | 標準ボックスモデル | 代替ボックスモデル |
|---|---|---|
| ボックスの合計サイズ | すべてのpaddingとborderがその幅と高さに追加される |
コンテンツ領域の幅は、その幅からpaddingとborderを引いたものになる |
| 設定 | ブラウザの規定 |
box-sizing: border-box;を設定 |
| 比較画像 |  |
 |
マージン、パディング、境界
| マージン(margin) | パディング(padding) | 境界(border) | |
|---|---|---|---|
| 用途 | 他の要素をボックスから遠ざける | コンテンツを境界から離す | ボックスのマージンとパディングの間 |
| マージンが接する2つの要素が存在する場合、マージンが正の値か負の値かによって表示結果が変わる（マージンの相殺） | 要素に背景が適用されると、パディングの背後に表示される |
ボックスモデルとインラインボックスの比較
| ボックスモデル | インラインボックス | |
|---|---|---|
| プロパティ | 上記のすべてが適用される |
widthとheightが適用されない |
 |
||
| 上下のマージン、パディング、境界は尊重されるが、他のコンテンツとインラインボックスとの位置関係は変わらない / 左右のパディング、マージン、境界は、他のコンテンツをボックスから遠ざける | ||
 |
display: inline-blockについて
- アイテムを改行させたくないが、
widthとheightを適用し上記のような重なりを避けたい場合に使用する -
widthとheightが適用される - パディング、マージン、境界により、他の要素がボックスから遠ざけられる
| display: inline | display: inline-block |
|---|---|
 |
 |
CSSにおけるレイアウトの通常フローとは？
- CSSを適用しない限り、Webページ上の要素は通常フローでレイアウトされる
- 通常フローを理解した上で、要素の位置を調整したり、要素を完全に取り除くなどして、レイアウトを変更する
通常フロー
1. まず始めに、個々の要素ボックスは要素のコンテンツを取る
2. コンテンツに対して、周りにパディング、境界、マージンを追加することで個々のボックスがレイアウトされる
3. そして、要素間の相互作用の仕方は、要素がブロックレベルかインラインレベルかで振る舞いが変化する（以下の表参照）
ブロックレベル要素とインラインレベル要素の振る舞い
| ブロックレベル要素 | インラインレベル要素 | |
|---|---|---|
| サイズ | 包含する親要素の利用可能なインライン空間を満たし、そのコンテンツを収めるためにブロック方向に成長する | そのコンテンツのサイズに依存する |
| 要素間の相互作用 | ブロックのフロー方向にレイアウトされ、各要素は最後の行の下に新しい行として現れ、各要素は指定したマージンで区切られる | 親ブロックレベル要素の内側に余白がある限り、互いに同じ行に配置され、隣接するテキストコンテンツに配置される |
CSSのレイアウト技術について
- 制御を何もしない場合、ブラウザは通常フローに従ってHTMLをレイアウトする
- 上下に並んで表示される要素がブロック要素、横に並んで表示される要素がインライン要素
- CSSで何かレイアウトすると、その要素は通常フローから遠ざかることになる
※主なページレイアウト技術
- 通常フロー
- displayプロパティ
- フレックスボックス
- グリッド
- 浮動要素
- 位置指定
- 表レイアウト
- 段組レイアウト
displayプロパティ
- あるアイテムを
blockからinlineに、またはinlineからblockに切り替えて、規定の表示方法を変更できる - CSSグリッドやフレックスボックスのように、特定の
displayの値によって有効になる全体的なレイアウト方法も存在する
フレックスボックス
- 要素を行または列に並べる1次元のレイアウト方法
- フレックスボックスができること
- コンテンツのブロックを、親コンテンツの中で上下中央に配置する
- 利用できる幅や高さに関係なく、コンテナの全ての子が利用できる幅や高さを等しくする
- コンテンツの量が異なっていても、全ての段の高さが同じになる
display: block; |
display: flex; |
|---|---|
 |
 |
- 呼び名
-
display: flex;が指定された要素をフレックスコンテナーと呼ぶ - その子をフレックスアイテムと呼ぶ
-
- フレックスコンテナーは、ブロックレベルのコンテンツとして表示される
フレックスモデル
| フレックスモデルについて | |
|---|---|
| 列か行か |
flex-directionプロパティで指定し、規定ではrowが指定されている（つまり行） |
| 折り返し | ブラウザの規定では、全てのフレックスアイテムを単一の行または列に配置しようとするため、コンテナをはみ出ることがある / 修正する場合はflex-wrap: wrap;を指定する |
| フレックスアイテムのサイズ変更 | flexプロパティによってフレックスアイテムの占めるスペースの割合を制御できる |
| 水平方向と垂直方向の配置 | align-itemsプロパティが交差軸上の配置の制御、justify-contentプロパティが主軸上の配置を制御する |
| ネストしたフレックスボックス | フレックスアイテムをフレックスコンテナとしても設定して、その子も柔軟な箱のようにレイアウトすることが可能 |
グリッド
- Webブラウザの2次元レイアウトシステム
-
display: grid;を指定することで、行と列に要素を配置できる
浮動ボックス
- floatプロパティは、ウェブ開発者がテキストの段の中に画像が浮動し、テキストがその左または右に回り込むようなレイアウトを実装するために導入された
- 浮動ボックスの挙動
- 通常のレイアウトフローから除かれる
- その親コンテナの特定の位置に固定される
- 通常のレイアウトフローで浮動した要素の下にくるコンテンツは、浮動要素の周りを回り込み、浮動した要素の上まで空間を占める
位置指定
- 位置指定を使用することで、通常のレイアウトフローから要素を取り出して異なる振る舞いをさせることができる
- 互いに重なったり、常にブラウザのビューポート内の同じ場所に留まったりさせることができる
-
positionプロパティ
- 位置指定を使用すると、通常フローのときに配置されていた場所から別の場所に移動できる
- 5種類の位置指定
-
静的位置指定
static
-
相対位置指定
relative-
top: 30px; left: 30px;
-
-
絶対位置指定
absolute-
top: 30px; left: 30px;
-
-
固定位置指定
fixed-
top: 30px; left: 30px;
-
-
粘着位置指定
sticky
-
位置指定の比較
| 定義 | 位置の指定方法 | |
|---|---|---|
static |
要素を通常フロー内の通常の位置に配置する | 通常フローに配置される |
relative |
要素を通常フローの位置からずらす | 通常フローの位置から、top、bottom、left、rightプロパティを使用して指定する |
absolute |
要素を通常フローから完全に外し、コンテナーからのオフセットを適用して配置する | 包含要素に対する位置をtop、bottom、left、rightプロパティを使用して指定する |
fixed |
通常フローから要素を完全に外し、ビューポートからのオフセットを適用して配置する | ビューポートに対する位置をtop、bottom、left、rightプロパティを使用して指定する |
sticky |
要素が定義されたビューポートからのオフセットにぶつかるまで、要素はstaticのようにふるまい、その位置からはfixedのようにふるまう |
ビューポートに対する位置をtop、bottom、left、rightプロパティを使用して指定する |
レスポンシブデザインについて
レスポンシブデザイン(RWD)とは、ユーザビリティを確保しながら、全ての画面サイズと解像度でWebページをうまく描画するための手法
つまり複数の端末に対応したウェブをデザインする方法
レスポンシブデザインの前身：モバイルウェブデザイン
- 基本的にレスポンシブデザインと同じで、レイアウト、コンテンツ、パフォーマンスにおいて、物理的属性の異なる端末間でWebサイトがうまく動作するようにすることを目的としている
- 主な違い
- 対象となる端末
- 以前はデスクトップかモバイルかという話だったが、今では利用できる端末はデスクトップ、ラップトップ、タブレット、時計など多岐にわたる
- 使用できる技術
- 以前はサーバー側に頼る部分もあったが、現代の技術はレスポンシブな使い勝手を作成するのに非常に優れている
- 対象となる端末
レスポンシブデザインについて
- そもそもHTMLは基本的にレスポンシブ
- CSSを含まないHTMLだけのWebページを作成し、ウィンドウのサイズを変更すると、ブラウザはビューポートに合わせてテキストを自動的に再フローする
- 問題点
- 広いモニターに全画面表示された長い表のテキストは読みにくい場合もある
- 逆にCSSで広い画面の行の長さを縮小すると、サイトが潰れて見えることもある
- 固定幅を設定しても、画面が狭い端末ではスクロールバーが表示され、広い画面では余白が多くなってしまう
- 問題点
- レスポンシブデザインは単体の技術ではなく、手法のひとつ
- コンテンツを表示するあらゆる端末に応じることができるレイアウトを作成するを作成するベストプラクティス群を表す
メディアクエリー
- メディアクエリーを使用すると、一連の検査を実行しCSSを選択的に適用して、ユーザーのニーズに合わせたページを適切にスタイル設定することができる
- メディアクエリーが導入されてレイアウトが変更されるポイントはブレークポイントと呼ばれる
-
モバイルファーストデザイン
- まず狭い画面の端末用に単純な単一列レイアウトを作成
- 次に大きな画面であるかをチェックして複数列レイアウトを処理するのに十分な画面幅がある場合は、複数列レイアウトを実装する
- ブレークポイントを使用する場合のベストプラクティスとして、個々の端末の絶対サイズではなく、相対的な単位を使用する
要素のオーバーフロー
overflowプロパティ
- はみ出したコンテンツをどのように処理するべきかブラウザに伝えることができる
- 規定値は
visible
オーバーフローとブロック整形コンテキスト
-
overflowの値に
scrollまたはautoを使用すると、ブロック整形コンテキスト (BFC = Block Formatting Context) を生成する - 外側にあるコンテンツはブロック整形コンテキストの中に入り込むことはできなくなる
CSSによるサイズ設定
自然なサイズまたは内在サイズ
- HTML要素には自然なサイズがあり、CSSの影響を受ける前に設定される
- 例えば、画像サイズにはページに埋め込む画像ファイルで定義された幅と高さがあり、このサイズを内在サイズと呼ばれる
- 高さと幅を変更しない場合、その内在サイズを使用して表示される
-
<div>にも独自のサイズがないため、そのサイズはコンテンツのサイズに由来する
サイズの指定 外部サイズ
- デザインの要素に特定のサイズを与えることもできる
- 要素にサイズが指定されている場合、それを外部サイズと呼ばれる
- 要素の中に収まるスペースよりも多くのコンテンツがある場合、高さを設定するとコンテンツがオーバーフローする可能性も
- オーバーフローのため、要素の高さを長さまたはパーセント値で固定することは、ウェブ上で注意する必要がある
比率指定
- コンテナ内のボックスの場合、子ボックスにパーセント値を与えると、親のコンテナーのパーセント値になる
- これはパーセント値がそれを包含するブロックのサイズに対して解決されるため
最小サイズ、最大サイズ
- 常に特定の高さ以上にしたい場合、ボックスに
min-heightを指定する- ボックスは常にその高さ以上になる
- ボックスの最小の高さよりも多くのコンテンツがある場合、ボックスの高さが高くなる
- これはオーバーフローを回避しながら、可変量のコンテンツを処理するのに役立つ
-
max-widthは、固有の幅で表示するための十分なスペースがない場合に画像を縮小し、その幅よりも大きくならないようにする- 例として、画像の
width: 100%を設定する場合、その固有の幅がコンテナよりも小さいと、画像は強制的に引き伸ばされて大きくなってしまう - 固有の幅がコンテナーよりも大きい場合、オーバーフローする
- 代わりに
max-width: 100%を使用すると、画像は本来のサイズよりも小さくなりますが、サイズの100％で止まる
- 例として、画像の
ビューポートに関する単位
- ビューポートに関連する単位を使用すると、ユーザーのビューポートを基準にしてサイズを変更できる