CSS

コメントアウト

ブロック要素、インライン要素

ブロックは上下左右にmarginを当てることができるが横並びにできない

インラインは左右にのみmarginを当てることができる、横並びになる

display: flex;

display: flex; は、親要素に指定することでその子要素を自由自在に並べることができる強力なレイアウト手法です。

1. 主な効果

• 要素の横並び: デフォルトで、縦に並んでいた子要素が左から右へと横一列に整列します。
• 配置の自由化: 「右寄せ」「中央揃え」「均等配置」などが1行のコードで実現可能です。
• 垂直方向の中央揃え: 従来のCSSでは難しかった上下中央の配置が簡単に設定できます。
• 高さの自動調整: コンテンツ量が異なっても、子要素同士の高さを自動で揃えることができます。

2. 基本的なプロパティ（親要素に指定） 

MDN Web Docsのフレックスボックスガイド などで詳細な仕様が公開されています。

• justify-content: 水平方向（主軸）の配置（左寄せ、中央、右寄せ、均等割付など）。
• align-items: 垂直方向（交差軸）の配置（上揃え、中央、下揃え、引き伸ばしなど）。
• flex-direction: 並べる向き（横並び row か縦並び column か）。
• flex-wrap: 折り返しの設定（一行に収めるか、入り切らない分を下へ送るか）。

3. 子要素に指定する効果

• flex-grow: 余ったスペースをどれくらい分け合って伸びるか。
• order: HTMLの記述順に関係なく、表示上の並び順を変更できます。

flex-direction: column;

flex-direction: column; を指定すると、Flexboxの子要素（アイテム）を 上から下へ「垂直方向（縦並び）」 に配置する効果があります。

1. アイテムが縦に並ぶ 

通常（デフォルトの row）は横に並びますが、column を指定するとブロック要素のように上から順に積み重なる配置になります。

2. 「主軸」が垂直方向に入れ替わる 

Flexboxには、アイテムが並ぶ方向（主軸）とその直交方向（交差軸）という概念があります。column を指定することで、この軸の役割が入れ替わります。 

• 主軸 (Main Axis): 水平（横）から 垂直（縦） へ変化。
• 交差軸 (Cross Axis): 垂直（縦）から 水平（横） へ変化。

3. 位置調整プロパティの役割が変化

軸が入れ替わるため、位置を制御するプロパティの影響範囲も変わります。

• justify-content:「上下」の配置を制御するようになります。
• align-items:「左右」の配置を制御するようになります。

注意点

• justify-content で上下の中央揃えなどを行う場合、親要素（コンテナ）に明示的な高さ（height）が設定されている必要があります。高さがないと、コンテンツの分だけしか親要素が広がらず、配置の変化が確認できません。
• column-reverse を指定すると、下から上へ逆順に並べることも可能です。

@media

@media（メディアクエリ）は、画面サイズ、解像度、端末の向き（縦/横）などの条件に応じて、特定のCSSルールを適用する機能です。レスポンシブデザインの核であり、スマートフォン（スマホ）、タブレット、PCといったデバイスごとのレイアウト切り替えを、1つのスタイルシートで実現します。

基本構文と使用例

主な用途と機能

• レスポンシブデザイン: デバイスの画面幅に合わせてカラム数（列）や文字サイズを変更する。
• 印刷用のスタイル適用: @media print を使用し、印刷時にナビゲーションメニューを非表示にするなど、紙用に見た目を整える。
• 端末の向き対応: orientation: landscape（横向き）または portrait（縦向き）でスタイルを切り替える。
• ダークモード対応: prefers-color-scheme でOSのテーマに応じた配色にする。

@mediaの synonyms (別称/関連用語)

• メディアクエリ (Media Queries): @media を使用して条件分岐を行う機能全般の総称。
• ブレイクポイント (Breakpoints): スマホからPCへレイアウトを切り替える境目となる画面サイズ。
• アットルール (At-rules): @ で始まるCSSの命令セットの一種。

記述のコツ
一般的にスマホ向けに先に記述する「モバイルファースト」が主流であり、min-width（最小幅）を使って小さい画面から大きい画面へスタイルを拡張していく方法が推奨されています。

position: relative　absolute

position プロパティにおける relative（相対位置）と absolute（絶対位置）は、要素を自由に配置するためにセットで使われることが多い重要な機能です。

1. 各プロパティの役割

• relative (相対位置)
• absolute (絶対位置)

2. 基本的な使い方のパターン

最も一般的なのは、「親に relative、子に absolute」 を指定する方法です。

3. 注意点

• 親に指定がない場合: 親要素に relative などが指定されていないと、さらに上の親を探しに行き、最終的にはブラウザの表示画面全体（HTML全体）が基準になってしまいます。
• 重なり順: absolute を使うと要素同士が重なります。重なる順番を制御したい場合は、MDNのz-index解説 などを参考に z-index を併用します。

設定数値は8の倍数が基本

CSSの設計において「8の倍数」がよく使われるのは、主に「8ptグリッドシステム」というデザインのスタンダードに基づいています。

なぜ「8」なのか、主な理由は以下の3点です。

1. 画面解像度との相性
   現代のディスプレイの多く（高解像度のRetinaディスプレイなど）は、1pxを2倍、3倍といった整数倍で表示します。8は「2、4、8」と整数で割り切りやすいため、異なる画面サイズでもボヤけ（ピクセルパーフェクトの崩れ）が発生しにくくなります。
2. デザインの整合性とスピード
   「余白やサイズに迷ったら8の倍数にする」というルールを決めることで、チーム全体で一貫性のあるレイアウトを素早く作れます。4, 8, 16, 24, 32… と刻むことで、リズムの良い視覚効果が生まれます。
3. 主要プラットフォームの推奨
   GoogleのMaterial Designや、Apple、多くのUIフレームワークが8の倍数を基準（ベースユニット）として採用しているため、業界のデファクトスタンダードになっています。 

最近では、より細かな調整のために「4の倍数」を基準にするケースも増えています。

margin: 0 auto;

ブロック要素に対して設定すると自動で中央寄せになる。

セレクター内のテキストを中央配置にする