CSSで"余白を描く"

2024/04/22

エンジニアインターン

今日は上司の久保さんより頂いた、

「お手本サイトの余白を再現する」

という課題をCSSでずっとしていました。

本当に難しいです。

思えば小学校の書道の時間も

「黒いところじゃなくて白いところの形を意識しなさい」

とよく言われていました(あの先生天才だな)

具体的に余白とは

もちろんコンテンツが無い白い部分が

「余白」なわけですが、具体的には

CSSを使って何を調整すればよいのでしょうか？

高さをそろえる
当たり前のことですが、ブラウザの幅を変更すると
一行に収まりきらなくなった文字が改行されます。
するとその下にあったコンテンツは下にずれます。
......
ということがたくさん起こりまくって、サイト幅を
変更するとコンテンツがガタガタとずれていきます。
パソコンではうまく表示されるものの
スマートフォンだとコンテンツ同士が重なっていたり、
ずれてガタガタになっているのを見たことが
1回くらいはあると思います。
大きさを「ちょうどよく」する余白のデザインと言うと普通このあたりを
思い浮かべると思います。同じ文字や画像が
並んでいても、画面パンパンに並んでいたら
「うるさいな」と思いますよね。
逆に小さすぎても読めませんし、目立たせるところと
目立たせないところも分けたい。こういった理想を
数字に落とし込むのは意外と大変です(;^ω^)

とまあこんなところでしょうか。
CSSを用いたデザインは感覚と数字を突き合わせていく作業である気もします。

＊COMMENT＊

芹原　まなみ
更新日：2024-04-22 17:29
＊コメント＊

余白を再現する課題すごくいいですね！レスポンシブが苦手なのでいい訓練になりそうです。私もチャレンジしてみたいです。書道や絵画やデザインもいいバランスの余白があると一層見やすく素敵になりますもんね。余白を使いこなせるようになりたいですー！
余白を再現する課題すごくいいですね！レスポンシブが苦手なのでいい訓練になりそうです。私もチャレンジしてみたいです。
書道や絵画やデザインもいいバランスの余白があると一層見やすく素敵になりますもんね。余白を使いこなせるようになりたいですー！
＊コメント＊
下川　春樹
更新日：2024-04-22 18:12
＊コメント＊

お疲れ様です。結局のところ、デザインもそうですが大事なのは余白ですよね。何もない空間ですが、それで色んなバランスを保っていたりするのが不思議ですよねー。結局余白、みたいなデザインの本があった気がするのでまたググってみて下さい٩( 'ω' )و
お疲れ様です。
結局のところ、デザインもそうですが大事なのは余白ですよね。
何もない空間ですが、それで色んなバランスを保っていたりするのが不思議ですよねー。
結局余白、みたいなデザインの本があった気がするのでまたググってみて下さい٩( 'ω' )و
＊コメント＊
則岡　えり
更新日：2024-04-23 09:28
＊コメント＊

お疲れ様です。昨日、クリエイティブプロダクト部でもちょうど余白についての参考サイトを共有いただいたので、しっかり学んでいきます。一緒にがんばりましょう！
お疲れ様です。
昨日、クリエイティブプロダクト部でもちょうど余白についての参考サイトを共有いただいたので、しっかり学んでいきます。
一緒にがんばりましょう！
＊コメント＊
岡部　ちよ
更新日：2024-04-23 10:03
＊コメント＊

池田さん、お疲れ様です！余白、意識的に考えたことはなかったのですが、無意識に、あるWEBサイトで、ごちゃごちゃして見づらいな...と感じたことはあります＞＜事務業務においても、余白の意識で、相手に良い印象をもっていただけると思いますので、私の業務にも活かしていきます＞＜
池田さん、お疲れ様です！
余白、意識的に考えたことはなかったのですが、
無意識に、あるWEBサイトで、ごちゃごちゃして見づらいな...と感じたことはあります＞＜
事務業務においても、余白の意識で、相手に良い印象をもっていただけると思いますので、
私の業務にも活かしていきます＞＜
＊コメント＊
恩田　かおり
更新日：2024-04-23 11:01
＊コメント＊

習字の先生すごいですね！私も余白を意識して模写してみます。
習字の先生すごいですね！
私も余白を意識して模写してみます。
＊コメント＊