CSSで矢印、下線、三角を作る方法。画像を使わずにデザインしてみよう！

Webページを構築する際、テキストへの下線配置や矢印など、コンテンツをよりわかりやすくする工夫をしたくなるものです。CSSを使うと、簡単なコードを書くだけでテキストの装飾などが思いのままにできます。

今回紹介するCSSの書き方は、コンテンツの中でユーザーに注目してほしいところを示せる便利なものです。矢印や下線、三角の作り方など、この機会にチェックしてみてください。

CSSで矢印をつくる方法

まずは矢印を紹介します。色々な種類の矢印が画像を使わず、CSSだけで表現できるのです。画像のように画質を気にする必要もなく、後で調整が必要になったとしても、CSSの該当箇所を書き換えれば一括で調整できるので便利です。矢印のような記号をいろいろなパターンのCSSで作れるようになると表現の幅がぐっと広がります。

1）簡単な矢印をつくる

簡単な矢印をつくってみましょう。簡易に矢印を表現するデザインはいくつかありますが、ここでは線2本を使って山形をつくり、横向きにすることで簡単な矢印として使用するケースを想定します。

ここでイメージするのは、正方形です。正方形の上と右だけに黒色の一重線を引くために、border-topとborder-rightを指定します。線の長さはwidthとheightを使って設定します。矢印のデザイン上、widthとheightの数値は同じにしておきましょう。この時点では、「く」の字は表示されていますが、角が右上にきているため、矢印には見えません。そこで、transform: rotate(角度deg)という要素を指定した角度の分、傾けるようにします。45度右に傾けるとコンテンツでも馴染み深い矢印が完成します。

border-top: solid 2px #000000;
border-right: solid 2px #000000;
width: 10px;
height: 10px;
transform: rotate(45deg);

2）本格的な矢印をつくる

さて、次にもう少し本格的な矢印をつくってみましょう。ここでは、beforeやafterといった疑似要素を使います。擬似要素は名称だけを聞くと難しそうな印象ですが、実はとても便利な存在です。メリットは、HTMLに追記することなく、CSSだけに後から追加記述のみで済むところでしょう。検索エンジンからの影響もなく気軽に追記できます。beforeは要素の前、afterは要素の後に追加されます。

さて、以下の矢印の作り方は、四角と三角を組み合わせて矢印の形状を実現するものです。.arrowにおいて、四角を作成します。そして、擬似要素としてafterを設定し、右に先端を向けた三角を作成します。
三角の作り方は、前述した通りです。これらの指定により出来上がった四角形と三角形を位置調整し矢印を形成しています。

.arrow{
  position: relative;
  margin-top: 30px;
  width: 30px;
  border-top: 11px solid #000000;
  box-sizing: border-box;
}
.arrow::after{
  content: "";
  position: absolute;
  bottom: -9px;
  right: -14px;
  border-left: 14px solid #000000;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
}

3）やわらかい雰囲気があふれる角丸矢印をつくる

今度は、矢印の後ろ側が丸くなったやさしい雰囲気を表現してみましょう。先ほど作成した四角形の左側に角丸にします。角丸の作り方はborder-radiusを指定するだけなのでとても簡単です。

たとえば、以下のように記述すると、四角形の4つの角をすべて半径5pxの正円の丸さを適用します。

border-radius: 5px;

今回のように、左上と左下だけを丸くしたい場合は、以下のように丸くしたい位置を記述すると該当部分だけを変更できます。また、今回は5pxにしましたが、デザインにあわせてイメージにあうように角丸を調整するとよいでしょう。

 border-top-left-radius: 5px;
 border-bottom-left-radius: 5px;

設置位置は、四角を表示している.arrowの中です。CSSのソースをすべて表示すると以下になります。

.arrow{
  position: relative;
  margin-top: 30px;
  width: 30px;
  border-top: 11px solid #000000;
  box-sizing: border-box;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.arrow::after{
  content: "";
  position: absolute;
  bottom: -9px;
  right: -14px;
  border-left: 14px solid #000000;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
}

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は、わずかな記述の違いで様々な線の形状を実現できます。

太さを変更する

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

border-bottom: solid 1px;

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

色を変更する

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

border-bottom: double 2px blue;

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

CSSだけでデザインしてみよう

図形やアイコンの作り方には、今回紹介した以外にも様々な方法があります。形状はもちろん、色使いも含めると膨大なパターンが存在することは容易に想像できるでしょう。コンテンツにとって最適なデザインを制作できるようになるには制作経験の積み重ねが必要ですが、トライアンドエラーを繰り返し、思い通りのデザインを実現できるように取り組みましょう。

CSSのテクニックを知る

CSSでpositionを使い要素を並べる

今回のテーマはCSSの要素の並べ方です。static、relative、absolute、fixedを解説します。初心者のうちは、なかなか難しい位置決めですが、少しでもわかりやすく説明したいと思います。

CSSの余白調整、余白指定法

CSSの勉強をスタートすると序盤に登場するのがmarginやpaddingといった余白の指定方法です。CSSの中では初歩的な部分とはいえ、勉強をはじめてまもない頃では混乱しやすい部分の一つとも言えるのではないでしょうか。しかし、余白を自由にコントロールできることで得られるメリットはとても大きいので、苦手を乗り越え、ぜひマスターしておきたいところです。そこで、今回はCSSの余白調整にスポットをあててご説明します。