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;
}