Web制作

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

2016.06.01

2017.05.16

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

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に関する様々な知識を身に付け、理論的な問題解決を常に目指す頭脳派クリエイター。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。