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 を使用しても安全です。
ボックスの内側にスペースを作成するには...
ボックスの外にスペースを作成するには...
ボックス間のスペースを確保するには...