<line-style>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
<line-style>
列挙値型は、線のスタイル、または線がないことを定義するキーワード値を表します。 <line-style>
キーワード値は、境界や段組みの以下の個別指定プロパティで用いられます。
border
,border-style
border-block
,border-block-style
border-block-end
,border-block-end-style
border-block-start
,border-block-start-style
border-bottom
,border-bottom-style
border-inline
,border-inline-style
border-inline-end
,border-inline-end-style
border-inline-start
,border-inline-start-style
border-left
,border-left-style
border-right
,border-right-style
border-top
,border-top-style
column-rule
,column-rule-style
構文
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
値
<line-style>
列挙型は、以下に挙げた値のうちの一つを使用して指定します。
none
-
線を表示しません。幅の値を指定しても、線の幅の計算値は
0
です。表のセルと境界線が折りたたまれている場合、none
の値の優先順位が最も低くなります。他にも競合する境界線が設定されている場合は、それが表示されます。none
値はhidden
に似ています。 -
線を表示しません。幅の値を指定しても、線の幅の計算値は
0
です。表のセルと境界線が折りたたまれている場合、hidden
値が最も優先されます。他にも競合する境界線が設定されている場合、その境界線は表示されません。hidden
値はnone
と似ていますが、hidden
は輪郭線スタイルには有効な値ではありません。 dotted
-
連続した丸い点を表示します。ドットの半径は、線の幅の計算値の半分です。ドットの間隔は仕様では定義されておらず、実装によって異なります。
dashed
-
一連の短く角ばったダッシュまたは線分を表示します。線分の正確なサイズと長さは仕様では定義されておらず、実装によって異なります。
solid
-
単一のまっすぐな実線を表示します。
double
-
2 本の直線を間隔を空けて表示します。線の長さは、線の幅で定義するピクセルサイズまで追加されます。
groove
-
彫られたように見える境界線を表示します。この値は
ridge
の反対です。 ridge
-
押し出された外観の境界を表示します。この値は
groove
の反対です。 inset
-
要素が埋め込まれたように現れる境界線を表示します。この値は
outset
の反対です。表セルの枠線に適用され、border-collapse
がcollapsed
に設定されている場合、この値はgroove
のように動作します。 outset
-
要素がエンボス加工されて現れるように境界線を表示します。この値は
inset
の反対です。border-collapse
をcollapsed
に設定した表セルに適用すると、この値はridge
のように動作します。
メモ: <outline-style>
は outline
および outline-style
プロパティの値の型として使用されます。 <line-style>
と似ていますが、 hidden
に対応しておらず、 auto
値を使用しません。 auto
を設定すると、ユーザーエージェントが定義した <line-style>
の値が使用されます。
例
1 つ目の例は <line-style>
キーワードの値をすべて示しています。 2 つ目の例は、いくつかの線スタイル設定が予期しない方法で表示されることを示しています。
線スタイルの定義
この例では、すべての <line-style>
値を CSS の border-style
と column-rule-style
プロパティの値として表示させます。
HTML
この例では複数の <div>
要素を使用しており、クラスごとに <line-style>
値を表しています。
<div class="<line-style>">
<p><line-style></p>
<p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
CSS
この例の CSS では、すべての <p>
要素の境界線と段間罫の幅を 7px
とし、スタイル値を double
と定義しています。各段落に対して、 border-style
と column-rule-style
プロパティに様々な <line-style>
値を指定することで、その double
値が上書きされます。
p {
padding: 5px;
border: double 7px #bada55;
}
p + p {
columns: 3;
column-gap: 20px;
column-rule: double 7px;
border-color: #000000;
}
.none p {
border-style: none;
column-rule-style: none;
}
.hidden p {
border-style: hidden;
column-rule-style: hidden;
}
.dotted p {
border-style: dotted;
column-rule-style: dotted;
}
.dashed p {
border-style: dashed;
column-rule-style: dashed;
}
.solid p {
border-style: solid;
column-rule-style: solid;
}
.double p {
border-style: double;
column-rule-style: double;
}
.groove p {
border-style: groove;
column-rule-style: groove;
}
.ridge p {
border-style: ridge;
column-rule-style: ridge;
}
.inset p {
border-style: inset;
column-rule-style: inset;
}
.outset p {
border-style: outset;
column-rule-style: outset;
}
結果
黒枠は常に黒とは限らないことに注意してください。
線のスタイルと色の定義
この例では線のスタイルと色の指定について説明します。 <line-style>
キーワードの値によっては、線の色が期待したものと異なる場合があります。 groove
、ridge
、inset
、outset
スタイルに要求される「3D」効果を生むために、これらの値を黒または白で表示するときにはユーザーエージェントが他の色の線の組み合わせとは異なる色の計算を使用します。
HTML
この例では、複数の <div>
要素を使用し、それぞれ異なる border-color
をインラインの style
として設定しています。
<div style="border-color: #000000"></div>
CSS
それぞれの <div>
の 4 辺には異なる <line-style>
値があり、それぞれのリストアイテムは異なる <color>
値になっています。宣言された CSS をインラインで表示するために、生成コンテンツを使用しています。
div {
border-width: 10px;
border-style: inset groove ridge outset;
padding: 5px;
}
div::before {
content: attr(style);
}
結果
黒に近い#000001
の色は実際の黒とは異なる場合があり、明るい色を使用すると辺の明暗のコントラストがより目立つことに注意してください。
仕様書
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # typedef-line-style |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- CSS 背景と境界モジュール
- CSS 基本ユーザーインターフェイスモジュール
- CSS 段組みレイアウトモジュール