マレーシアの日系IT企業で働く30代のウェブエンジニアの備忘録

テキストや文章、タイトルの先頭に画像を挿入する方法
2019.07.09 更新
よくタイトルやリストの先頭に画像を配置したいことがあります。
使い勝手も良いのでメモしておきます。
意外とbackground-imageで記述すると便利
リストの先頭(リストアイテム)を画像にしたり、メインのタイトルなどの先頭にアイコンを配置したり…。
使い勝手が良いのですが単純にimgで先頭に挿入するとレスポンシブに対応出来なかったりスタイルが崩れてしまいます。
そこでbackground-imageとして背景扱いにすると意外とハマります。
シンプルな記述で使いやすい
とてもシンプルなのでコードを見ればわかると思います。
<h1 class="title">先頭にアイコンをつけたいタイトルテキスト</h1>
.title { padding: 0 0 0 40px; background-image: url('icon.png'); background-repeat: no-repeat; background-position: 0 5px; background-size: 22px; }
paddingでアイコンとテキストの位置関係
background-positionでアイコンの位置
background-sizeでアイコンのサイズを変更できます。
リストなどに使うと個性的なリストを作ることも出来るので使い勝手がいいです。
マレーシアの日系IT企業で働く30代のウェブエンジニアの備忘録ブログです。
基本は過去わからなくて悩んだコーディングや諸々の設定方法などをメモ代わりに書き留めています。
ウェブコーディングやワードプレスの勉強中の方や同じ問題で悩んでいる方のお力になれたら嬉しいです。
よく読まれている記事