css疑似要素でattr()を活用しよう！

2016年12月26日

みなさま、こんにちは！ 株式会社ホワイトボードのフロントエンジニアの末ちゃんこと、末吉です。

師走の時期、と思いきやクリスマスパーティーも終わり次は年末のパーティーが控えています。
一年は本当にあっという間です。ここで僕の座右の銘を・・・

やらずに後悔より やって後悔

頭でっかちになって未来やまわりのことを考えすぎてため込むより、自分が感じたことや思ったことは素直に行動に移した方が良いですね。
来年はより一層、そういう年にしていきたいなと思います。

さて師走の忙しい時期ですが、私の周りには一生懸命htmlやcssを勉強している人たちがいます。
このブログを見ているか不明ですが、そんな人たちに現状役に立たない、未来に役に経つであろう便利なワザを紹介します（笑）

cssの疑似要素のcontentをattr()を使用してhtmlから取得する

はて、なんのことやら？通常cssの疑似要素である:beforeや:afterの中に入るコンテンツは、以下のように記述しますね。

p:before { content: "テキストテキスト"; }

このようなことは皆さん日常的にコーディングで使用していると思います。
しかし、この書き方は非常に面倒です。

なぜか？

  • css内にコンテンツと装飾の要素が同時に存在してしまう
  • 表示したいコンテンツすべてに、それぞれcssで設定する必要がある（たとえばclassを大量増殖しなければならなくなります）

 

前者については当然、 cssとは装飾のためのものなのでコンテンツは書き込みたくないと思うのが普通です。
後者についてはどういうことか？例に示してみましょう。

<p class="test1">テキストテキスト</p>
<p class="test2">テキストテキスト</p>
<style>
.test1:before { content: "ひとつ目の要素のテキスト"; }
.test2:before { content: "ふたつ目の要素のテキスト"; }
</style>

となります。
この数が多ければ多いほどたくさんのcssを書かなければ行けません。
実に冗長的です。

htmlのdata属性とcssのattr()を使用する

HTML5から自由にdata属性を作成することができるようになりました。
これを有効利用して、便利な書き方をしてみたいと思います。
以下のようなコードになります。

<p data-text="ひとつめの要素のテキスト">テキストテキスト</p>
<p data-text="ふたつめの要素のテキスト">テキストテキスト</p>
<style>
p:before { content: attr(data-text)""; }
</style>

たったこれだけのcssの記述で、data属性に書いてあるテキストを呼び出すことができます。

どんなときに使う？

通常のサイトを運営していく上で、この機能を使用していくことはそんなにないのでは・・・と思います。
しかし、コンポネートの概念を使用したサイトやアプリなどでは非常に使うシーンが多いのではないでしょうか。

またこの書き方をすれば、都度html上から好きなようにテキストを変更できるので整備性もよいと思います。

上手に使えば<table>のレスポンシブ対応に・・・

この機能を上手に使うと、厄介で厄介で仕方がない<table>のスマホ対応にも上手に付き合うことができます。
多分通常のサイト構築では、主にここで使用する頻度が高いのではないでしょうか。

 

このように、今までJavaScriptを使わないとできなかったことが、htmlやcssでできるようになるのは、非常に嬉しいことですね。

 

 

現在コーディングに求められているものって非常に多くなってきています。
例えば今までなかったアニメーションの考え方や、動的なコンテンツの変化、レスポンシブ対応のためのあらゆるブラウザサイズに対応するコンポネート設計など

こういった新たな機能を上手に使用して、構築していきたいものですね。

それでは皆さん、今年はこれにてお暇させていただきます。
また来年お会いいたしましょう！

良いお年を！

Share Button