どうもチャーさんです。
あなたはliタグで作ったメニューに、
アイコンを表示させたいと思っていませんか？
この記事では、liタグのメニューに
アイコンを表示させる方法を書いています。
具体的には以下のようにメニューに、
アイコンを表示させる方法です。
なので、あなたがこの記事を読めば、
liタグのメニューの前に、好きにアイコンを、
表示させることができるようになるでしょう。
ということで、liタグのメニューの前に、
アイコンを表示させたい場合、
このままスクロールして読んでみてください。
＊ちなみに参考コード例を、
記事の一番最後に貼り付けておいたので、
そちらも参考にどうぞ。
スポンサードサーチ
liタグのメニューにアイコンを表示させる手順
はい、ということで結論からいきまして、
liタグで作ったメニューにアイコンを、
表示させるには以下をやりましょう。
１、list-style:noneで、
liタグで作ったメニューの前についてる、
黒丸を消す。
２、擬似要素で、liタグのメニューの前に
アイコンを表示させる。
この２つをやればokです。
ということで具体的に解説していきます。
まずliタグメニューの黒丸を消しましょう
まず、liタグでメニューの前についてる、
黒丸を消そうについてです。
liタグでメニューを作ると基本、
黒丸がついてます。
そしてそれはアイコンを表示させる時に、
邪魔なので消します。
消すにはlist-style:none;
というのをliタグに指定しましょう。
すると黒丸が消えます。
コード例
html
<ul>
<li>メニュー１</li>
<li>メニュー２</li>
</ul>
css
li {
list-style:none;
}
上記例を出しましたが、
記述してみてください。
liタグで作ったメニューの黒丸が、
消えます。
次に擬似要素でメニューの前にアイコンを表示しよう
で次に、黒丸を消したら、
２番目の擬似要素でアイコンを表示する、
について解説します。
擬似要素を使えば、
liタグで作ったメニューの前でも、
後ろでもアイコンを表示できます。
ということで早速実際にコードを書いて、
アイコンを表示させてみると、
はい、ちゃんと画像が表示されましたね。
で、これだけですと、
擬似要素使ったことない場合、
よくわからないと思いますので補足解説を入れます。
まず先ほどのお見せした画像を、
みていただきたいのですが、
画像で表示されてる中でいう、
li::before{
content:url(‘squirl.png’);
}
という部分が擬似要素です。
で、記述をみるとli::の後にbeforeと書いてますが、
beforeとかくと、メニューという文の前に、
afterとかくと、メニューという文の後にアイコンが表示されます。
で、更にアイコンで表示してる画像に関しては、
content:url(”);のカッコ内に入ってる部分がそれです。
上記の画像例の場合、
squirl.pngというのがそれで、これは僕の方で用意した
リスのアイコン画像につけたファイル名です。
なので、あなたが実際にアイコン画像を表示する場合は、
アイコン画像を用意して、content:url(”);の、
カッコ内に画像ファイル名を入力すれば、
好きなアイコンを表示できるわけです。
スポンサードサーチ
まとめ
はい、ということでまとめに入ります。
liタグで作ったメニューに、
アイコン画像を表示させるには、
以下をやりましょう。
１、list-style:none;で、
liタグで作ったメニューの黒丸を消す。
２、擬似要素でliタグのメニューの前に、
アイコン画像を表示させる。
上記をやれば、あなたのサイトで、
liタグで作ったメニューにアイコンを、
表示できるようになります。
また一応今回書いたコードの例を参考までに貼っておくので、
そちらをコピーして、画像ファイルの部分だけ記述を、
変えればすぐ今回記事で紹介したような物を再現できます。
ということで、以下に今回書いたコードを、
貼っておきます。
コード
<html>
<head>
<style>
li {
list-style:none;
display:inline-block;
}
li::before {
content:url(”);<!–ここの左のカッコ内に画像ファイル名を入力する–>
}
ul {
border-bottom:1px solid black;
}
</style>
</head>
<ul>
<li><a href=”#”>メニュー１</a></li>
<li><a href=”#”>メニュー２</a></li>
</ul>
<div>
<p>本文本文本文本文本文本文</p>
</div>
<body>
</body>
</html>
はい、ということでliタグのメニューの前に、
アイコンを表示させる方法でした。
アイコンを表示させると一気にあなたのサイトに、
楽しげさを醸し出すことが可能です。
ということで、ぜひ早速やってみて、
あなたのコーディングスキルをアップさせましょう。
それでは、読んでもらってありがとうございました。
チャーさん
