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

cssの書き方で大なりと書くとどうなるか知りたいならこの記事。

どうも、チャーさんです。   あなたはcssの書き方で大なり (例 .class > p )のように書くと、 どう動くのか疑問に思ってませんか?   この記事では、大なりで書 …

no image

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

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

no image

cssでメニューに区切り線を表示させる方法

どうもチャーさんです。   あなたは、cssでメニューに区切り線を、 表示させたいと思っていませんか?     この記事では、以下の画像のような、 区切り線を表示させる方 …

no image

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

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

no image

cssのborderを初学者でもわかりやすいよう説明します

どうも、チャーさん(@chaa___san)です。   あなたはcssのborderとは何か? と疑問に思っていませんか?   この記事ではcssのborderについて、 初学者で …

no image

htmlのリンクの下線を消す方法「1行書けば消せますよ」

どうも、チャーさんです。   あなたはhtmlのリンクの下線を消す方法を、 探していませんか?   この記事では、リンクの下線を消す方法を 書いています。   &nbsp …

no image

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

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

no image

cssでボタンにhoverした時に色を変える方法

どうもチャーさんです。   あなたは、cssでボタンにhoverして、 色を変える方法を探していますか?   この記事では、ボタンホバーで、 ボタンの色を変える方法について、 お話 …

no image

プログラミングのdivをわかりやすく説明します。divにcssを適用する方法も

  どうも、チャーさん(@chaa___san) です。   あなたはdivとはなんだ? と思っていませんか。   この記事ではdivとは何か、 そしてどういう風に使えば …

no image

htmlでリンクを画像につける方法「速攻でできます」

どうも、チャーさんです。   あなたは、htmlでリンクを画像につける方法を、 探していますか?   この記事では、画像にリンクをつける方法を 話しています。   &nb …

no image

cssでレスポンシブ対応にするための方法、具体的な手順を解説します

どうも、チャーさんです。   あなたはcssでレスポンシブにするには、 何を書けばいいのか?と思っていませんか?   この記事では、cssでレスポンシブにするための、 方法や、記述 …

no image

positionで縦に中央寄せする方法はこちらです。

どうも、チャーさんです。   あなたはpositionで縦に中央寄せをしたいのに、 できずに困っていませんか?     この記事ではpositionで要素を縦に、 中央寄 …

no image

cssで文字を回転させる方法「10秒以内にできます」

どうも、チャーさんです。 あなたはcssで文字を回転させたい、 そう思っていませんか?   この記事では、cssで文字を 回転させる方法を書いています。   なので、あなたがこの記 …

no image

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

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

no image

cssで背景色をつける方法とコードの書き方

  どうも、チャーさん(@chaa___san)です。   あなたはcssで背景色をつけたいんだけど、 どうすればいいかわからない。   そう思っていませんか? &nbs …

最新記事

チャーさん

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

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

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