どうも！がむしゃらワーカーしゅう丸(@shumarukiti)です！
この記事は、
という方に向けた記事です。
結論ですがattr()の使い方は簡単です。
attr()でcss擬似要素のcontentを所得するメリットはcssを短縮できるという点です。
この記事は3分ほどで読める内容ですので、ぜひ最後まで読んでattr()のメリットを理解していただければと思います。
この記事を書いている僕はWEB系フリーランスとして活動しており、それなりにサイトを制作してきました。そんな僕がattr()の使い方を詳しく説明します。
目次
css擬似要素のcontentをattr()で所得する例
まずは制作物を見た方がわかりやすいと思うので、下の「result」ボタンを押して確認してください。
こんな月別の行事ページを作る時にattr()が活躍します。
ちなみにclass名がflexMonthlyになっているのは、flexboxを使って右側に行事内容も追加することを想定しているからです。
学校やイベントが多い企業のホームページでは活躍するコードなのでこれを機会に覚えておくといいかもです。
ちなみに擬似要素の前の：：ですが、css3からなので:の方が対応範囲は広いかもなので、それぞれ使いたい方を使ってください。
attr()の使い方
上のコードを見れば使い方はわかるかもですが、簡単に説明しておきます。
css側 → content: attr(data-month)””;
htmlに吐き出したい内容をdata-monthで設定してあげます。
cssではattr()でdata-monthを記述するだけ。
ちなみにdata-monthは今回月別の行事表を作ったからそうしただけで、好みの名前に変更して使ってきださいね。
css擬似要素のcontentをattr()で所得するメリット
attr()を使うメリットですが、
- cssを短縮できる
- css内のコンテンツと装飾を別々にすることができる
主にcss側にメリットがあります。
僕は出来るだけ短くcssを書きたいので使っていますが、ごりごり描く人はattr()を使う必要はないかもです。
css擬似要素のcontentをattr()で所得しない場合のコード
cssを見ると一目瞭然ですが各要素にcssをあてることになるので、cssの記述が長くなりスマートでなくなります。
content以外はmonthlyBoxにあててもいいかもですが、それでもcontentだけそれぞれ書くのは疲れそうです。
cssをattr()で所得する機会は少ない
attr()について説明してきましたが、使う機会はまぁまぁ少ないかなと思います。
とはいえ引き出しは多ければ多いほどいいので、これを機会に覚えておけばいいかと。
使い方がわからないという方は質問してきていただければ答えますので！ここ(@shumarukiti)まで連絡してきてください。笑
TechAcademyは最大手のオンラインプログラミングスクール。コースは24種類と豊富で幅広く学べるのが特徴。完全無料（０円）で１週間無料体験授業が受講可能。無料体験期間中にメンターのオンライン面談を受けるとAmazonギフト券５００円がもらえます。
» 公式サイトを見る
TECH CAMPは転職に特化したプログラミングスクール。転職成功率は９８%で、転職できなければ受講料全額返金の制度あり。無料カウンセリングで受講内容からエンジニア需要まで疑問が全て解決できます。
» 公式サイトを見る
TechBoostはBranding Engineerが運営するオンラインプログラミングスクール。フリーランス案件求人midworksも運営しているので、卒業後の進路が転職、フリーランスと選択肢が多いのが特徴です。無料説明会あり。
» 公式サイトを見る
