Webページを構築する際、テキストへの下線配置や矢印など、コンテンツをよりわかりやすくする工夫をしたくなるものです。CSSを使うと、簡単なコードを書くだけでテキストの装飾などが思いのままにできます。今回ご紹介するCSSの書き方は、コンテンツの中でユーザーに注目してほしいところを示せる便利なものです。矢印や三角の作り方など、この機会にチェックしてみてください。

CSSで下線を付ける方法

テキストに下線を設置する場合、HTMLを編集して下線を表示させる方法もありますが、下線が必要になる度にコードを記述する必要があり面倒です。記述が増えると、コードが長くなってしまい、わかりにくくなる上、後で修正する際も一箇所ずつ作業が必要になり手間がかかります。こういった理由からCSSを使う方が楽なのです。

さて、CSSで下線をつける方法として、以下の2つをご紹介します。

1)text-decoration

とにかく簡単に下線をつけるなら、text-decorationを使います。以下のようにtext-decorationにunderlineを指定するだけで下線を設置できます。

text-decoration: underline;

2) border-bottom

もう一つの方法はborder-bottomを使います。border-bottomは線を設置するためのプロパティです。これ一つで、線の種類や太さ、色までを一行で設定できるので大変便利になります。コードの記述量を抑えてシンプルに使いこなせるのが魅力です。

一重線(solid)を引く

いわゆる普通の下線を引く場合です。ちなみにnoneを設置すると線は表示されません。

border-bottom: solid;

二重線(double)を引く

二重線を設置する場合は、以下のようにdoubleを指定します。

border-bottom: double;

点線(dotted)を引く

線の点線にしたい場合は、dottedを記述します。似た線の種類として、破線が挙げられます。破線の場合はdashedを指定します。

border-bottom: dotted;

このようにborder-bottomは、わずかな記述の違いで様々な線の形状を実現できます。

太さを変更する

線の太さもborder-bottomの中だけで指定できます。線の種類と合わせて指定するケースとして、一重線を太さ1pxで指定する例を書きましょう。下線の指定としてsolidを記述した後に、線の太さとして1pxを書きましたが、記述の順番は自由です。

border-bottom: solid 1px;

線の太さの指定は、数値以外にキーワードで記述することも可能です。細くしたい場合は「thin」、普通は「medium」、太くしたい場合は「thick」と記述します。

色を変更する

さて、次に色の指定も合わせて行ってみましょう。2pxの太さの青い二重線を引いてみます。

border-bottom: double 2px blue;

Blueを16進数で記述することもできるので、#0000FFと書いても同じ結果になります。カラーコード表を見ながら好きな色を指定すると便利でしょう。

CSSで三角を作る方法 

CSSで三角をつくるとアイコンとして活用できて便利です。三角の作り方をご説明します。
この三角は、上が尖った「▲」と同じ形状です。四角は三角4つから成り立っていると考え、borderで下に位置する三角のみに色をつけます。左右は色をつけず、透明を表すtransparentを設定します。bottomに色をつける場合、反対に位置するtopには何も指定する必要がありません。これらを指定すると以下のようになります。

width: 0;
height: 0;
border-left: solid 20px transparent;
border-right: solid 20px transparent;
border-bottom: solid 20px #000000;