Web制作では、事前に使用するクラスを共通クラスとしてまとめておくことで、作業の効率化や記述ミスの防止ができます。一般的に、それらのクラスはcommon.cssというファイルにまとめられることが共通の認識とされています。今回は当方がWeb制作をするうえで、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%;
}

/********************************
 ディスプレイ用
*********************************/

.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;
  }
}

以上です。何かわからないことがございましたら、お気軽にお問い合わせください。お問い合わせフォームはこちらです。