下線を付ける 線の種類（実線）、太さ、色を指定する。
borderプロパティは、ボーダーのスタイル・太さ・色をまとめて指定する際に使用します。 スタイル・太さ・色のうち、指定する値を任意の順序でスペースで区切って記述します。
css
border: solid 2px black;
「線の種類」「線幅」「線の色」
「線の種類」「線幅」「線の色」
※この３つを指定する。順番はこのとおりでなくても良い。
- 上下左右のボーダーを異なったものにする
borderプロパティでは、ボーダーのスタイル・太さ・色について 上下左右のボーダーを異なったものにする場合には、 以下のプロパティを使用する。
| プロパティ | 内容 |
|---|---|
| border-top | 上側の枠線 |
| border-bottom | 下側の枠線 |
| border-left | 左側の枠線 |
| border-right | 右側の枠線 |
| プロパティ | 内容 |
|---|---|
| border-style | ボーダーのスタイルを指定する |
| border-width | ボーダーの太さを指定する |
| border-color | ボーダーの色を指定する |
線の種類
| プロパティ | 内容 |
|---|---|
| solid | 実線 |
| dotted | 点線 |
| dashed | 破線 |
| double | 二重線 |
| groove | 谷型 |
| ridge | 山型 |
| inset | 左と上が濃い |
| outset | 右と下が濃い |
| hidden | 非表示 |
| none | なし(デフォルト) |
- 下線 (アンダーライン)
<h1>見出しデザイン</h1>
h1 {
padding-bottom: 0.3em;
border-bottom: solid 2px black;
}
- 下線 (二重線)
<h1>見出しデザイン</h1>
h1 {
position: relative;
padding-bottom: 0.5em;
}
h1::after {
position: absolute;
content: '';
left: 0;
bottom: 0;
width: 100%;
height: 7px;
box-sizing: border-box;
border-top: 3px solid black;
border-bottom: 1px solid black;
}
- 下線 (2トーンカラー)
タイトルの下にツートーンパターンの下ボーダーを引いた見出しデザインです。 widthを変更することでツートンの比率を変えることができます。
<h1>見出しデザイン</h1>
h1 {
position: relative;
padding-bottom: 0.5em;
border-bottom: 4px solid #DDD;
}
h1::after {
position: absolute;
content: " ";
border-bottom: solid 4px #446689;
bottom: -4px;
width:10%;
display: block;
}
- 下線 (マーカー)
タイトルの下にマーカー(蛍光ペン)で下ボーダーを引いたような見出しデザインです。
<h1>見出しデザイン</h1>
h1 {
padding: 0.2em;
background: linear-gradient(transparent 70%, #fff100 70%);
}
- マーク (縦ライン)
タイトルの先頭に縦ラインを入れた見出しデザインです。 縦ラインはwidthbackground-colorでラインの太さや色をカスタマイズできます。
<h1>見出しデザイン</h1>
h1 {
position: relative;
padding-left: 0.7em;
}
h1::after {
position: absolute;
top: 50%;
left:0;
transform:translateY(-50%);
content: '';
width: 5px;
height:1em;
background-color: #446689;
}
今日はここまで。
