Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

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

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

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

no image

cssの書き方cssはまとめて書いて楽をしましょう。

どうも、チャーさんです。   この記事ではcssの書き方の1つ まとめて書くについてお話ししてます。   なのであなたがこの記事を読めば、 今までより、「より早く、より効率的に、よ …

no image

cssの読み込み方法を3つ紹介「どれも簡単です」

どうも、チャーさん(@chaa___san)です。   あなたはcssの読み込み方法がわからず、 困っていますか?   この記事ではcssの読み込み方法を3つ紹介してます。 なので …

no image

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

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

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

ワードプレスでCSSを使い丸を表示する方法

どうもチャーさんです。 あなたはワードプレスで丸を表示したいと 思ったことはありませんか。   この記事では丸の作りかたを解説してるので ワードプレスなどで丸を表示したい人はどうぞ。 &nb …

no image

見出しに横線をつける方法「webページ制作に便利」

どうも、チャーさんです。   あなたは見出しの横に、横線を表示させたい。 そう思っていませんか?   この記事では、見出しに横線をつける方法を、 書いています。(以下のようなのがで …

no image

liタグのメニューにアイコンを表示させる方法(コード例つき)

どうもチャーさんです。   あなたはliタグで作ったメニューに、 アイコンを表示させたいと思っていませんか?   この記事では、liタグのメニューに アイコンを表示させる方法を書い …

no image

cssでテーブルの行間を広げる方法

どうも、チャーさんです。 あなたはcssでテーブルに行間をとりたい、 (セルとセルの間のスペースを広げたい)と思ってませんか?   この記事では、cssでテーブルの行間を 広げる方法を書いて …

no image

cssで背景画像を表示するコードと方法「コピペOK」

どうもチャーさん(@chaa___san)です。     あなたはcssで背景画像を表示したいですか?   この記事ではcssで背景画像を表示する方法、 コード、あなた自 …

no image

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

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

no image

max-widthとmin-widthの違いについてわかりやすく説明します

どうも、チャーさんです。 あなたはmax-widthとmin-widthの 違いについて疑問を持ってますか?   この記事では、max-widthとmin-width の違いを説明してるので …

no image

cssのレスポンシブの書き方「初心者向け記事」

どうも、チャーさんです。   あなたはcssのレスポンシブの書き方を、 知りたいと思っていませんか?   この記事では、cssのレスポンシブの書き方、 メディアクエリ、コードの具体 …

no image

cssの書き方class編(初学者向け)

どうも、チャーさんです。 この記事では、cssの書き方を書いています。   具体的にはclass、classを複数使う方法、 idについてとcss書き方についての内容なので、 この記事を読め …

no image

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

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

最新記事

チャーさん

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

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

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