CSSのattr()関数でHTMLのデータを取得できる

この記事を書いている人

Marie

• フリーランスwebデザイナー＆講師
• 制作会社・インハウスデザイナーを経験し独立
• オンラインwebデザイン教室ちいウェブ運営
• 仕事の合間の息抜きに植物を育てています♡
• スプラ・DIY・将棋がすき
• 小4・年長の母

もっと詳しくみる

attr()関数というものがあります。

今回はこのattr()関数を便利に使う方法を紹介します。

CSSの疑似要素、afterやbeforeで使用するcontentプロパティがありますよね。

そのcontentと、attr()関数を組み合わせて、HTMLで用いる属性値を取得するという方法を紹介します。

擬似要素とは

擬似要素before、afterは、HTML上にはタグとして存在しないものを擬似的に作成することができます。

例えば以下のような例を見てください。

<ul>
  <li>500</li>
  <li>600</li>
</ul>

このようなリストがあったとします。

そして、CSSで擬似要素を使って次のように前後に文字を追加することができます。

li::before {
  content: "￥";
}
li::after {
  content: "-";
}

• 500
• 600

liの最初に「￥」、最後に「-」をつけることができました。

CSSの擬似要素を使って単位等を指定した場合に便利な点は、HTMLを見やすくすっきりさせることができる点です。

仮に擬似要素を使わなかったとすると、HTMLは以下のようになりますね。

<ul>
  <li>￥500-</li>
  <li>￥600-</li>
</ul>

比べてみるとすっきりしていて編集しやすくなっていると思います。

<ul>
  <li>500</li>
  <li>600</li>
</ul>

そして、追加があった場合も、<li>700</li>と書くだけなので効率的です。

• 500
• 600
• 700

うまく使うとコーディングの時短になります。

attr()関数の使い方

擬似要素の使い方が分かったところで、attr()関数を見てみます。

簡単に言うと、HTML上のテキストを取得することができるものです。

URLの取得

<div class="link"><a href="testdayo.com">URL</a></div>

このような場合にattr(href)を使ってURLを取得することができます。

.link a::after {
  content: "："attr(href);
}

CSSを使わない場合はHTMLは以下のように書きますよね。

<div class="link"><a href="testdayo.com">URL：testdayo.com</a></div>

URLを2回書く必要があるところをcontent: "："attr(href);を使うことで省略することができるという例ですね。

カスタムデータの利用

URLではなく好きなデータをHTMLから取得することができます。

例えばこちらをみてください。

<div class="text" data-text="ABC">abc</div>

.text::before {
 content: attr(data-text);
}

このように、data-text=”ABC”というような任意のデータをHTML上から取得することができます。

data-textの箇所は任意の名前で大丈夫です。

これは、以下のように書くことと同じ結果になります。

1 HTMLのみ

<div class="text">ABCabc</div>

2 HTML+CSS

<div class="text">abc</div>

.text::before {
 content: "ABC";
}

使い方はわかりました。

ではこれをどう使えば便利に使えるのでしょうか？

中々上手い使い方が普通のコーディングでは見つけにくい気がします。

カスタムデータを取得するattr()の使用例

例えば、見出しやメニュー等で日本語＋アルファベットの2種類をテキスト表示させたい場合があります。

<h2 alphabet="i love u">アイラブユー</h2>

.iloveu::after {
 content: attr(alphabet);
}

アイラブユー

この場合、CSSで

.iloveu::after {
 content: i love u;
}

このように書くことと同じですが、この場合は、HTMLとCSSの両方を編集する必要があります。

編集やコーディング時に、HTMLのみ追加、編集することができる点でattr()関数を使うと便利ですね。

ただ、以下のように書くとそれも解決となります。

<h2><span>i love u</span>アイラブユー</h2>

<span>を使う方がよく見かけるのではないでしょうか。

じゃあ一体、attr()はどう使えば便利なのでしょうか？

それは誰も分かっていません。と思います。

なのであまり使われていない書き方ですよね？？笑

でも、spanより分かりやすいしHTMLが綺麗な気もしますね。

ちなみに、当ブログのトップページの記事タイトルhoverアニメーションは、このattr()関数を利用しています。

需要があればまた記事にしてみようと思ったり思わなかったりです。