Skip to main content

CSS Layout

mdn web docs CSS レイアウト料理帳

Overview​

CSSでレイアウトを組む方法をまとめているセクション。

種類 以下の種類がある。

  1. フロートレイアウト（Float Layout）
  2. フレックスボックスレイアウト（Flexbox Layout）
  3. CSSグリッドレイアウト（CSS Grid Layout）
  4. ポジショニング（Positioning）
  5. テーブルレイアウト（Table Layout）
  6. マルチカラムレイアウト（Multi-column Layout） CSSでレイアウトを組むための方法はいくつかあり、それぞれの方法には特定の用途やメリットがあります。代表的なレイアウトの方法を以下に紹介します。

フロートレイアウト（Float Layout​

要素を左または右に浮かせることでレイアウトを作成する。

.container {
    overflow: hidden; /* フロートをクリアするため */
}
.box {
    float: left;
    width: 50%;
}

フレックスボックスレイアウト（Flexbox Layout）​

**1次元のレイアウト（横方向または縦方向）**を簡単に作成できる。親要素に display: flex; を指定。

.flex-container {
    display: flex;
    justify-content: space-between; /* 子要素間のスペースを均等に */
}
.flex-item {
    flex: 1;
}

CSSグリッドレイアウト（CSS Grid Layout）​

2次元のレイアウトを作成するための強力な方法。親要素に display: grid; を指定する。

勉強用URL
基本レイアウト構成URL
CSSグリッドレイアウトでサイズが違う復数のボックスをタイル上に配置する

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列を均等に配置 */
    grid-template-rows: auto;
}

CSSグリッドレイアウト（CSS Grid Layout）の用語​

コンテナ​

display: grid; または display: inline-grid; を指定することでその要素はGrid Layoutのコンテナになる。

アイテム​

コンテナの子要素。コンテナの直接の子要素は基本的にすべてアイテムとなる。

<div style="display:grid;"> <!-- コンテナ -->
    <div></div> <!-- アイテム-->
    <p></p> <!-- アイテム -->
    <section> <!-- アイテム -->
        <div></div> <!-- これはアイテムではない -->
    </section>
</div>

ライン​

グリッドを分ける垂直および水平の線のこと（0という番号のラインはない）。
グリッドの上下左右それぞれの両端にも存在している。

ラインには上あるいは左から1を基準に正の番号が振られている。

同時に下あるいは右からは-1から順に負の番号が振られています。

トラック​

グリッドの行および列のことです。言い換えればトラックとは、隣接する2本のラインの間を表しています。

セル​

隣接する垂直および水平方向のラインが作る、アイテムを配置できる最小の単位です。

エリア​

ひとつあるいは複数のセルが結合してできるセルの集まりです。 エリアには名前を付けることができ、アイテムを配置できます。

fr(fraction)​

gridの大きさを決めるfr(fraction(分数の意味)」)
1fr は、Grid Layout（グリッドレイアウト）で使用される単位のひとつです。fr は「fraction」（分数）の略称です。

fr 単位は、コンテナー内の利用可能なスペースを分数で表現するために使用されます。グリッドコンテナー内の各セルや列の幅（または高さ）を指定する際に、fr 単位を使用することで柔軟なレイアウトを実現できます。

fr 単位は、利用可能なスペースを均等に分割するために使用されます。例えば、1fr 2fr と指定した場合、1つ目の列は利用可能なスペースの1/3を占め、2つ目の列は残りの2/3を占めることになります。

また、fr 単位は他の長さ単位と組み合わせて使用できる。例えば、2fr 1em と指定すると、1つ目の列は利用可能なスペースの2/3を占め、2つ目の列は1emの幅を持つことになります。

fr 単位は、Grid Layoutをより柔軟かつレスポンシブなレイアウトにするための便利なツールです。

ポジショニング（Positioning）​

要素の位置を static relative absolute fixed sticky のいずれかで制御する。

.relative-container {
    position: relative;
}
.absolute-item {
    position: absolute;
    top: 0;
    left: 0;
}

テーブルレイアウト（Table Layout）​

HTMLのテーブル要素を使用してレイアウトを作成する。
通常はレスポンシブでないため、現代のデザインではあまり使われない。

.table {
    display: table;
}
.table-row {
    display: table-row;
}
.table-cell {
    display: table-cell;
}

**マルチカラムレイアウト（Multi-column Layout）​

コンテンツを複数の列に分割します。雑誌や新聞のようなレイアウトに適しています。

.multi-column {
    column-count: 3; /* 3列に分割 */
    column-gap: 20px; /* 列間のスペース */
}
Tags:
Last updated on