シェフ先日、フルリニューアルしたWordPressテーマ「4536」を公開しました。見るこのリニューアルではサイトデザインが大幅に変わりましたが、実は内部でも「ある改革」をしていました。その1つが「CSS設計」です。Vue.jsのフレームワークである「Vuetify」でのサイト設計がかなり快適で、もう従来のCSS設計が面倒になったんですよね。「CSSファースト」とでも呼べばいいのでしょうか。フレームワークと言えば「Bootstrap」が定番ですが、ファイルが重かったり、最適化するために手間がかかったり、いくつか無視できないデメリットもあるので自作した次第です。自作のフレームワークなのでいくつか自分ルールもあるんですが、今回のキモは「カスタムデータ属性」を使ったこと。以下、カスタムデータ属性を使ったCSSフレームを自作する方法やメリットについてお話ししたいと思います。目次1カスタムデータ属性とは?2カスタムデータ属性を使うメリット3カスタムデータ属性のフレームワーク【サンプル】4marginやpaddingも定義しよう5自作のフレームワークは高速化にもつながるカスタムデータ属性とは?カスタムデータは「data-〇〇」のような形で使うclassやidと同じ「属性」です。data-に続く文字列は記号以外なら基本的に何でもOKで、data-colorやdata-123といった文字列になります。classやidと同じ属性なので、data-color="red"のように値とセットで使うのが基本ですね。</div></body>特に難しいことなくお使いいただけるかと思います。本当にclassやidと同じように使えます。サンプルCSS先ほどのHTMLに対してCSSは以下のように記述します。red;}カスタムデータ属性を使うメリットなぜカスタムデータ属性を使うのか、なぜclassではダメなのかについての個人的な意見は以下の通りです。今回はフレームワークについての話なのでその点に触れます。直感的に扱えるカスタムデータ属性でCSSを設計すると非常に直感的でわかりやすい名前にできます。displayには「block」に「inline-block」に「flex」に、様々な値がありますよね。これをclassで表現すると、以下のようになります。flex;}そして、HTMLはこのようになります。</div></div>これでもいいんですが、カスタムデータ属性の方が「直感的」です。flex;}HTMLはこう。</div></div>おそらく、どんなことをしているのか初見でわかるかと思います。メンテナンスが楽フレームワークの最も大きなメリットでもありますが、やはり「管理が楽」なんですよね。displayをblockからflexに変えたい時、CSSを修正するのではなく、data-display="block"をdata-display="flex"へと、HTML側を修正するので非常に直感的です。「このCSSどこだっけ?」という時間がないので、開発者フレンドリーだと思いませんか?正規表現が簡単WordPressのテーマ開発をしていると、str_replaceやpreg_replaceなどの正規表現を使う場面が多いです。見るこの正規表現、プログラムの中でも処理が重い部類に入り、カスタムデータ属性を使わずにclassやidを対象にする場合は特に余計に処理が重くなりがちです。idがあるのかないのか、classがあるのかないのか、などの処理から始まることも多いため、そこで余計なパワーを使うためです。カスタムデータ属性だと正規表現によるチェックが不要になるため、以下のようにシンプルに文字列を置換することができます。$content);個人的にはこれはけっこう大きなメリットだと思っています。難しいことはありませんが、記述が地味に面倒だと思うので以下にサンプルをまとめました。※全部のCSSを定義すると不要なものまで含まれて肥大化してしまうため、実際に使ったものだけ記載しています。サイトの構成に応じて追加や削除をしてみてください。underline;}marginやpaddingも定義しようフレームワークの醍醐味でもありますが、marginやpaddingも定義すると非常に開発が捗ります。冒頭でもお話ししたVue.jsのフレームワーク「Vuetify」はクラス名で余白を管理するのですが、この手法は自作のフレームワークで全面的に採用しました。margin-topは「mt」margin-bottomは「mb」padding-rightは「pr」padding-leftは「pl」となり、その後にハイフン+数字で余白の大きさを決めます。48pxこれは完全にVuetifyの手法をマネしました(笑)慣れるとすごく便利なので、ぜひ取り入れてみてください!自作のフレームワークは高速化にもつながるそういえば、大事なことを言っていませんでした。フレームワークを使うことによって「CSSの重複」がなくなりファイルが軽くなるため、直接的にサイト表示の高速化につながります。CSSに関するサイト高速化の記事でもまとめましたが、ファーストビューに関連するCSSは最初にインラインで読み込み、他のは後で遅延読み込みが基本的な施策ですが、要はインラインでフレームワークを読み込むということですね。これは意外と効果大な手法なので、高速化の観点からもフレームワークを採用してみてはいかがでしょうか。カテゴリー:CSSシェフこのサイト「Fantastech」を運営している人。WordPressテーマ「4536」の開発中にインプットした情報などを発信中。上に表示された文字を入力してください。「ページを開けません。Jobsの導入方法や注意点などWordPress初心者も使いやすい無料テーマ「4536」きたぞ、国内初の流体シェイプ国内初となる流体シェイプをデザインに取り入れたWordPressテーマ「4536」を公開しました。