【CSS】attr()を使ってHTMLだけでcontentの中身を書き換える方法
CSSでできる動的なデザインに使えるattr()式
現状はbeforeやafterの疑似要素のプロパティ「content」にしか使えませんがattr()を使ってできる事を考えてみます
attr()式の基本サンプル
HTML
<p content-value="xxx">aaa</p>
CSS
p:before {
content: attr(content-value) "";
}attr()式を使って便利そうな事
CSSは全ページ共通にする事が多いですし、疑似要素のcontentを書き換えられたらな、って事はしばしばあるのですが、いざなんだろと思うとなかなか思い浮かばない
ひとつ思ったのは「ブログ記事内でページ毎のCSSを記述せずにcontentを書き換えたい時」は便利かな、と
記事内でのリンク案内文を変更する
「引用元」「関連記事」とか、最近みかけるのは「合わせて読みたい」とか？をCSSセレクタは同一で済まして案内文だけを書き換えるのはどうでしょう
サンプルでは「value」としていますが、その部分は何でも良いです
何でも良いですが、AMPページだとエラーになるのでAMPページを実装している場合は「title」あたりを利用するのが無難な気がします
HTML
<p class="link" title="オススメ記事"><a href="">xxx</a></p>
<p class="link" title="合わせて読みたい"><a href="">xxx</a></p>
<p class="link" title="参考"><a href="">xxx</a></p>
CSS
.link{
border: dashed 3px #FF9100;
position: relative;padding: 10px;
font-weight: bold;
}
.link:before {
content: attr(title) "";
position: absolute;
top:-1em;
left:15px;
background:#FFF;
}表示結果
見出しデザインのCSSサンプル集
モンハンワールドブログまとめ
こういったリンクの案内文字部分を疑似要素のcontentを使っている場合は割りと使えるのではないでしょうか？
WordPressだと「ｐ」はclass付けた場所で改行すると複製しちゃうので「div」で書いた方が使いやすいかも、「a」に疑似要素classはリンクになるの解除できる？
リンク先に合わせて記事内だけで書き換えれるのは、結構便利だと思います
このブログも途中からカード表示はやめて雑なリンクにしてるのですが、全部こういうのに替えようかな
idでなくclass名で指定してても「this」みたいな扱いになってて、同じclass名の部分は書き換わらないのがポイントですね
attr()式の使い所と今後に実装
もう少し、attr()式の使い所を考えてみます
JavaScriptを使えばもっと色々できそうですが、それなら直接CSSを書き換えますよね
でも、CSSを読み込み後に手軽に変更する方法はJavaScriptを使う以外はあまりなく、思い浮かばないだけで割りと出番はあるか、と
あと、今は疑似要素の「content」にしか対応できませんが、一応url()やcolor、数値なんかも実験段階として存在してるんですよね
urlはCSSをで記述した背景画像URLをHTML側で書き換えれるのはかなり便利そう
数値なんか触れるなら、CSSの自由度は大きく変わりそうですね