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

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

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

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

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

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

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

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

no image

cssを最初の要素にのみ適用する方法

どうも、チャーさんです。   あなたはcssを最初の要素にのみ、 適用させたいがどうしたらいいか悩んでませんか?   この記事では、cssを最初の要素にのみ、 適用させれる方法を紹 …

no image

cssで画像をトリミングする方法。「記述1行で完了」

どうも、チャーさんです。   あなたはcssで画像をトリミングしたい。 そう思っていませんか?   photoshopでトリミングするのめんどい、 cssでできんかな?と思ってませ …

no image

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

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

no image

ブートストラップの使い方を初心者向けに紹介

どうも、チャーさんです。   あなたはブートストラップを使ってみたい、 または使わないといけないけど、 使い方がわからない。   導入の仕方も、何したらいいかもわからない。 そんな …

no image

cssの書き方コメントが知りたいならこの記事をどうぞ。

どうも、チャーさんです。   この記事ではcssの書き方の1つ、 コメントについて書いてます。   具体的には、 ・そもそもコメントとは? ・コメントを書く方法 ・実用的なコメント …

no image

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

  どうも、チャーさんです。   あなたはabsoluteとrelativeの違いがわからず、 困っていませんか?   またそのせいで、思ったように ページ制作に活用でき …

no image

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

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

no image

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

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

no image

wordpressのテーマのcssを編集する方法。3分でマスターできます。

どうも、チャーさんです。 あなたはwordpressのテーマのcssを編集したいですか?   この記事では、あなたの好きなように、 wordpressのcssを編集する方法を説明してます。 …

no image

cssで要素の位置調整をする方法を丁寧に解説コピペもok

どうも、チャーさん(@chaa___san)です。   あなたはcssで画像やdivで作った要素の位置調整を、 したいと思っていませんか?   この記事ではcssでそれらの要素の位 …

最新記事

チャーさん

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

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

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