2016.06.01

2017.05.16

ホームページ制作関連

cssのみでリンクアイコンを作成する3つの方法

星のように重なる三角定規

Webサイトの表現でリンク箇所を明示するためによく使われる表現としてひらがなの「く」を左右反転したようなアイコンがよく使用されます。

これをCSSのみで再現する方法を3つ紹介します。

テキストの「>」を用いて表現する

See the Pen link01 by tetsuro (@tetsuro) on CodePen.

もっとも簡単な方法であるが、OSやブラウザに設定されているフォントによって形が変わってしまう場合があり、デザイナーの意図と異なる表現になることも多いのであまり使用しませんが、簡易的に使用する場合があります。

正方形を45度回転させ、2辺のボーダーを用いて表現する

See the Pen link02 by tetsuro (@tetsuro) on CodePen.

辺の長さや太さなどを任意に設定できるため表現の幅も広く、使用頻度は最も多いです。

欠点としてはボーダーを利用しているため、角丸などの表現ができないことや、正方形の辺を利用しているため2辺の角度が90度にしか設定できないことなどが挙げられます。

2つの長方形を回転させ表現する

See the Pen link03 by tetsuro (@tetsuro) on CodePen.

1番細かな設定をすることが可能です。2つ目で挙げた欠点である角丸や角度の調整なども可能です。

欠点としては細かな設定ができる分cssが長くなってしまうことがあります。

Webサイトでリンクの表現は多様されるのでその都度最適な方法を選択して使用してみてください。

SHARE

この記事の筆者

Webクリエイター 古川 徹朗

Webクリエイター 古川 徹朗

Webに関する様々な知識を身に付け、理論的な問題解決を常に目指す頭脳派クリエイター。

WEBSITE DESIGN REQUEST

ホームページ制作・リニューアルの
ご相談はお気軽に

TEL 06-6537-9941 平日 9:00〜19:00

〒550-0012 大阪府大阪市西区立売堀2-5−41

ホームページ制作を相談する