読者です 読者をやめる 読者になる 読者になる

僕の世界観を変えてみる

比較的簡単なHTMLでWebサイトを作ってみるのでその過程を綴っていいたいと思っています。

list-style-image リスト記号をアイコンにしてみた!

f:id:htmllifehack:20150819201950j:plain

 

はい!タイトル通り今回はリスト記号をアイコンにしてみたので書いていきたいと思います。なんでそんなことしたのかというと、本に載っていたというのもあるんですけど、いろいろWebサイトを見ていたらちょっとしたアイコンがついていたりするんですよ。その感じがかわいいというかおしゃれというか。

例えば上にメニューバーのようなものがあったら、ホームの左側に家のアイコンがあったり、アクセスだったら車とか、問い合わせだったらメールのアイコンだったり。

僕もこういうのが作りたい!と思ったのでやってみました。

まあ今回はおふざけですけどね笑

  

■list-style-image

<nav class="globalnavi">
<ul>
<li><a href="sample.html">トップ</a></li>
<li><a href="kaitori.html">買取店の利益の出し方</a></li>
<li><a href="point.html">騙されないようにするポイント</a></li>
<li><a href="souba.html">相場ってなに?</a></li>
</ul>
</nav>

これがグローバルナビのhtmlです。articleとsectionとasideの他にnavというセクションタグもあります。これ前話したか覚えていませんが、あります。

でnavで囲みgolobainaviというクラス名をつけました。

次にcssです。

globalnavi ul li{

list-style-type:none;
background-image:url("../image/icon/icon5.jpg");
background-repeat:no-repeat;
}

まずlist-style-type:none;でリストの・を消します。

次にbackground-imageで画像をしていします。前回の記事と同様です。

ちなみに、今回はchrome風のアイコンを用意しました笑

f:id:htmllifehack:20150820222208j:plain←これです笑

これはフリーアイコンを配布しているところからダウンロードさせていただきました。

 

flat-icon-design.com

 

ありがとうございます。

では続きです。

この2つだけですと、画像がばーっと横に羅列されてしまいます。

こんなんになっちゃうんです。

f:id:htmllifehack:20150820222703j:plain

 

なので最後に書いたこれbackground-repeat:no-repeat;が必要なんです。

no-repeat そのままですね。リピートしないという命令です。

 

f:id:htmllifehack:20150820223026j:plain

 

そうするとアイコンが一つだけ表示されるようになりました。でも文字とかぶってしまってどうしようもありませんね。

なんでいつも通りのpaddingを使います。

適当にpaddingの数値を入れて完成です。

今回は文字の左側に余白を設けたいのでpadding-left:25pxと入れました。

f:id:htmllifehack:20150820223434j:plain

これでやっと完成です。

 

ただですね、やっとここまで作ったわけですけど、なんと次のページ見たらこのグローバルナビのデザインを変えるみたいです笑

これを横並びにしてメニューバーみたいにするようですね。

chrome風アイコンを付けたままメニューバーのようにできるのかどうかそこが問題ですね。もしかしたら消す可能性もあります。

まあいいか、やり方はわかったし。

現時点で187ページをやっていて、半分より少し進んだところです。

まだまだありますがお盆休みも終わったので少しずつやっていこうと思います。