こんにちは。
拘り始めるときりがない。
只野です。
ブログ見ているとよく「 画像 テキスト 」みたいな形で見出しがあったりするサイトありますよね。そこで私は思うわけだ
私も欲しいと！！
なんかあれだけでブログが華やかに見えますよね！やっぱり目で見た情報が一番最初に来ますからね。見た目は大事ってことですね。一説によると人は第一印象で90%はそれが好きかどうかが決まるとも言われています。本当かどうかはわかりませんがね（笑）
ですが見た目を気にして損する事もないでしょうから本日は「 画像 テキスト」の見出しを作成していきたいと思います。
先頭に画像付きの見出しを作る
まずは文章の先頭に“画像”を表示する方法でしょう。毎回画像を手動で設定するようでは作業効率的に考えて不便です。
そんな時のために“CSS”では“疑似クラス”と言う方法があります。簡単に言うと特定パターンの時はそれ用のスタイル適用してあげるよです。
今回行いたい特定パターンと言うのは“見出しの先頭に必ず指定の画像を表示させる”になります。
条件としては“先頭”ですね。先ほど言いました“CSS”で“疑似クラス”を使用した場合は“before”と言う命令が先頭に指定のスタイルを適用するになります。
使い方としては下記のようにまずスタイルを適用させるclassなどを作成します。
h2.class-1
{
color:red;
}
上記クラスを<h2 class=”class-1″ >のように普通に適用させるとこうなります。
先頭に画像付きの見出しが欲しいよ！！
このスタイルの“先頭”に必ず何かを表示させたい！そんな時は下記のように“疑似クラス”を使用します。
h2.class-1
{
color:red;
}
h2.class-1:before
{
content: '先頭に●';
}
これで上記と同じやり方でclassを指定すると下記のようになります。
先頭に画像付きの見出しが欲しいよ！！
「先頭に●」と疑似クラスで指定した文章が表示されるようになりました。このやり方を応用すれば“先頭に必ず画像付きの見出し”が作れるという事です。
そして作ってみました。
それっぽくなったんではないでしょうか？
はい。
目的とするデザインができました！デザインセンスは置いて置きましょう←
上記の“CSS”は説明したやり方を流用して作成しています。記載内容は下記になります。
h2.icon-t
{
width:100%;
border-bottom: solid 2px #87CEFA;
border-left: solid 10px #87CEFA;
}
h2.icon-t:before {
content: '';
display: inline-block;
width: 50px;
height: 50px;
background-image: url(表示したい画像のURL 例：../../test.png);
background-size: contain;
vertical-align: middle;
background-repeat: no-repeat;
margin-right: 0.5em;
}
まずは「icon-t」のクラスで全体デザインをどうするかを決めています。今回はサイズとボーダーの指定をしています。
そして「h2.icon-t:before」の疑似クラスで画像の表示に関する指定を行っています。
「content: ”;」が空白なのは調べたところここで画像指定をするとサイズの変更が行えないからです。
画像サイズを指定の大きさにしたい場合は背景として設定を行い、疑似クラス全体のサイズを指定する方法でできました。
あと気を付けなくてはならないのが画像を背景として設定しているためデフォルト設定ですと“繰り返し”で画像が表示されてしまいます。
このようにサイズが余っていたら同じ画像を余っている箇所に表示してしまう状態です。この状態にさせないように「background-repeat: no-repeat;」の指定を行っています。
はい。
後はおさらいという事で今回使用したプロパティの意味を記載します。
| プロパティ | 意味 |
|---|---|
| width | 要素の横幅を設定する |
| height | 要素の縦幅を設定する |
| border-bottom | 要素の下線を設定する |
| border-left | 要素の横線を設定する |
| content | 指定の要素を挿入する |
| display | 要素の表示形式を設定する |
| background-image | 背景画像を設定する |
| background-size | 背景の表示サイズを指定する |
| background-repeat | 背景の表示方法を指定する |
| vertical-align | 要素の縦表示位置を設定する |
| margin-right | 要素の右側にスペースを設定する |
これで私が欲しいなと思うスタイルができました。使用用途としては「ゲーム」系の記事を各時に各「ゲーム」のアイコンに合わせて使用すればそれっぽい記事が書けそうです。
本日はこの辺で