僕の世界観を変えてみるスマートフォン用の表示で見る僕の世界観を変えてみる文系男子が趣味でプログラミングを勉強していくブログです。他にも日常で起きたどうでもいいことや愚痴を書いていきたいです。座右の銘は和を以て貴しとなすです。リスト記号をアイコンにしてみた!webシェアするTwitterGooglePocketLineはい!タイトル通り今回はリスト記号をアイコンにしてみたので書いていきたいと思います。なんでそんなことしたのかというと、本に載っていたというのもあるんですけど、いろいろWebサイトを見ていたらちょっとしたアイコンがついていたりするんですよ。その感じがかわいいというかおしゃれというか。上にメニューバーのようなものがあったら、ホームの左側に家のアイコンがあったり、アクセスだったら車とか、問い合わせだったらメールのアイコンだったり。僕もこういうのが作りたい!と思ったのでやってみました。href="souba.html">相場ってなに?</a></li></ul></nav>これがグローバルナビのhtmlです。articleとsectionとasideの他にnavというセクションタグもあります。これ前話したか覚えていませんが、あります。navで囲みgolobainaviというクラス名をつけました。li{list-style-type:none;background-image:url("../image/icon/icon5.jpg");background-repeat:no-repeat;}まずlist-style-type:none;でリストの・を消します。次にbackground-imageで画像をしていします。前回の記事と同様です。←これです笑これはフリーアイコンを配布しているところからダウンロードさせていただきました。flat-icon-design.comありがとうございます。この2つだけですと、画像がばーっと横に羅列されてしまいます。こんなんになっちゃうんです。最後に書いたこれbackground-repeat:no-repeat;が必要なんです。リピートしないという命令です。するとアイコンが一つだけ表示されるようになりました。文字とかぶってしまってどうしようもありませんね。なんでいつも通りのpaddingを使います。適当にpaddingの数値を入れて完成です。今回は文字の左側に余白を設けたいのでpadding-left:25pxと入れました。これでやっと完成です。ここまで作ったわけですけど、なんと次のページ見たらこのグローバルナビのデザインを変えるみたいです笑これを横並びにしてメニューバーみたいにするようですね。chrome風アイコンを付けたままメニューバーのようにできるのかどうかそこが問題ですね。したら消す可能性もあります。いいか、やり方はわかったし。現時点で187ページをやっていて、半分より少し進んだところです。ありますがお盆休みも終わったので少しずつやっていこうと思います。リスト記号をアイコンにしてみた!関連記事2017-12-13【Amazonサイバーマンデーセール】今回購入したものはこちらやってきましたサイバーマンデーセール!!!!12月8日~12月11...2017-02-23windowsのログインパスワードを解析&リセットする方法ログインパスワードがわからなくなってしまった。ヶ月)工場→カフェバイト→質屋の店長→現在SEもどき。2019年10月にバセドウ病と診断される。僕の世界観を変えてみるスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。