読者です 読者をやめる 読者になる 読者になる

ひとり部長のひとりごと

社会人1年目で社内起業を始めたひとり部長がその経験を語ります。Mac関連もつぶやきます。映画のレビューはサブブログに移行しました。世の中の明るいニュースだけをまとめたエントリーも始めました。

:before要素で文頭に画像を表示させ、好きにサイズ・文字位置を調節するためにやること

f:id:hitoribucho:20160926185945p:plain

今日は、
<p>タグの前にアイコンを置いて、リスト化したいということで始めたのですが、なかなか楽しかったのでメモ。

:before要素

使うのはこの要素です。

とりあえず、.testさんたちでbeforeを置いてみます。

テスト1

CSS
p.test1{
}
p.test1:before{
	content:"★";
}
html
<p class="test1">テスト</p>
結果

テスト

これは、[content]に星を指定しているからですね。ちなみにこのcontentはコピーすることができません。CSSで指定してあるために、SEOにも影響しません。

次に、この「★」を画像アイコン「f:id:hitoribucho:20160926173419p:plain」にしたいと思います。

なんだ、単純にcontentにurl指定で画像を指定するだけじゃないか。やってみましょう。

テスト2

CSS
p.test2{
}
p.test2:before{
	content:url(hoge.jpg);
}

hoge.jpgは好きな画像のアドレスを指定します。

html
<p class="test2">テスト</p>
結果

テスト

で、でけーーーー。そうなんです、このcontentに直接入れてしまった場合、画像のサイズが調整できません。なんとも使いにくい!画像のサイズを調整して、アップロード仕直していては時間も過ぎてしまいます。

テスト3

正しくはこうなります。

CSS
p.test3{
}
p.test3:before{
	content:"";
	display:inline-block;
	width:1em;
	height:1em;
	background:url(hoge.jpg) no-repeat;
	background-size:contain;
}
html
<p class="test3">テスト</p>
結果

テスト

おぉ、今度はちゃんとうまくいきましたね。ポイントは、contentを空にし、inline-block要素に変換し、その背景画像として指定しているところです。これならばblockの縦幅と横幅を指定して、それに合わせるようにcontainを書けば、ピッタリはまってくれます。長方形の画像でも大丈夫ですね。

でも、今度はアイコンが小さい!という時があると思います。もう少し大きいサイズで表示させたい!

2倍にしてみます。

テスト4

CSS
p.test4{
}
p.test4:before{
	content:"";
	display:inline-block;
	width:2em;
	height:2em;
	background:url(hoge.jpg) no-repeat;
	background-size:contain;
}
html
<p class="test4">テスト</p>
結果

テスト

あらあら、サイズが調節できるようになったのは良いのですが、アイコンが中央にきてくれないために、ダサくなってしまいました。

これを整えるには、position:absoluteを使い、line-heightを揃えてあげることが必要です。text-indentで文字をずらしてあげるのを忘れずに。

テスト5

CSS
p.test5{
	position:relative;
	line-height:2em;
	text-indent:2em;
}
p.test5:before{
	position:absolute;
	left:0;
	content:"";
	display:inline-block;
	width:2em;
	height:2em;
	background:url(hoge.jpg) no-repeat;
	background-size:contain;
}
html
<p class="test5">テスト</p>
結果

テスト

真ん中にきてくれましたね!よし、これで完成! ではありません。文字が長すぎて改行された場合に、ダサくなります。こうなります。

テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストこのように文字が長すぎるとアイコンの下に文字が回ってしまします。これはtext-indentのせいです(←ややこしいことするな)。したがって、padding-leftに置き換えます。

最終形態は、こちらです。見やすいようにアイコンと文頭の隙間も1文字分作りました。

結論

CSS
p.test{
	position:relative;
	line-height:2em;
	padding-left:3em;
}
p.test:before{
	position:absolute;
	left:0;
	content:"";
	display:inline-block;
	width:2em;
	height:2em;
	background:url(hoge.jpg) no-repeat;
	background-size:contain;
}
html
<p class="test">テスト</p>
結果

テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト

これで素晴らしい文頭アイコンの完成です。いやっほおおおおおおおおおおおおい

しかし、これ、誰が得するんだ?情報古すぎだろ・・・今更なにbefore要素ではしゃいでんだ。

いや、そうでもないらしいぞ、今更htmlを学ぼうって人もいると思うんだけどねえ。僕みたいに。

、ということで、この辺で。