レスポンシブな空白のつくり方
- カテゴリー
- HTML/CSS >
- HTML/CSSの実践
全3回
レスポンシブなウェブサイトを作るときに、セクションやブロックの空白を調整する方法を解説します。今回はメディアクエリーを使わずに、clamp()とvwを使って調整してみましょう。
第3回 伸び縮みするブレークポイントを導入する
伸び縮みする空白を実際のサイトで使った実装例を紹介します。clamp()、vw、calc()で作った伸び縮みする空白をサイトの実装にどのように活かすか、実例を通して解説します。
第2回 伸び縮みするブレークポイントで共通化する
clamp()、vw、calc()で作った伸び縮みする空白を書き換え、ブレークポイントを再利用しやすくします。再利用できるように、空白の算出式を書き換えていく過程を解説します。
第1回 clamp()とvwを利用した伸び縮みする空白
レスポンシブなウェブサイトを作るときに、セクションやブロックの空白を調整するというのがよくあります。今回はメディアクエリーを使わずに、clamp()とvwを使った調整方法を紹介します。