枠線

CSS ポッドキャスト - 016: Borders

box model モジュールでは、 箱モデルの各セクションを説明するために、フレームにたとえて考えました。

枠線は箱のフレームで border プロパティには、フレームを作成するためのオプションが多数用意されています。 思いつく限りのあらゆるスタイルです。

枠線のプロパティ

個々の border プロパティを使用すると、枠線のさまざまな部分のスタイルを設定できます。

スタイル

枠線を表示するには、 定義する必要があります。 border-style。 次のオプションから選択できます。

ridge、inset、outset、groove スタイルを使用する場合、 2 番目に表示されている色の枠線が暗くなり、コントラストや奥行きが増します。 この動作はブラウザによって異なる場合があります。 特に black などの暗い色の場合はなおさらです。 Chrome では、これらの枠線のスタイルは単色で表示されます。Firefox では、 明るくされた後、より暗くなります。

他の枠線スタイルでもブラウザの動作は異なる場合があります。 そのため、さまざまなブラウザでサイトをテストすることが重要です。 この違いの一般的な例は、各ブラウザが dotted スタイルと dashed スタイルをレンダリングする方法です。

</ph>

ボックスの両側に枠線のスタイルを設定するには、 使用して、 border-top-style border-right-style, border-left-style, および border-bottom-style

省略形

margin や padding と同様に、 こちらの border 省略形プロパティを使って、枠線のすべての部分を 1 つの宣言で定義します。

.my-element {
    border: 1px solid red;
}

border 省略形の値の順序は border-width です。 border-style、次に border-color。

色

箱のすべての面に色を設定することも、 border-color。 デフォルトでは、ボックスの現在のテキストの色（currentColor）が使用されます。 つまり、枠線のプロパティのみを宣言すると、 幅、 明示的に設定しない限り、色は計算された値になります。

.my-element {
    color: blue;
    border: solid; /* Will be a blue border */
}

.my-element {
    color: blue;
    border: solid yellow;
}

ボックスの両側に枠線の色を設定するには、 border-top-color border-right-color, border-left-color および border-bottom-color。

幅

枠線の幅はラインの太さで、 border-width。 枠線のデフォルトの幅は medium です。 ただし、スタイルを定義しない限り、これは表示されません。 thin や thick など、他の名前付きの幅を使用することもできます。

border-width プロパティには、次のような長さ単位も指定できます。 px、em、rem、または %。 ボックスの上下左右の枠線の太さを設定するには、 border-top-width border-right-width, border-left-width および border-bottom-width。

論理プロパティ

論理プロパティ モジュールでは、ブロックフローとインライン フローの参照方法を確認しました。 明示的に指定する必要はありません。

境界線を使ったこの機能も用意されています。

.my-element {
    border: 2px dotted;
    border-inline-end: 2px solid red;
}

この例では、.my-element のすべての面が 2px として定義されています。 現在のテキストの色を示す点線の枠線です。 inline-end の枠線は 2px（実線の赤）として定義されます。 つまり英語のように左から右に表記する言語では 枠線はボックスの右側になります アラビア語など右から左に表記する言語の場合 ボックスの左側に赤い枠線が付きます

境界の論理プロパティについては、ブラウザのサポートが多岐にわたります。 使用する前に必ずサポート状況をご確認ください

枠線の角丸半径

ボックスの角を丸くするには、 border-radius プロパティ。

.my-element {
    border-radius: 1em;
}

この省略形を使用すると、ボックスの四隅に一貫した枠線が追加されます。 他の枠線プロパティと同様に、 各辺の枠線の半径を定義して border-top-left-radius border-top-right-radius, border-bottom-right-radius および border-bottom-left-radius。

各角の半径を省略形で指定します。 左上、右上、右下、左下の順になります。

.my-element {
    border-radius: 1em 2em 3em 4em;
}

角に値を 1 つ定義すると、 枠線の半径が 2 つの部分に分かれているため、次の省略形を使用しています。 分割します つまり、border-top-left-radius: 1em を設定すると、 左上の半径と左上の半径を設定します。

次のように、コーナーごとに両方のプロパティを定義できます。

.my-element {
    border-top-left-radius: 1em 2em;
}

これにより、border-top-left-top の値が 1em になります。 border-top-left-left の値は 2em です。 これにより、左上の境界の半径が楕円の半径に変換されます。 デフォルトの円の半径が使用されます。

これらの値は、border-radius 省略形で定義できます。 / を使用して、標準値の後に楕円値を定義します。 これにより、創造力を発揮して複雑なシェイプを作成できます。

.my-element {
    border: 2px solid;
  border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
}

画像の枠線

CSS でストロークベースの枠線を使用する必要はありません。 また、任意のタイプの画像を使用することもできます。 border-image。 この短縮プロパティを使用すると、ソースイメージ、 スライスの種類、画像の幅、 枠線の端からどのくらい離れているか、またどのように繰り返すかを指定します。

.my-element {
  border-image-source: url(https://assets.codepen.io/174183/border-image-frame.jpg);
  border-image-slice: 61 58 51 48;
  border-image-width: 20px 20px 20px 20px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
}

border-image-width プロパティは border-width のようなものです。 枠線の画像の幅を設定するときに使用します。 border-image-outset プロパティを使用すると、枠線の画像と、枠線が囲まれるボックスの距離を設定できます。

border-image-source

border-image-source （枠線画像のソース）任意の有効な画像（CSS グラデーションを含む）の url を指定できます。

.my-element {
    border-image-source: url('path/to/image.png');
}

.my-element {
    border-image-source: linear-gradient(to bottom, #000, #fff);
}

border-image-slice

border-image-slice プロパティは、画像を 4 本の分割線で構成された 9 つの部分にスライスできる便利なプロパティです。 これは、上、右、下、左のオフセット値を定義する margin 省略形と同様に機能します。

.my-element {
    border-image: url('image.jpg');
    border-image-slice: 61 58 51 48;
}

オフセット値を定義すると、 これで、画像の 9 つのセクション（4 つの角、4 つの端、中央のセクション）ができあがります。 角は、枠線の画像がある要素の角に適用されます。 エッジはその要素のエッジに適用されます。 border-image-repeat プロパティは、それらのエッジがスペースを埋める方法と、 border-image-width プロパティはスライスのサイズを制御します。

最後に、fill キーワードは、中央のセクション（スライスで残された部分）を要素の背景画像として使用するかどうかを決定します。

border-image-repeat

border-image-repeat 枠線画像の繰り返し方法を CSS に指示する方法です。 これは background-repeat と同じように動作します。

• 初期値は stretch です。 これは、利用可能なスペースをできるだけ埋めるようにソースイメージを引き伸ばします。
• repeat 値は、ソース画像の端をできるだけ多くタイル表示します。 エッジ領域をクリップして これを実現できます
• round 値は繰り返しと同じです。 できるだけ多くに収まるように画像の端領域をクリッピングする代わりに、 画像が引き伸ばされ、繰り返されることで、シームレスな再現が実現されます。
• space の値は繰り返しと同じです。 このように設定することで、各エッジ領域の間にスペースが加わり、シームレスなパターンが形成されます。

理解度をチェックする

国境に関する知識をテストする

.my-element {
  border: solid hotpink;
}