Lessで配色を変更する。

2020-04-19 04:32webCSS
Lessで配色を変更する。

lighten(@color, 10%); //明度を@colorより10%明るく
darken(@color, 10%); //明度を@colorより10%暗く
saturate(@color, 10%); //彩度を@colorより10%高く
desaturate(@color, 10%); //彩度を@colorより10%低く
fadein(@color, 10%); //透明度を@colorより10％減らす
fadeout(@color, 10%); //透明度を@colorより10％増やす
fade(@color, 50%); //透明度を@colorの50%にする
spin(@color, 10); //色相を@colorより10度大きく
spin(@color, -10); //色相を@colorより10度小さく
mix(@color1, @color2); //@color1と@color2の配色を混ぜる

Flexbox CSSレイアウトの主力選手

2020-04-14 02:11webCSS
floatやabsoluteにさようなら。
横並び、縦並び、グリット表示、なんでも来いの救世主です。
ブラウザの対応も今なら問題無し。
どんどんflexboxを活用して行きましょう。

flex-direction 子要素の並ぶ向き


row（default）
子要素を左から右に配置
row-reverse
子要素を右から左に配置
column
子要素を上から下に配置
column-reverse
子要素を下から上に配置

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;






flex1
flex2
flex3

justify-content 水平方向の揃え


flex-start (default)
行の開始位置から配置。左揃え。
flex-end
行末から配置。右揃え。
center
中央揃え
space-between
最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置
space-around
両端の子要素も含め、均等に間隔をあけて配置

justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;







flex1
flex2
flex3

flex-wrap 子要素の折り返し


nowrap (default)
子要素を折り返しせず、一行に並べる。
wrap
子要素を折り返し、複数行に上から下へ並べる。
wrap-reverse
子要素を折り返し、複数行に下から上へ並べる。

flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: center;





flex1
flex2
flex3
flex4
flex5
flex6
flex7

align-items 垂直方向の揃え


stretch（default）
親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置。
flex-start
親要素の開始位置から配置。上揃え。
flex-end
親要素の終点から配置。下揃え。
center
中央揃え。
baseline
ベースラインで揃える。

align-items: stretch;
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;

WEB制作に役立つ情報を発信（関係無い記事もちらほらありますが...）