こんにちは。開発部 山田です。
関東では雪が降るなど、冬も本格的に到来を感じております。
ECサイトでは読み込み速度がお店の売上に直結することもあり、Webサイトのパフォーマンスチューニングの改善は日々取り組まなければなりません。そんな中で、やはり画像の読み込みは何かとネックになってくるなと感じて止まない今日このごろです。。
今日はそんなモヤモヤを解消する手がかりというか小休止になればと思い、今更ながらCSSの疑似要素を取り挙げてみます！！
疑似要素って何？？
疑似要素とは、CSSの参考書等を買うと後半の方によくでてくる
- :before{}
- :after{}
みたいな記述のことですね。
CSSリファレンスではこれを
:before擬似要素 …… 要素の直前に内容を挿入する
:after擬似要素 …… 要素の直後に内容を挿入する
のように定義しています。
(参考)
CSSリファレンス「:before擬似要素」
CSSリファレンス「:after擬似要素」
実際どんな風に使うのかというと、
<p class="sample_text">今日は良い天気ですね！</p>
.sample_text:before {
content:"『";
}
.sample_text:after {
content:"『";
}
実際の出力はこうなります。
今日は良い天気ですね！
はい、クラスを付けた要素の前後に装飾が可能になります。
上記は「content」プロパティを用いた方法で、クラスを付けた要素の前後に指定した内容（文字列や画像、URLなど）を追加することができます。
(参考)
CSSリファレンス「content …… 内容（コンテンツ）を挿入する」
疑似要素を使った図形の描画
さてここからが本題です！
疑似要素では、クラスを付けた要素の前後に図形を追加することも可能です。
図形の表記は位置の指定と背景色の変更を駆使して実施します。
たとえば、、
I<span class="heart"></span>CAT
.heart {
background-color: red;
display: inline-block;
height: 30px;
margin: 0 10px;
position: relative;
top: 0;
transform: rotate(-45deg);
width: 30px;
}
実際の出力はこうなります。
ICAT
はい、縦30px, 横30px で背景が赤色の四角を書き、左回転に45度回したというCSSです。marginは隣の文字との行間です。
ここに before, after を加えることで更に2つの図形を重ねられます。
追加したCSSはこちら↓
.heart:before,
.heart:after {
content: "";
background-color: red;
border-radius: 50%;
height: 30px;
position: absolute;
width: 30px;
}
.heart:before {
top: -15px;
left: 0;
}
.heart:after {
left: 15px;
top: 0;
}
実際の出力はこうなります。
ICAT
（サイズがおかしいが気にしない。。。）
boforeもafterも共通で縦横30pxの四角を書いて、その後border-radiusで角を面取りしています。
さらのその後 beforeは上にマイナス15px、afterは左に15pxと移動させています。
afterに-15pxを指定しないで良いのは、before要素に指定した位置を引き継いでるんですね。
図で表すとこんな感じです。
疑似要素を使ったさまざまな表現
ここまでの話を整理してCSSの例を幾つか紹介します。
使っているスタイルが全て上記の説明に含まれていますので、気になった方は読み直してみてください！！
ここからは「文字」に対して装飾を付加していきます。
1 文字の前に四角が転がっている表現
<p id="webcri">モバイルファースト</p>
p#webcri {
position: relative;
padding-left: 25px;
border-bottom: 3px solid #0bd;
color: #666;
font-size: 23px;
line-height: 32px;
}
p#webcri:before {
position: absolute;
top: -8px;
left: 7px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
height: 12px;
width: 12px;
background: #8BE0FE;
content: "";
}
p#webcri:after {
position: absolute;
top: 8px;
left: 2px;
transform: rotate(15deg);
-webkit-transform: rotate(15deg);
height: 8px;
width: 8px;
background: #8BE0FE;
content: "";
}
実際の出力はこうなります。記事内の小見出しなどにも応用できますね。
モバイルファースト
黒背景の見出しにツートンの四角を２つ置く
<p id="mdn">マーケティングラボ</p>
p#mdn {
position: relative;
padding: 3px 80px 3px 50px;
background: #000;
color: #fff;
font-size: 12px;
font-weight: normal;
line-height: 18px;
}
p#mdn:before {
position: absolute;
width: 18px;
height: 18px;
top: 3px;
left: 3px;
background: #C7D1EA;
content: "";
}
p#mdn:after {
position: absolute;
content: "";
background: #3289CA;
width: 18px;
height: 18px;
top: 3px;
left: 21px;
}
実際の出力はこうなります。こちらも記事の小見出し等に使えます。
マーケティングラボ
参考になりましたでしょうか？？
背景画像などを使えば文字を装飾したりすることはできますが、画像が多くなるとサイトの読み込み速度にも影響してきます。
今回ご紹介したようなCSSの要素を使えば、画像を用意しなくても装飾をすることが可能です。みなさんのサイトに何か役立てられてたら幸いです。
開発部 山田でした。
