適切な余白を実装して、わかりやすい画面を作る
正しく余白を使えば、罫線などに頼ることなく情報を整理した画面が作れます。デザイナーが余白に込めた意図を理解して、最適な実装するうえで知っておきたい記事を集めました。
さまざまな余白の種類
HTML/CSSを実装していて、デザイナーからの「余白」の指示に疑問を感じたことはないでしょうか。このシリーズでは、普段疑問に思いがちな余白について理解を深めます。まずは、余白の効果について分類してみましょう。
要素間の空白を空ける際の手法
CSS GridやFlexboxで使えるgapプロパティについて、それ以前の方法と比べるとどのような違いがあるのか、どのように利用できるのかを解説します。
自動配置と余白取り
方眼状のグリッドとグリッドアイテムのサイズをいちいち考えるのは面倒です。サイズを合わせながら自動で配置したり、均一に余白を取る指定などを解説します。
子要素の余白を調整するmargin-trim
子要素の余白を調整するmargin-trimプロパティについて解説します。コンポーネントを組み合わせて作るウェブアプリやウェブサイトでは、強力なレイアウト支援手段となるでしょう。
伸び縮みするブレークポイントで共通化する
clamp()、vw、calc()で作った伸び縮みする空白を書き換え、ブレークポイントを再利用しやすくします。再利用できるように、空白の算出式を書き換えていく過程を解説します。
今回のキュレーター
大塚 亜周編集老舗実用系出版社にて、女性誌編集ならびにデジタル事業開発に従事。グローバルデジタルエージェンシーに転職後、コンテンツディレクションと情報設計のスキルを生かして、大手企業のマーケティングを支援する。人事労務SaaS「SmartHR」では、UXライターとしてプロダクト開発に携わる。2023年3月に出版した『ちいさくはじめるデザインシステム』は、著者としてだけでなく、企画・編集も担当。