css 画像

cssで見出しに画像を表示させる方法「簡単にできる」

投稿日:

Pocket

うも、チャーさんです。

あなたはcssで見出しに画像を表示させたい。

そう思っていませんか?

 

この記事では、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を使えば、細かく位置調整が可能で、

例えばちょっと斜め上に表示させるとかも

できます。

 

css 見出し 画像 位置

 

ちょっと左斜めに位置させてます。

 

 

という風に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制作でとても楽になります。

知らない場合は以下記事を参考してください。

 

absoluteとrelativeの違いがこれを読めば1目でわかりますよ。

 

スポンサードサーチ

まとめ

 

それではまとめに入ります。

 

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で見出しに画像を

表示させる方法でした。

 

 

それでは読んでもらってありがとうございました。

でわ。

 

チャーさん

-css, 画像


スポンサードサーチ

関連記事

no image

ブートストラップを使う利点をわかりやすく説明します。習得方法も紹介。

  どうもチャーさんです。   あなたはブートストラップを使う利点は、 何だろうと思っていませんか?   css使えばデザインなんてできる、 何でわざわざブートストラップ …

no image

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

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

no image

cssで背景色を背景画像の上に重ねる方法「コードつき」

どうも、チャーさんです。   cssで背景色を背景画像に重ねる方法が、 知りたい。そう思っていませんか?   この記事では、cssで背景色を 背景画像の上に重ねる方法を書いています …

no image

cssでボタンをレスポンシブ対応にする方法(微調整必要なしで楽ですよ)

どうも、チャーさんです。   あなたはcssでボタンをレスポンシブにしたい、 かつブレークポイントごとに微調整する手間ひまの、 必要のないボタンを作る方法はないかと思ってませんか? &nbs …

no image

cssスマホ時のフォントサイズはこのサイズが良さげ

  どうも、チャーさんです。   あなたはcssのスマホのフォントサイズを、 どれぐらいにすればいいか、 と疑問に思っていませんか?     この記事では、迷っ …

no image

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

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

no image

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

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

no image

z-indexが効かない場合の解決法(relativeつけたのに効かない場合)

   どうもチャーさんです。   あなたはz-indexが効かないと困っていませんか? ちゃんとrelativeもつけてるのに、 なぜ効かないんだと悩んでいませんか?   この記事 …

no image

cssで平行四辺形を作る方法「1行足せばできますよ」

どうも、チャーさんです。   あなたは、cssで平行四辺形に できないものかと思っていませんか?   この記事では、要素をcssで平行四辺形に する方法を書いています。 &nbsp …

no image

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

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

no image

cssで背景画像を回転させる方法。1行書けばok

どうも、チャーさんです。   あなたはcssで背景画像を回転させたい。 そう思っていませんか?   この記事ではcssを使って、 背景画像を回転させる方法を書いています。 &nbs …

no image

レスポンシブ対応の画像にする方法。1行コードを書くだけでOK

  どうも、チャーさんです。   あなたは画像をレスポンシブ対応にしたい、 そう思っていませんか?   ブレイクポイント毎に、画像の幅を指定するのは、 もう疲れた、何か一 …

no image

コーダーがphotoshopを使えた方がいいのかについて書きます。

どうも、チャーさんです。   あなたはコーダーはphotoshopを、 学んだ方がいいのか?   仕事獲得のためには、コーダーも、 photoshopを使えた方がいいのか? と疑問 …

no image

レスポンシブデザインを3秒で確認できる方法「各サイズ」

どうも、チャーさんです。   あなたは、レスポンシブデザインの確認方法を、 探していませんか?   この記事では、レスポンシブデザインを、 スマホサイズ、タブレットサイズ、pcサイ …

no image

cssで追随させる方法、スクロールしてもついてくるよ

  どうも、チャーさんです。   あなたは、cssでサイドバーなどを、 追随させる方法を知りたいと思っていませんか?     この記事では、スクロールしても、 …

最新記事

チャーさん

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

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

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