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

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

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

no image

cssでテーブルをレスポンシブの縦並びにする方法

どうも、チャーさんです。   あなたはcssでテーブルをレスポンシブにし、 かつ縦並びにしたい、と思っていませんか?   この記事では、テーブルを縦並びにする方法を、 紹介していま …

no image

cssの書き方これらのセレクタを知ってればほぼ困りません

どうも、チャーさんです。   あなたはcssの書き方でセレクタに ついて色々な書きかたがあってよくわかってない、 と感じていませんか?   この記事では様々なセレクタの指定方法を …

no image

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

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

no image

メニューに下線をだすcss(マウスでホバーした時に)

どうもチャーさんです。 あなたはメニューに下線をだすcssを 探していますか?   この記事では、メニューの上に マウスを持っていくと、メニューに下線が 表示される方法を書いています。 &n …

no image

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

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

no image

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

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

no image

cssで背景色をつける方法とコードの書き方

  どうも、チャーさん(@chaa___san)です。   あなたはcssで背景色をつけたいんだけど、 どうすればいいかわからない。   そう思っていませんか? &nbs …

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

  あなたはmax-widthとmin-widthの 違いについて疑問を持ってますか?   この記事では、max-widthとmin-width の違いを説明してるので、これを読め …

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

cssで画像を中央寄せできないを一瞬で解決する方法「コピペOK」

どうもチャーさん(@chaa___san)です。   あなたはcssで画像の中央寄せができないと、 悩んでいませんか?   この記事ではそんな悩みを解決し、 一発で画像を中央寄せで …

no image

cssで文章を省略する方法。コピペでok

どうもチャーさんです。   あなたはcssで文章を省略したいと、 思っていませんか?   この記事では、cssを使い、 文章を省略する方法を書いています。   &nbsp …

no image

cssを動画で学習したいならこの記事をどうぞ

どうも、チャーさんです。 あなたは、cssを始めたい、 で、わかりやすく動画で学習したい、   そう思っていませんか?   この記事では、cssを動画で学習できるよう、 僕がとった …

no image

cssスマホサイズ時のレイアウトはこれが良いですよ

どうも、チャーさんです。   あなたはcssを書いていて、 スマホサイズの時のレイアウトを、 どうしたらいいか悩んでいませんか?   この記事では、スマホサイズ時の 良いレイアウト …

no image

cssでドロップダウンメニューを作る方法

どうも、チャーさんです。   あなたはcssでドロップダウンメニューを 作りたいと思っていませんか?   この記事ではjavascriptなどを使わずに htmlとcssのみでドロ …

最新記事

チャーさん

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

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

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