CSS ポッドキャスト - 013: スペース
たとえば、3 つの箱が積み重ねられていて、その間にスペースが必要だとします。CSS でこの作業を行う方法をいくつ思いつきますか？
margin プロパティを使用すると、必要な値を取得できますが、不要なスペースが追加されている場合もあります。たとえば、各要素の間にあるスペースのみをターゲットにするにはどうしたらよいでしょうか。この場合は、gap などが適切です。UI 内の間隔を調整する方法は多数あり、それぞれに長所と短所があります。
HTML のスペース
HTML 自体には、要素をスペースにするためのメソッドが用意されています。<br> 要素と <hr> 要素を使用すると、ブロック方向に要素間の間隔を空けることができます。ラテン語ベースの言語では、上から下に向かって配置します。
<br> 要素を使用すると、ワード プロセッサで Enter キーを押した場合と同様に、改行が作成されます。
<hr> は、margin と呼ばれる、左右にスペースがある水平線を作成します。
HTML 要素を使用するとともに、HTML エンティティを使用するとスペースを作成できます。HTML エンティティは予約された文字列で、ブラウザによって文字エンティティに置き換えられます。たとえば、HTML ファイルに「©」と入力すると、© 記号に変換されます。
エンティティは改行なしスペース文字に変換され、インライン スペースが設定されます。ただし、このキャラクターの互換性を損なわない要素によって 2 つの要素がつなぎ合わせられているため、動作がおかしくなる可能性があります。
マージン
要素の外にスペースを追加する場合は、margin プロパティを使用します。マージンとは、要素の周囲にクッションを追加するようなものです。
margin プロパティは、margin-top、margin-right、margin-bottom、margin-left の省略形です。
省略形 margin は、上、右、下、左という特定の順序でプロパティを適用します。問題は覚えておいてください、TRouBLe です。
margin 省略形は、1 つ、2 つ、または 3 つの値とともに使用することもできます。4 つ目の値を追加すると、それぞれの辺を設定できます。これらは以下のように適用されます。
- 1 つの値がすべての辺に適用されます。(
margin: 20px). - 2 つの値: 1 つ目の値は上下端に適用され、2 つ目の値は左右に適用されます。(
margin: 20px 40px) - 3 つの値: 1 つ目の値は
top、2 つ目の値はleftとright、3 つ目の値はbottomです。(margin: 20px 40px 30px).
マージンは、長さ、割合、自動値（1em や 20% など）で定義できます。割合を使用する場合、値は要素を含むブロックの幅に基づいて計算されます。
つまり、要素を含むブロックの幅が 250px で、要素の margin 値が 20% の場合、要素の両側の計算マージンは 50px になります。
マージンに auto の値を使用することもできます。サイズが制限されたブロックレベルの要素の場合、auto のマージンが適用される方向で利用可能なスペースを占有します。その好例が、アイテムが互いに押し出して押し出される flexbox モジュールの場合です。
auto マージンのもう一つの好例は、最大幅を持つ水平方向の中央に配置されたラッパーです。この種のラッパーは、ウェブサイトの一貫した中央カラムを作成するためによく使用されます。
.wrapper {
max-width: 400px;
margin: 0 auto;
}
ここでは、上下（ブロック）側から余白が削除され、auto は左右（インライン）のスペースを共有します。
マイナスの利益
マージンに負の値を使用することもできます。 隣接する兄弟要素の間にスペースは追加されず、それらの間のスペースが縮小されます。そのため、使用可能なスペースより大きい負の値を宣言した場合、要素が重なってしまう可能性があります。
マージンの折りたたみ
マージンの折りたたみは難しいコンセプトですが、インターフェースを作成する際にはごく一般的に遭遇するものです。見出しと段落の 2 つの要素があり、どちらにも縦方向の余白が設定されているとします。
<article>
<h1>My heading with teal margin</h1>
<p>A paragraph of text that has blue margin on it, following the heading with margin.</p>
</article>
h1 {
margin-bottom: 2rem;
}
p {
margin-top: 3rem;
}
2rem と 3rem を合計すると 5rem になるので、一見すると、段落が見出しから 5em 間隔で配置されると思っても問題ありません。しかし、縦方向の余白が折りたたまれるため、スペースは実際には 3rem になります。
マージンの折りたたみは、隣接する 2 つの要素の最大値を選択し、隣接する両側に垂直方向のマージンを設定することで機能します。h1 の下部と p の上部が一致するため、h1 の下マージンと p の上マージンの最大値が選択されます。h1 の下余白が 3.5rem の場合、両者の間のスペースは 3rem より大きいため、3.5rem になります。ブロックマージンのみが折りたたまれ、インライン（横）マージンは折りたたまれません。
余白の折りたたみは、空の要素にも対応しています。
上下に 20px の余白がある段落の場合、40px ではなく 20px のスペースのみが作成されます。この要素内に padding など何かを追加すると、そのマージンは自然に折りたたまれなくなり、コンテンツを含むボックスとして扱われます。
理解度チェック
余白の折りたたみに関する知識を確認する
重ねられた 2 つの要素に、上余白 20 ピクセルと下余白 30 ピクセルの余白がある場合、要素間にはどのくらいのスペースがあるでしょうか。
余白の折りたたみを防止する
position: absolute を使用して要素を絶対位置にすると、マージンが折りたたまれなくなります。また、float プロパティを使用しても、マージンは折りたたまれません。
ブロック マージンのある 2 つの要素の間にマージンがない要素がある場合、ブロック マージンのある 2 つの要素は兄弟ではなく、兄弟ノードとなるため、マージンも折りたたまれません。
レイアウト レッスンで、Flexbox とグリッド コンテナはブロック コンテナとよく似ていますが、子要素の処理が大きく異なることを学びました。余白の折りたたみもこれに該当します。
このレッスンの元の例を利用して、列方向の Flexbox を適用すると、余白が折りたたまれるのではなく結合されます。 これにより、Flexbox とグリッド コンテナは、レイアウト作業を予測できるようになります。
マージンとマージンの折りたたみは理解しにくいものですが、仕組みを詳しく理解しておくことは非常に有益であるため、こちらの詳細な説明を使用することを強くおすすめします。
パディング
padding プロパティは、margin のように箱の外側にスペースを作るのではなく、ボックスの内側に断熱材のようなスペースを作ります。
使用しているボックスモデル（ボックスモデルのレッスンで説明）によっては、padding も要素全体の寸法に影響する可能性があります。
padding プロパティは、padding-top、padding-right、padding-bottom、padding-left の省略形です。margin と同様に、padding にも padding-block-start、padding-inline-end、padding-block-end、padding-inline-start の論理プロパティがあります。
位置付け
また、layout モジュールで説明されているように、position に static 以外の値を設定した場合は、top、right、bottom、left の各プロパティで要素間に配置できます。これらの方向値の動作にはいくつかの違いがあります。
position: relativeが指定された要素は、これらの値を設定しても、ドキュメント フロー内での位置を維持します。また、要素の位置も相対的に決まります。position: absoluteを持つ要素は、相対的な親の位置を基準とする方向値に基づきます。position: fixedの要素は、ビューポートの方向値に基づきます。position: stickyが指定された要素は、ドッキング状態または停止状態の場合にのみ、方向値を適用します。
論理プロパティ モジュールでは、inset-block プロパティと inset-inline プロパティについて説明します。これらのプロパティを使用すると、書き込みモードに対応する方向値を設定できます。
どちらのプロパティも、start と end の値を組み合わせた省略形であり、start と end に設定する値を 1 つ指定するか、2 つの個別の値を受け入れます。
グリッドとフレックスボックス
最後に、グリッドと Flexbox のどちらでも、gap プロパティを使用して子要素間にスペースを作成できます。gap プロパティは row-gap と column-gap の省略形であり、1 つまたは 2 つの値（長さまたは割合）を受け入れます。unset、initial、inherit などのキーワードを使用することもできます。値を 1 つだけ定義すると、同じ gap が行と列の両方に適用されますが、両方の値を定義すると、最初の値は row-gap、2 番目の値は column-gap になります。
Flexbox とグリッドのどちらでも、分散と配置の機能を使用してスペースを作成することもできます。これについては、グリッド モジュールとFlexbox モジュールで説明します。
間隔を一定にする
優れたフローとリズムを持つ一貫性のあるユーザー インターフェースを作成するために、戦略を策定して採用することが重要です。そのためのおすすめの方法は、間隔を一定の間隔で測定することです。
たとえば、要素間のすべてのギャップ（ガター）に対する一貫した尺度として 20px を使用することを約束すると、すべてのレイアウトの外観と操作性に一貫性を持たせることができます。また、フロー コンテンツ間の垂直方向の間隔として 1em を使用し、要素の font-size に基づいて一貫した間隔を実現することもできます。どの方法を選択した場合でも、これらの値を変数（または CSS カスタム プロパティ）として保存して値をトークン化し、整合性を少し確保しましょう。
:root {
--gutter: 20px;
--spacing: 1em;
}
h1 {
margin-left: var(--gutter);
margin-top: var(--spacing);
}
このようなカスタム プロパティを使用すると、一度定義したプロパティを CSS 全体で使用できます。値が要素内でローカルに、またはグローバルに更新されると、値はカスケードを通過し、更新された値が反映されます。
理解度チェック
間隔に関する知識をテストする
次のような場合は、スペースに HTML を使用しても安全です。
ボックスの内側にスペースを作成するには...
ボックスの外にスペースを作成するには...
ボックス間のスペースを確保するには...