CSSの擬似要素を使った小技まとめ

Idea source オカベ CSS

f:id:sharpb9c42f:20210408235135p:plain

 

こんにちはデザインチームオカベです。
仕事でもプライベートでもCSSを書く機会が多々あるのですが、擬似要素にお世話になりっぱなしです。CSSだけで色んな表現が作れる、そんな擬似要素の便利な使い方をいくつか紹介したいと思います。

擬似要素を使いこなせるととっても便利

そもそも擬似要素って何？という話ですが、いくつかありますがここでは「:before」「:after」に絞ってご紹介。
簡単にいうとHTMLを記述することなく、要素を追加することができます。
これによって以下のような恩恵

  • HTMLの記述が減らせる
  • 構造がシンプルにできる
  • HTMLを触らずにコントロールができる

擬似要素はCSS側で管理になります。HTMLの構造・設計をあらかじめ意識しておく必要がありますが、使いこなせれば圧倒的にWebの管理がスマートになるといっても良いでしょう。

基本的な使い方

擬似要素を利用したいセレクタに「:before」あるいは「:after」を追記します。「content」プロパティを記述するのがミソです。でないと擬似要素は表示されません。「content」プロパティに文字を設定しておくと、その文字が要素として追加されますが、文字は不要であればcontentの中は空「''」のままで構いません。

f:id:sharpb9c42f:20210408235123j:plain

「before」と「after」のイメージ

そうすると「:before」であれば指定した要素の中の最初に、「:after」であれば文字通り要素の最後に追加されます。
といってもこれだけだとイメージが沸かないと思うので実際に実装してみます。

HTML
<span class="test">この文の後に文字が追加されます → </span>
CSS
.test:after {
    content: 'HELLOW WORLD';
}
結果サンプル
この文の後に文字が追加されます →

HTML側には「HELLOW WORLD」の文字はないに結果サンプルでは表示されているのがお分かりでしょうか。このようにCSSを通じて要素を追加できるのが擬似要素です。

基本的な使い方は以上ですが、擬似要素にも普段通りCSSが適用されるので、擬似要素を活かした応用技法をいくつかご紹介したいと思います。

特殊な使い方

ナンバリング

見出しなどで頭に番号をつけたいシーンがあるかと思いますが、本来であればHTML側にそれぞれ数字を入れるところを擬似要素で対応してみます。

HTML
<div class="step_title">
    <h6>あのイーハトーヴォのすきとおった風</h6>
    あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
    <h6>夏でも底に冷たさをもつ青いそら</h6>
    あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
    <h6>うつくしい森で飾られたモリーオ市</h6>
    あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
</div>
CSS
.step_title {
    counter-reset: count;
}

.step_title h6 {
    counter-increment: count;
}

.step_title h6:before{
    content: counter(count);
    width: 2em;
    height: 2em;
    margin-right: .5em;
    padding-top: .45em;
    font-size: 1.5em;
    text-align: center;
    font-weight: bold;
    line-height: 1;
    border-radius: 10em;
    letter-spacing: 0;
    background-color: #FCE300;
    display: inline-block;
}
サンプル
あのイーハトーヴォのすきとおった風
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
夏でも底に冷たさをもつ青いそら
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
うつくしい森で飾られたモリーオ市
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

早速複雑になってしまいましたが、HTMLに記述がないのに数字が表示されているかと思います。
仕組みを簡単に解説すると

  1. ナンバリングさせたい領域（step_title）を定め、「counter-reset」でナンバリングの準備をする。設定されている「count」はお好みの名前で大丈夫です。
  2. 領域内で「h6」が出たら「count」を加算。（counter-incrementプロパティ）
  3. 擬似要素で「count」を表示。（「count」には前述２でカウントアップされた数字が入っている）

という感じでイチイチ見出しの前に数字を記述しなくてもCSSだけでナンバリングすることができます。
中々便利なのでおすすめです。

動画をレスポンシブ対応させる

YouTubeの動画を埋め込むには提供されている埋め込みコードを利用するかと思いますが、そのままではサイズが設定されておりレスポンシブされません。

f:id:sharpb9c42f:20210408235127j:plain

YouTubeで動画の埋め込みコードを取得

そこで擬似要素を利用して埋め込み動画をレスポンシブ対応させてみます。

イメージとしては動画を表示させる領域を見えない擬似要素で確保させ、その上に動画を覆いかぶせるような形でレスポンシブ対応させます。プロパティを「padding-top」としているのは、画面サイズが変わった時に比率を維持するためです。「56.25%」という数字は16:9の比率を意味します。4:3であれば「75%」と設定すると良いでしょう。

HTML
<div class="movie">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/sKZPtXMSKDc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
CSS
.movie {
	position: relative;
}

.movie:after {
	content: '';
	width: 100%;
	padding-top: 56.25%;
	display: block;
}

.movie  iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
サンプル
YouTubeの埋め込みコードのみの場合

画面サイズを狭めて違いを確認してみてください。

SVGアイコンを表示

contentプロパティにSVGコードを書くことで、SVGを表示させることができます。
あまりピンとこないかもしれませんが、中々大きなメリットがあります。

  • HTMLにimgタグを記述しなくてよい
  • 色を自由に変更できる
  • SVGなのでサイズの変化や解像度の影響を受けにくい
HTML
<h6 class="download">あのイーハトーヴォのすきとおった風</h6>
<h6 class="twitter">夏でも底に冷たさをもつ青いそら</h6>
CSS
h6.download:before  {
    content: url( 'data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M20.8,29l9,10l0,0c0.5,0.6,1.3,1,2.2,1c0.9,0,1.7-0.4,2.2-1l0,0l9-10l0,0c0.5-0.5,0.8-1.2,0.8-2c0-1.7-1.3-3-3-3c-0.9,0-1.7,0.4-2.2,1l0,0L35,29.2V11c0-1.7-1.3-3-3-3s-3,1.3-3,3v18.2L25.2,25l0,0c-0.5-0.6-1.3-1-2.2-1c-1.7,0-3,1.3-3,3C20,27.8,20.3,28.5,20.8,29L20.8,29z M55,35c-1.7,0-3,1.3-3,3v12H12V38c0-1.7-1.3-3-3-3s-3,1.3-3,3v15c0,1.7,1.3,3,3,3h23c0,0,0,0,0,0s0,0,0,0h23c1.7,0,3-1.3,3-3V38C58,36.3,56.7,35,55,35z"/></svg>');
    width: 40px;
    margin-right: 10px;
    vertical-align: middle;
    display: inline-block;
}

h6.twitter:before {
    content: url( 'data:image/svg+xml;utf-8,<svg fill="%2368AADE" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 82"><path d="M100,9.9c-3.7,1.6-7.6,2.7-11.8,3.2c4.2-2.5,7.5-6.6,9-11.4c-4,2.4-8.4,4.1-13,5c-3.7-4-9.1-6.5-15-6.5C58,0.2,48.8,9.4,48.8,20.8c0,1.6,0.2,3.2,0.5,4.7C32.2,24.6,17.1,16.4,7,4c-1.8,3-2.8,6.6-2.8,10.3c0,7.1,3.6,13.4,9.1,17.1c-3.4-0.1-6.5-1-9.3-2.6c0,0.1,0,0.2,0,0.3c0,9.9,7.1,18.2,16.5,20.1c-1.7,0.5-3.5,0.7-5.4,0.7c-1.3,0-2.6-0.1-3.9-0.4c2.6,8.2,10.2,14.1,19.2,14.2c-7,5.5-15.9,8.8-25.5,8.8c-1.7,0-3.3-0.1-4.9-0.3c9.1,5.8,19.9,9.2,31.4,9.2c37.7,0,58.4-31.3,58.4-58.4c0-0.9,0-1.8-0.1-2.7C93.8,17.6,97.3,14,100,9.9z"/></svg>');
    width: 80px;
    margin-right: 10px;
    vertical-align: middle;
    display: inline-block;
}
サンプル
あのイーハトーヴォのすきとおった風

色を付けたい場合は、SVGコード内にfill属性でカラーコードを設定すれば変更できます。ただ カラーコードの#は%23に置き換える必要があります。

テーブル風リスト

通常であればテーブルを利用するような表組も、シンプルな構造に限りますが擬似要素で再現できたりします。多少制御が必要な面もありますが、本来のテーブルに比べるとかなりHTMLをスッキリさせることができます。

HTML
<ul class="list-table">
	<li title="お名前">オカベ</li>
	<li title="連絡先">hogehoge@testsample.jp</li>
	<li title="住所">〒131-8634 東京都墨田区押上１丁目１−２</li>
</ul>
CSS
.list-table li {
	padding-left: 7em;
	line-height: inherit;
	position: relative;
}
.list-table li + li {
	margin-top: 20px;
}
.list-table li::before {
    content: ''attr(title)'';
    width: 6em;
    color: #fff;
    text-align: center;
    top: 50%;
    display: block;
    background-color: #000;
    transform: translateY(-50%);
    z-index: 1;
}
サンプル
  • オカベ
  • hogehoge@testsample.jp
  • 〒131-8634 東京都墨田区押上１丁目１−２

ここでのキーポイントも「content」プロパティです。「''attr(title)''」とすることで「li」要素に設定された「title」の文字を表示させることができます。「attr()」の中は「title」だけでなく「class」や「src」、「alt」など属性を限定しないので「src」であれば画像のURLを取得することができます。

 

ちょっと難しいところもあるかもしれませんが、色々試してみてください。

オカベ カテゴリーの記事一覧 -