共通部品として使える
便利なクラス(common.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についてはこちらを参照ください。
以上です。何かわからないことがございましたら、お気軽にお問い合わせください。お問い合わせフォームはこちらです。
まとめ
- 共通のパーツを作成することで、作業効率が向上し記述ミスも防止できる
- レスポンシブ対応に有効的である
