カテゴリー: デザイン

デザイン

デザイン

概要

Flexbox(CSS Flexible Box Layout)についてまとめる

Flexboxとはボックスの横並びや縦並びが手軽に実装できるレイアウトモジュール

今までだと2カラムのレイアウトを作成する時にはfloatなどを使っていたが、clearfixでの解除が必要だったり縦方向の中央揃えが面倒な部分があったが Flexboxだと簡潔に記述ができて、柔軟なレイアウトが実装可能となっている

また噂ではfloatよりもパフォーマンスがやや良い(早い)とのこと
参考:最適なCSSの横並びはどっち!? Flexboxとfloatのパフォーマンス比較

デザイン

デザイン

概要

SassはCSSを効率的に書くための記法

Sassには2つの記法がある

  • SASS(拡張子は.sass)
  • SCSS(拡張子は.scss)

SASSとSCSSで書き方の違いがある例

SASSの場合

.div
  .container
    color: red

SCSSの場合

.div {
  .container {
    color: red;
  }
}

SASSの方が最初に作られたが、デザイナーに不評だったこともありCSSっぽいSCSSが現在の主流となっているので本記事はSCSSの記法をまとめることとする

デザイン