css擬似要素のcontentをattr()で所得する方法

どうも！がむしゃらワーカーしゅう丸(@shumarukiti)です！

この記事は、

[voice icon=”https://j-info1.com/wp-content/uploads/2018/07/moyamoya_man.png” type=”l”]attr()ってコード見たけどさっぱりわからない。メリットはなんなんだろ？[/voice]

[voice icon=”https://j-info1.com/wp-content/uploads/2018/07/pose_atama_kakaeru_woman.png” type=”l”]attr()でcss擬似要素のcontentの所得方法が知りたいな。[/voice]

という方に向けた記事です。

結論ですがattr()の使い方は簡単です。

attr()でcss擬似要素のcontentを所得するメリットはcssを短縮できるという点です。
この記事は3分ほどで読める内容ですので、ぜひ最後まで読んでattr()のメリットを理解していただければと思います。

この記事を書いている僕はWEB系フリーランスとして活動しており、それなりにサイトを制作してきました。そんな僕がattr()の使い方を詳しく説明します。

css擬似要素のcontentをattr()で所得する例

まずは制作物を見た方がわかりやすいと思うので、下の「result」ボタンを押して確認してください。

こんな月別の行事ページを作る時にattr()が活躍します。
ちなみにclass名がflexMonthlyになっているのは、flexboxを使って右側に行事内容も追加することを想定しているからです。

学校やイベントが多い企業のホームページでは活躍するコードなのでこれを機会に覚えておくといいかもです。
ちなみに擬似要素の前の：：ですが、css3からなので:の方が対応範囲は広いかもなので、それぞれ使いたい方を使ってください。

上のコードを見れば使い方はわかるかもですが、簡単に説明しておきます。

html側　→　data-month=”APRIL”

css側　→ content: attr(data-month)””;

htmlに吐き出したい内容をdata-monthで設定してあげます。

cssではattr()でdata-monthを記述するだけ。
ちなみにdata-monthは今回月別の行事表を作ったからそうしただけで、好みの名前に変更して使ってきださいね。

attr()を使うメリットですが、

主にcss側にメリットがあります。
僕は出来るだけ短くcssを書きたいので使っていますが、ごりごり描く人はattr()を使う必要はないかもです。

cssを見ると一目瞭然ですが各要素にcssをあてることになるので、cssの記述が長くなりスマートでなくなります。

content以外はmonthlyBoxにあててもいいかもですが、それでもcontentだけそれぞれ書くのは疲れそうです。

attr()について説明してきましたが、使う機会はまぁまぁ少ないかなと思います。
とはいえ引き出しは多ければ多いほどいいので、これを機会に覚えておけばいいかと。

使い方がわからないという方は質問してきていただければ答えますので！ここ(@shumarukiti)まで連絡してきてください。笑

[kanren postid=”2040″]

[kanren postid=”902″]

[kanren postid=”2299″]