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 と同じですが、この値は各エッジリージョンの間にスペースを追加してシームレスなパターンを作成します。
理解度チェック
国境に関する知識をテストする
枠線のデフォルトの色はどれですか。
black
white
currentColor
text-color
値を表し、枠線のデフォルトの色になります。historicColor
.my-element { border: solid hotpink; }
枠線のデフォルトの幅を教えてください。
1px
medium
solid
border-width
値ではなく、border-style
値です。border-inline: 1px solid
は...
border-block
が上下です。