枠線・文字の装飾線の作成 - 趣味サイトのためのCSS3講座
枠線・文字の装飾線の作成方法についての説明です。
「border: 太さ 線の種類 色名」で枠線を作成できます。枠線の種類は、none, solid, double, dashed,
dotted, groove, ridge, inset, outset の中から選べます。
《例》
<div class="box">テキスト</div>
.box {
border: 5px solid skyblue
}
《表示結果》
none
solid
double
dashed
dotted
groove
ridge
inset
outset
ちなみに、これらの線は区切り線（hrタグ）にも適用できます。dotted, dashed, inset, outset の4つは区切り線として使用しても綺麗です。
《例》
<hr class="kugiri">
.kugiri {
border: 1px dotted red
}
《区切り線のデザイン》
1px dotted red
を指定した場合
2px dashed blue
を指定した場合
3px inset purple
を指定した場合
3px outset green
を指定した場合
※ double, groove, ridge の3つは以下のように表示されてしまうので、区切り線としては不向きです。
3px double red
を指定した場合
3px groove red
を指定した場合
3px ridge red
を指定した場合
※「border-color: 色名」で線種を指定せず色のみを変更することも可能です。
border-color: red
を指定した場合
「display: inline-block」で、枠線の幅をテキストの長さに合わせることができます。
《例》
.box {
display: inline-block;
border: 5px solid skyblue;
}
数値で枠線のサイズを指定する場合、widthで幅、heightで高さを指定できます。
《例》
.box {
border: 5px solid skyblue;
width: 100px;
height: 50px
}
「border-radius: 数値」で、指定した値の分を半径として枠線の角を丸くすることができます。
《例》
.box {
width: 100px;
height: 50px;
border: 5px outset skyblue;
border-radius: 10px
}
「border-bottom: 線のレイアウト」で文字の下線、そこに「border-top: 線のレイアウト」を付け加えることで文字の上下線を作成できます。「border-left: 線のレイアウト」で文字の左に縦線を入れたり、それを下線と組み合わせることもできます。背景色をつけることも可能です。
こうした文字の装飾線は、見出しを作成する際に使います。
なお、文字の周りの余白はpaddingで指定します。上下paddingで左の縦線の長さを調整することもできます。
paddingについては次の章「
余白の指定」を参照してください。
《例》
.solid_line {
border-bottom: solid 2px green;
padding: 5px;
}
.dotted_line {
border-top: dotted 1px blue;
border-bottom: dotted 1px blue;
padding: 10px;
}
.left_line {
border-left: solid 3px red;
padding: 20px 15px;
}
.left_bottom_line {
border-bottom: solid 2px black;
border-left: solid 3px red;
padding: 5px 10px;
}
.bgcolor_line {
background: aliceblue;
border-left: solid 6px royalblue;
border-left: solid 3px red;
padding: 5px 10px;
}
《表示結果》
文字の下線を引いています。paddingを5pxで指定しています。
文字の上下線を引いています。paddingを10pxで指定しています。
文字の左に線を引いています。paddingを上下20px・左右15pxで指定しています。上下paddingで左線の長さを調整できます。
文字の左と下に線を引いています。paddingを上下5px・左右10pxで指定しています。上下paddingで左線の長さを調整できます。
背景色と左線をつけています。paddingを上下5px・左右10pxで指定しています。上下paddingで左線の長さを調整できます。
「text-decoration: underline」「text-decoration-color: 色名」「text-decoration-style: 線の種類」の3つを指定することで、文字のアンダーラインを引くことができます。
線の種類は、solid, double, dashed, dotted, wavy の中から選べます。paddingなどの指定はできないので、見出しの作成ではなくテキストの一部を目立たせたい場合に適しています。
《例》
<p class="text">solid</p>
.text {
text-decoration: underline;
text-decoration-color: red;
text-decoration-style: solid;
}
《表示結果》
solid
double
dashed
dotted
wavy
>>CSS3講座メニューへ戻る