実践で学ぶRuby on rails 〜仮説千本ノック〜

プログラマーとして独立するため日々スキルアップに励んでいます。優れたプログラマは仮説を立てるのがうまい。そこを目指して仮説を立てては検証する日々です!!

paddingの設定(ヘッダー編)

□やりたいこと

ヘッダー内ナビゲーションとウィンドウ枠のパディングを次の条件を満たすよう設定したい。

 

【条件】

・ウィンドウの幅に関わらず、必ずヘッダーの左右に60pxのパディングを確保

・ウィンドウの幅が最も広い時、60pxしかないと、ナビゲーションエリアが横に伸びきって見栄えが悪いので、伸びきらないようwidthに上限を設定する。(結果、ナビエリア-ウィンドウ枠間にマージンが発生)

 

f:id:Taka0--0:20200704200831j:plain



 

【解決方法】

・最低限の60pxを確保するために、ヘッダー左右に60pxでパディングを設定

・ナビゲーションエリアにmax-widthを設定する。