間隔

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 つの値: 最初の値は top、 2 つ目の値は left、right です。 3 つ目の値は bottom です。（margin: 20px 40px 30px）。

マージンは長さで定義できます。 パーセンテージまたは自動値（1em、20% など）。 割合で指定する場合は 値は、要素を含むブロックの幅に基づいて計算されます。

つまり、要素を含むブロックの幅が 250px の場合、 要素の margin 値が 20% の場合: 要素の両辺のマージンは 50px として計算されます。

マージンには値 auto を使用することもできます。 サイズが制限されているブロックレベルの要素の場合、 auto の余白は、適用された方向の空きスペースを占有します。 良い例です フレックスボックス モジュールを使用します。このモジュールでは、アイテムが互いに押し出されます。

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;
}

一見すると 段落と見出しの間隔を 5em と決めても問題ありませんが、 2rem と 3rem を合わせると 5rem になるからです。 ただし、縦方向の余白は縮小されるため、実際にはスペースは 3rem になります。

マージンの折りたたみは、隣接する 2 つの要素の最大値を選択することで機能します。 隣接する辺に垂直方向の余白を設定します h1 の下部は p の上部と接触しています。 h1 の下余白と p の上余白の最大値が選択されます。 h1 の下余白を 3.5rem とすると、 それらの間のスペースは 3rem より大きいため、3.5rem になります。 ブロックの余白のみが折りたたまれ、インライン（水平）の余白は閉じません。

マージンの折りたたみ機能は、要素が空の場合にも役立ちます。 上下の余白が 20px の段落がある場合、 40px ではなく、20px のスペースのみが作成されます。 ただし、この要素内になんらかの要素が追加された場合、 padding を含む場合、余白は折りたたまれなくなり、コンテンツのあるボックスとして扱われます。

理解度をチェックする

余白の折りたたみに関する知識を確認する

余白の折りたたみを防止しています

要素を絶対位置にすると position: absolute を使用すると、余白が折りたたまれなくなります。 float プロパティを使用しても、マージンは折りたたまれません。

ブロック マージンが設定された 2 つの要素の間に余白のない要素がある場合、 余白も折りたたまれません ブロック マージンが設定された 2 つの要素は、もはや隣接する兄弟ではなく、単なる兄弟だからです。

レイアウト レッスンでは、 Flexbox と Grid のコンテナは ブロックコンテナによく似ていますが 子要素の処理方法も大きく異なります これはマージンの折りたたみについても同様です。

このレッスンの元の例を参考にして、フレックスボックスと列方向の 余白が合算され 表示されます。 これにより、レイアウト処理、 これに対応するために Flexbox と Grid のコンテナを設計しました

マージンとマージンの縮小はわかりにくいことがありますが その仕組みを詳しく理解しておくと役立ちます こちらの詳しい解説 を強くおすすめします。

パディング

箱の外にスペースを作るのではなく、 margin のように、 padding プロパティを使用すると、箱の内側にスペースが作られます。 断熱材のようなものです

使用しているボックスモデルに応じて異なります。モデルについては、 ボックス モデル レッスン - 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 にどちらか一方の値を設定するか、 2 つの個別の値があります

グリッドとフレックスボックス

最後に、グリッドとフレックスボックスの両方で、gap プロパティを使用して子要素間のスペースを作成できます。 gap プロパティは row-gap と column-gap の省略形です。 1 つまたは 2 つの値（長さまたは割合）を指定できます。 unset、initial、inherit などのキーワードも使用できます。 1 つの値のみを定義する場合 行と列の両方に同じ gap が適用されます。 両方の値を定義すると 最初の値は row-gap、2 番目の値は column-gap です。

Flexbox と Grid のどちらも、分散や配置の機能を使用してスペースを作ることができます。 このモジュールで取り上げる grid モジュールと flexbox モジュール。

一貫したスペースの作成

戦略を選択して継続するのはとても良いことです。 をお役立てください。 これを実現するには、間隔に一貫した尺度を使用することをおすすめします。

たとえば、20px を使用することを確約できます。 要素間のすべてのギャップ（ガター）に対する一貫した尺度であるため、 すべてのレイアウトのデザインに一貫性があります。 また、フロー コンテンツ間の垂直方向のスペースとして 1em を使用することもできます。 これにより、要素の font-size に基づいて一貫した間隔が確保されます。 どちらを選択しても これらの値を変数（または CSS カスタム プロパティ）として保存します。 これらの値をトークン化し、整合性を若干簡単にします。

:root {
  --gutter: 20px;
  --spacing: 1em;
}

h1 {
  margin-left: var(--gutter);
  margin-top: var(--spacing);
}

このようなカスタム プロパティを使用すると、一度定義すれば、 CSS 全体で使用できます これらが更新されると 要素内でローカルにすることも、グローバルに 値はカスケードに渡され、更新された値が反映されます。

理解度をチェックする

間隔に関する知識をテストする