水平線のスタイル
水平線のスタイル
水平線のスタイルを指定することができます。
color
水平線の色を指定できます。
CSSソース
hr{
color: #00ff99;
}
color: #00ff99;
}
| 値 | 意味 | 説明 |
|---|---|---|
| RGB値 | #000000〜#ffffff | |
| 色名 | black、red、grayなど |
height
水平線の高さ（太さ）を指定できます。
CSSソース
hr{
height: 11px;
}
height: 11px;
}
| 値 | 意味 | 説明 |
|---|---|---|
| % | パーセント | |
| px | ピクセル | ディスプレイの画素数 |
| em | 要素のフォントサイズに対する相対値 | |
| ex | 要素の小文字の「x」に対する相対値 | |
| in | インチ | 1in=2.54cm |
| cm | センチメートル | |
| mm | ミリメートル | |
| pt | ポイント | 1pt=1/72in |
| pc | パイカ | 1pc=12pt |
width
水平線の長さを指定できます。
CSSソース
hr{
width: 100px;
}
width: 100px;
}
| 値 | 意味 | 説明 |
|---|---|---|
| % | パーセント | |
| px | ピクセル | ディスプレイの画素数 |
| em | 要素のフォントサイズに対する相対値 | |
| ex | 要素の小文字の「x」に対する相対値 | |
| in | インチ | 1in=2.54cm |
| cm | センチメートル | |
| mm | ミリメートル | |
| pt | ポイント | 1pt=1/72in |
| pc | パイカ | 1pc=12pt |
border-style
水平線の枠のスタイルを指定できます。
CSSソース
hr{
color: #00ff99;
border-style: dotted;
}
color: #00ff99;
border-style: dotted;
}
| 値 | 意味 | 説明 |
|---|---|---|
| none | ボーダーなし | デフォルト |
| dotted | 点線 | |
| dashed | 破線 | |
| solid | １本線 | |
| double | ２本線 | |
| groove | 立体的な凹線 | |
| ridge | 立体的な凸線 | |
| inset | 上左が暗く、下右が明るい線 | |
| outset | 上左が明るく、下右が暗い線 |
人が登録