枠線

The CSS Podcast - 016: Borders

ボックスモデル モジュールでは、ボックスモデルの各セクションをフレームにたとえて説明しました。

枠線ボックスはボックスのフレームです。border プロパティを使用すると、そのフレームを考えられるほぼすべてのスタイルで作成するための幅広いオプションが提供されます。

枠線のプロパティ

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

スタイル

枠線を表示するには、border-style を定義する必要があります。次のようなオプションがあります。

ridge、inset、outset、groove スタイルを使用すると、ブラウザは 2 番目に表示される色の枠線の色を暗くして、コントラストと奥行きを持たせます。 この動作はブラウザによって異なる可能性があります（特に black などのダークカラーの場合）。2 番目の枠線のスタイルは、Chrome では単色、Firefox では明るくなって、2 番目の色が暗くなります。

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

ボックスの両側に枠線のスタイルを設定するには、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 の値は repeat と同じですが、画像の端領域をできるだけ収めるようにクリップするのではなく、画像を伸縮するだけでなく繰り返して、シームレスな繰り返しを実現します
• space 値は repeat と同じですが、この値は各エッジリージョンの間にスペースを追加してシームレスなパターンを作成します。

理解度チェック

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

.my-element {
  border: solid hotpink;
}