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

htmlで改行をする方法(3秒で習得できます)

  どうも、チャーさんです。   あなたはhtmlを勉強していて、どうすれば 改行できるのか?と悩んでいませんか。   また色々タグを覚えて、プログラミングを上達させたい …

max-widthとmin-widthの違いについてわかりやすく説明します

  あなたはmax-widthとmin-widthの 違いについて疑問を持ってますか?   この記事では、max-widthとmin-width の違いを説明してるので、これを読め …

no image

コーダーの仕事内容をわかりやすく紹介します。

どうもチャーさんです。   あなたはコーダーの仕事内容って、 どんなだろう? と思っていませんか。   またコーダーって具体的にどんなことをやってるんだろう? と疑問に思っていませ …

no image

cssの書き方をまとめました「よく使う内容を網羅」

どうも、チャーさんです。 あなたはcssの書き方について、 網羅的に知りたいですか?   この記事ではcssの書き方について、 よく使われるものについてまとめてみました。   なの …

no image

レスポンシブでフォントサイズを可変にする方法「手間いらず」

どうもチャーさんです。   あなたはレスポンシブで、 フォントサイズを可変にする方法を 探していますか?   この記事では、フォントサイズをレスポンシブで 自動調整できる方法を書い …

no image

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

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

no image

メニューに下線をだすcss(マウスでホバーした時に)

どうもチャーさんです。 あなたはメニューに下線をだすcssを 探していますか?   この記事では、メニューの上に マウスを持っていくと、メニューに下線が 表示される方法を書いています。 &n …

no image

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

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

no image

cssで要素の位置調整をする方法を丁寧に解説コピペもok

どうも、チャーさん(@chaa___san)です。   あなたはcssで画像やdivで作った要素の位置調整を、 したいと思っていませんか?   この記事ではcssでそれらの要素の位 …

cssの効率的な学習方法を知りたいなら読んでください。

  あなたはcssの学習方法を模索していますか? どうしたらもっと効率よく早く学習し上達できるのか、 その方法を探していますか?   この記事では、cssの学習方法について お話し …

no image

字下げをcssでやる方法。1行だけ、複数行の字下げも対応

どうもチャーさんです。   あなたは字下げをcssでどうやればいいのか? と疑問に思ってませんか?   この記事では、cssを使い、 1行だけ字下げ、複数行を字下げする方法を、 書 …

no image

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

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

no image

cssでドロップダウンメニューを作る方法

どうも、チャーさんです。   あなたはcssでドロップダウンメニューを 作りたいと思っていませんか?   この記事ではjavascriptなどを使わずに htmlとcssのみでドロ …

no image

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

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

no image

z-indexが効かない時の簡単な解決策。1行あれを足せば解決ですよ

z index 効かない   どうも、チャーさんです。   あなたはz-indexが効かないと、 困っていませんか?   ページ制作をしてて、 z-indexを書いたのに …

最新記事

チャーさん

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

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

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