The CSS Podcast - 016: Borders
ボックスモデル モジュールでは、ボックスモデルの各セクションを説明するためにフレームとの類似性を検討しました。
ボーダー ボックスはボックスのフレームです。border
プロパティを使用すると、考えられるほぼすべてのスタイルでフレームを作成できます。
境界線のプロパティ
個々の border
プロパティを使用すると、境界のさまざまな部分にスタイルを設定できます。
スタイル
境界を表示するには、border-style
を定義する必要があります。次のオプションから選択できます。
ridge
、inset
、outset
、groove
スタイルを使用すると、ブラウザは表示される 2 番目の色の境界線の色を暗くして、コントラストと奥行きを表現します。この動作はブラウザによって異なる場合があります(特に black
などの暗い色の場合)。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;
}
角に単一の値を定義すると、別のショートカットを使用します。これは、境界半径が垂直方向と水平方向の 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 と同じですが、この値を使用すると、各エッジ領域の間にスペースが追加され、シームレスなパターンが作成されます。
理解度を確認する
国境に関する知識をテストする
デフォルトの枠線の色はどれですか?
historicColor
currentColor
white
black
.my-element { border: solid hotpink; }
境界のデフォルトの幅はどれくらいですか?
1px
solid
medium
border-inline: 1px solid
は...