14
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

cssだけで矢印を書いてみたよ

Last updated at Posted at 2014-05-14

やりたかったこと

スマホサイトの制作にて。
リンクの右の方に出てくる、> 形の矢印、あるじゃないですか。

デザイナーさんから「そこは画像で切り出す」と言われたのですが、いやいや、css でできるじゃないか(やり方しらないけど)と思ってやり方探しました。

コード

ありました。
ほぼコピペでばっちり動いたので、ここにはコードを貼りません。
下記リンクを参照してください。

参考にしたのは、1-4. 矢印アイコン #1 です。

スマートフォンサイト制作時に覚えておきたいCSS 15

この記事すっごく役に立ちそうです。
ありがたい。

注意点

ほぼコピペ、でしたがちょっとだけ変えました。

最初は、

ul li a::after {
    /*省略*/
}

こういうコードだったので、コピペしたら想定していなかった所に > が出てきて大変なことに(笑)

実は、ページ内に、ul li a とマークアップした箇所がいくつかあったのです。

そこで、矢印をつけたいところだけ、クラスを指定しました。

.list_link li a::after {
    /*省略*/
}
<ul class="list_link">
    <li><a href="#">list 01</a></li>
</ul>

まとめ

矢印をつける方法として、アイコンフォントを使う手もあるようです。
こちらのページで紹介されているようなアイコンフォント、そのうち使ってみたいなと思いました。

気軽に使えるアイコンフォントまとめ

14
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?