Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

css HTML 画像

liタグのメニューにアイコンを表示させる方法(コード例つき)

投稿日:

Pocket

うもチャーさんです。

 

あなたはliタグで作ったメニューに、

アイコンを表示させたいと思っていませんか?

 

この記事では、liタグのメニューに

アイコンを表示させる方法を書いています。

 

 

具体的には以下のようにメニューに、

アイコンを表示させる方法です。

 

liタグ アイコン

 

なので、あなたがこの記事を読めば、

liタグのメニューの前に、好きにアイコンを、

表示させることができるようになるでしょう。

 

 

ということで、liタグのメニューの前に、

アイコンを表示させたい場合、

このままスクロールして読んでみてください。

 

*ちなみに参考コード例を、

記事の一番最後に貼り付けておいたので、

そちらも参考にどうぞ。

 

スポンサードサーチ

liタグのメニューにアイコンを表示させる手順

 

はい、ということで結論からいきまして、

liタグで作ったメニューにアイコンを、

表示させるには以下をやりましょう。

 

 

1、list-style:noneで、

liタグで作ったメニューの前についてる、

黒丸を消す。

 

2、擬似要素で、liタグのメニューの前に

アイコンを表示させる。

 

この2つをやればokです。

 

 

ということで具体的に解説していきます。

 

まずliタグメニューの黒丸を消しましょう

 

まず、liタグでメニューの前についてる、

黒丸を消そうについてです。

 

liタグでメニューを作ると基本、

黒丸がついてます。

 

そしてそれはアイコンを表示させる時に、

邪魔なので消します。

 

 

消すにはlist-style:none;

というのをliタグに指定しましょう。

 

すると黒丸が消えます。

 

 

コード例

html

<ul>

 <li>メニュー1</li>

 <li>メニュー2</li>

</ul>

 

css

li {

list-style:none;

}

 

上記例を出しましたが、

記述してみてください。

 

liタグで作ったメニューの黒丸が、

消えます。

 

次に擬似要素でメニューの前にアイコンを表示しよう

 

で次に、黒丸を消したら、

2番目の擬似要素でアイコンを表示する、

について解説します。

 

擬似要素を使えば、

liタグで作ったメニューの前でも、

後ろでもアイコンを表示できます。

 

 

ということで早速実際にコードを書いて、

アイコンを表示させてみると、

 

liタグ メニュー

 

はい、ちゃんと画像が表示されましたね。

 

 

で、これだけですと、

擬似要素使ったことない場合、

よくわからないと思いますので補足解説を入れます。

 

 

まず先ほどのお見せした画像を、

みていただきたいのですが、

画像で表示されてる中でいう、

 

liタグ メニュー

li::before{

content:url(‘squirl.png’);

}

 

という部分が擬似要素です。

 

 

で、記述をみるとli::の後にbeforeと書いてますが、

beforeとかくと、メニューという文の前に、

afterとかくと、メニューという文の後にアイコンが表示されます。

 

で、更にアイコンで表示してる画像に関しては、

content:url(”);のカッコ内に入ってる部分がそれです。

 

 

上記の画像例の場合、

squirl.pngというのがそれで、これは僕の方で用意した

リスのアイコン画像につけたファイル名です。

 

なので、あなたが実際にアイコン画像を表示する場合は、

アイコン画像を用意して、content:url(”);の、

カッコ内に画像ファイル名を入力すれば、

 

好きなアイコンを表示できるわけです。

 

 

スポンサードサーチ

まとめ

 

はい、ということでまとめに入ります。

 

liタグで作ったメニューに、

アイコン画像を表示させるには、

以下をやりましょう。

 

 

1、list-style:none;で、

liタグで作ったメニューの黒丸を消す。

 

2、擬似要素で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=”#”>メニュー1</a></li>
 <li><a href=”#”>メニュー2</a></li>
</ul>
<div>
 <p>本文本文本文本文本文本文</p>
</div>
<body>

</body>
</html>

 

はい、ということでliタグのメニューの前に、

アイコンを表示させる方法でした。

 

 

アイコンを表示させると一気にあなたのサイトに、

楽しげさを醸し出すことが可能です。

 

ということで、ぜひ早速やってみて、

あなたのコーディングスキルをアップさせましょう。

 

 

それでは、読んでもらってありがとうございました。

 

チャーさん

-css, HTML, 画像

スポンサードサーチ

関連記事

no image

コーダーがphotoshopを使えた方がいいのかについて書きます。

どうも、チャーさんです。   あなたはコーダーはphotoshopを、 学んだ方がいいのか?   仕事獲得のためには、コーダーも、 photoshopを使えた方がいいのか? と疑問 …

no image

cssで中央寄せ(縦に)したい場合にどうぞ

  どうも、チャーさんです。   あなたは縦に中央寄せできるcssを、 探していませんか?   この記事ではお手軽に縦の中央寄せができる、 cssを紹介しています。 &n …

no image

cssのレスポンシブの書き方「初心者向け記事」

どうも、チャーさんです。   あなたはcssのレスポンシブの書き方を、 知りたいと思っていませんか?   この記事では、cssのレスポンシブの書き方、 メディアクエリ、コードの具体 …

no image

cssでテーブルの行間を広げる方法

どうも、チャーさんです。 あなたはcssでテーブルに行間をとりたい、 (セルとセルの間のスペースを広げたい)と思ってませんか?   この記事では、cssでテーブルの行間を 広げる方法を書いて …

no image

cssの書き方class編(初学者向け)

どうも、チャーさんです。 この記事では、cssの書き方を書いています。   具体的にはclass、classを複数使う方法、 idについてとcss書き方についての内容なので、 この記事を読め …

no image

absoluteとrelativeの違いがこれを読めば1目でわかりますよ。

  どうも、チャーさんです。   あなたはabsoluteとrelativeの違いがわからず、 困っていませんか?   またそのせいで、思ったように ページ制作に活用でき …

no image

cssで画像をトリミングする方法。「記述1行で完了」

どうも、チャーさんです。   あなたはcssで画像をトリミングしたい。 そう思っていませんか?   photoshopでトリミングするのめんどい、 cssでできんかな?と思ってませ …

no image

cssで三角形を作る方法、コピペで一発でできますよ。

どうも、チャーさんです。   あなたはcssで三角を作る方法を、 探していますか?   この記事ではcssで三角を作る方法を、 書いています。     そしてこ …

no image

cssで見出しに画像を表示させる方法「簡単にできる」

どうも、チャーさんです。 あなたはcssで見出しに画像を表示させたい。 そう思っていませんか?   この記事では、cssで見出しに画像を 表示させる方法を書いてます。   なのであ …

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

liタグを横並びにする方法。この方法なら15秒でできますよ。

どうも、チャーさんです。   あなたがliタグを横並びにしたい、 そう思っていませんか?     この記事では、liタグを横並びにする方法を、 書いています。 &nbsp …

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

インライン要素にmarginの上下が効かない時の解決方法「簡単です」

  どうもチャーさんです。   あなたはインライン要素にmarginの上下を、 効かせたいのに効かなくて困ってませんか?   この記事では、そんな状態の解決方法を、 書い …

no image

cssの読み込み方法を3つ紹介「どれも簡単です」

どうも、チャーさん(@chaa___san)です。   あなたはcssの読み込み方法がわからず、 困っていますか?   この記事ではcssの読み込み方法を3つ紹介してます。 なので …

no image

見出しに横線をつける方法「webページ制作に便利」

どうも、チャーさんです。   あなたは見出しの横に、横線を表示させたい。 そう思っていませんか?   この記事では、見出しに横線をつける方法を、 書いています。(以下のようなのがで …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。