common.cssの作り方｜再利用できるCSS共通クラスと運用上の注意点
はじめに
概要
Web制作では、事前に使用するクラスを共通クラスとしてまとめておくことで、作業の効率化や記述ミスの防止ができます。一般的に、それらのクラスはcommon.cssというファイルにまとめられることが共通の認識とされています。今回は当方がWeb制作をするうえで、common.cssに入れておきたいものを紹介いたします。こちらの内容が参考になれば幸いです。
※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。
common.cssとは
common.cssは、ウェブサイトやアプリケーションのデザインやスタイルを統一するために使用されるスタイルシートの一種です。これらを予め記述しておくことで、デザインの形成が楽になります。
/********************************
共通クラス
*********************************/
.flex-row {
display: flex;
align-items: center;
}
.flex-column {
display: flex;
flex-direction: column;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.wrap {
margin: 0 auto;
width: 90%;
}このようにクラスを追加することで、予め記述していたCSSが適応されるため、作業効率を向上させることができます。
レスポンシブ対応
レスポンシブ対応のcommon.cssはこちらです。
/********************************
ディスプレイ用
*********************************/
.lg-block {
display: none !important;
@include mq(lg) {
display: block !important;
}
}
.lg-none {
@include mq(lg) {
display: none !important;
}
}
.md-block {
display: none !important;
@include mq(md) {
display: block !important;
}
}
.md-none {
@include mq(md) {
display: none !important;
}
}
.sm-block {
display: none !important;
@include mq(sm) {
display: block !important;
}
}
.sm-none {
@include mq(sm) {
display: none !important;
}
}
上記はハンバーガーメニューを例にレスポンシブ対応記述したものです。PCのメニューは、lg-blockでスマホのときはdisplay: none;とし、PC画面時にdisplay: block;で表示する内容となっています。SCSSについてはこちらを参照ください。
以上です。何かわからないことがございましたら、お気軽にお問い合わせください。お問い合わせフォームはこちらです。
まとめ
- 共通のパーツを作成することで、作業効率が向上し記述ミスも防止できる
- レスポンシブ対応に有効的である
common.cssを実務で使いやすくする設計のポイント
共通クラスは、短く書けることよりも「どこで使っても同じ結果になること」が重要です。特定のページだけで成立する余白や色まで共通化すると、後から上書きが増えて管理しにくくなります。
共通化に向いているもの
- Flexboxの方向や整列
- コンテンツ幅と中央寄せ
- 表示・非表示の切り替え
- スクリーンリーダー用の非表示テキスト
共通化しすぎないほうがよいもの
- 特定セクションだけで使用する背景色や装飾
- デザイン変更で意味が変わりやすい数値
- HTML構造に強く依存するスタイル
そのまま使える最小構成
.u-flex {
display: flex;
}
.u-flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.u-container {
width: min(90%, 1200px);
margin-inline: auto;
}
.u-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}u-はutilityの略です。接頭辞を付けると、ページ固有のクラスと見分けやすくなります。
導入前のチェックリスト
- 同じ指定を3か所以上で繰り返しているか
- クラス名から役割を判断できるか
- 既存コンポーネントのCSSと競合しないか
- スマートフォンとPCの両方で確認したか
!importantを常用しなくても運用できるか
最初から大量のクラスを用意せず、実際に重複した指定だけを共通化すると、用途の分からないCSSが増えるのを防げます。
