- 前編 さまざまな余白の種類
HTML/CSSを実装していて、デザイナーからの「余白」の指示に疑問を感じたことはないでしょうか。このシリーズでは、普段疑問に思いがちな余白について理解を深めます。まずは、余白の効果について分類してみましょう。
- 要素間の空白を空ける際の手法
CSS GridやFlexboxで使えるgapプロパティについて、それ以前の方法と比べるとどのような違いがあるのか、どのように利用できるのかを解説します。
- 第3回 自動配置と余白取り
方眼状のグリッドとグリッドアイテムのサイズをいちいち考えるのは面倒です。サイズを合わせながら自動で配置したり、均一に余白を取る指定などを解説します。
- 第2回 子要素の余白を調整するmargin-trim
子要素の余白を調整するmargin-trimプロパティについて解説します。コンポーネントを組み合わせて作るウェブアプリやウェブサイトでは、強力なレイアウト支援手段となるでしょう。
- 第2回 伸び縮みするブレークポイントで共通化する
clamp()、vw、calc()で作った伸び縮みする空白を書き換え、ブレークポイントを再利用しやすくします。再利用できるように、空白の算出式を書き換えていく過程を解説します。
特集 適切な余白を実装して、わかりやすい画面を作る 全5記事
正しく余白を使えば、罫線などに頼ることなく情報を整理した画面が作れます。デザイナーが余白に込めた意図を理解して、最適な実装するうえで知っておきたい記事を集めました。