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;

三角の向きを変えれば矢印にもなる

前項で作成した三角は矢印としても使えます。右向きにして使うことが多いでしょう。ソースは以下のように記述しますが、三角の角度を変更するのではなく、色をつける部分を変更するところがポイントです。左にだけ色をつけるように記述しましょう。

width: 0; 
height: 10; 
margin: 20px;
border-bottom: 20px solid transparent;
border-top: 20px solid transparent; 
border-left: 20px solid #000000;

CSSで下線を付ける方法

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

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

簡単に下線を付ける （text-decoration）

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

text-decoration: underline;

線の太さや色まで指定して下線を付ける（border-bottom）

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

一重線（solid）を引く

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

border-bottom: solid;

二重線（double）を引く

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

border-bottom: double;

点線（dotted）を引く

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

border-bottom: dotted;

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