どうも、チャーさんです。
あなたはcssで見出しに画像を表示させたい。
そう思っていませんか？
この記事では、cssで見出しに画像を
表示させる方法を書いてます。
なのであなたがこの記事を読めば、
すぐに見出しに画像を表示できるでしょう。
ということで、見出しに画像を表示したいなら、
このまま下にスクロールをして読んでみてください。
スポンサードサーチ
目次
cssで見出しに画像をつけるには
はいそれでは結論からです。
見出しに画像をつける方法ですが、
それには、擬似要素を使いましょう。(コード例はすぐ紹介します)
そうすると見出しに画像を表示
させることができます。
はい、こんな風に見出しにリスの画像が
ついてますね（かわいい、、）
見出しに画像をつけたコード例
で、この画像のようになってるコードですが、
以下です。
簡単です。
html
<body>
<h1>これが見出し</h1>
</body>
css
h1 {
border-bottom:1px solid black;
}
h1::before {
content:url(‘squirl.png’);
}
(urlの後ろの()には表示させたい画像の
ファイル名を書きましょう。)
上記のコードだけで、
画像を見出しに表示させることができます。
コードの補足説明
で、少しコードの説明をします。
擬似要素beforeを使ったことで、
h1タグの始まりに画像が挿入されてます。
わかりやすく可視化すると、
<h1>画像 ここに見出しのテキスト</h1>
という感じにブラウザに解釈されてます。
そのため、見出しの前に画像が合わせて表示
されてる感じです。
擬似要素は使ってみて慣れていかないと、
わかりにくいのですが、入れ子に近いような
挙動をするので、
そういう風に動くと思ってもらったらいいかなと
思います。
ちなみに今回はh1タグに直接、
beforeを書いてh1タグに擬似要素つけてますが、
h1タグにクラスをつけて、
.クラス名::before {
}
みたいな感じにしても、
同じように見出しに画像を表示可能です。
で、とりあえず話戻して上記のようにコード書けば、
見出しに画像を表示できます。
スポンサードサーチ
cssで見出しの画像の表示位置をコントロールするには
で、ちなみに見出しにつける画像の位置ですが、
結構簡単に変更できます。
その方法をここからは説明します。
見出しの先頭に画像を表示する場合
先頭に表示させたければ、
紹介したコードのようにbeforeを使いましょう。
例えば、h1::before {
content:url(‘画像ファイル名’);
}
のように書けばokです。
見出しの後ろに画像を表示したい場合
見出しのテキストの後ろに表示したければ、
afterを使いましょう。
コード例
h1::after {
content:url(‘画像ファイル名をここに’);
}
(画像ファイル名はパスをちゃんと書かないと表示されないので注意。
imageフォルダとかに画像を入れてる場合は、
(image/画像ファイル名);
などと書くのを忘れずに。)
afterを使えば、
画像は後ろに表示されます。
このようにbeforeとafterを使い分けると、
見出しの先頭や後ろに画像表示させれます。
見出しの画像の位置を細かく調整したい場合
で、細かくもっと位置調整をしたい、
という場合は、positionを使いましょう。
positionを使えば、細かく位置調整が可能で、
例えばちょっと斜め上に表示させるとかも
できます。
ちょっと左斜めに位置させてます。
という風にpositionを使えば、
細かく画像の位置調整が可能です。
ちなみにabsoluteをつけると、
テキストは左によるので、
padding-leftで寄せて隙間を作りましょう。
で、ちなみにpositionで位置調整をする場合、
position:relativeを擬似要素をつけるタグかクラスに
つけましょう。
例としては、
css
h1 {
border-bottom:1px solid black;
position:relative;
}
h1::before {
content:url(squirl.png);
position:absolute;
top:-20px;
left:0
}
上記のような感じです。
擬似要素をつけるセレクタに対して、
position:relativeをつけて、
画像を表示させる擬似要素の方に、
position:absoluteをつけましょう。
こうする理由は、
position:relativeをつけることで、
擬似要素の画像を見出しタグを起点に動かせるからです。
逆にposition:relativeをつけとかないと、
今回の場合bodyタグを起点にして動くので、
位置調整が面倒になります。
上記の内容が何言ってるかわからない場合は、
position:relativeとabsoluteの起点について、
知りましょう。
上記を知ればweb制作でとても楽になります。
知らない場合は以下記事を参考してください。
スポンサードサーチ
まとめ
それではまとめに入ります。
cssで見出しに画像をつけたい場合、
擬似要素を使って画像を表示させましょう。
簡単に画像の位置を先頭にしたい場合は、
beforeを使い、後ろにしたい場合はafterを
使いましょう。
細かく位置調整したい場合は、positionを
使いましょう。
ということで、見出しに画像を表示させる
方法がわかったと思います。
なので早速あなた自身でも実践してみましょう。
やるとあなたのweb制作スキルがアップしますよ。
で、手順ですが、まずは、
見出しに表示させるようの小さい画像を
手に入れましょう。
そして次に、この記事で紹介したように、
コードを書いてみましょう。
紹介したコードを見るのに、
上に戻るのはめんどいと思うので、
同じコードですが、参考として貼っときます。
練習用参考コード
html
<body>
<h1>これが見出し</h1>
</body>
css
h1 {
border-bottom:1px solid black;
}
h1::before {
content:url(squirl.png);
}
上記のコードをそのままに、
contentの画像ファイル名のとこだけいじれば、
すぐにあなたのパソコン上で再現できるでしょう。
はい、ということで、cssで見出しに画像を
表示させる方法でした。
それでは読んでもらってありがとうございました。
でわ。
チャーさん
