ブルーシュ

IT技術の勉強記録

ホーム > Tips > フロントエンド

よくあるHTML構造とcssのメモ

,

【1】コンテンツが少ないときでもフッターを最下部に表示

コンテンツが少ないときでもフッターを最下部に表示

cssサンプル

body{
	display:grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto;
	row-gap:3rem;
}

こちらのページではdisplay: flexを使っていましたが、display: gridでもフッターを常に最下部に表示させることができます。grid-template-rows: auto 1fr auto;が効いています。
 

【2】コンテンツは固定幅・背景は画面幅100%

例として、固定幅を1280pxとします。
画面幅が1280px以上のときでも、コンテンツ幅は1280pxで固定されて、背景色は画面幅100%で塗られます。
コンテンツは固定幅・背景は画面幅100%

cssサンプル

body, header, main, footer{
	width: 100%;
}header, section, footer{
	padding: 1rem;
}
/*PC*/
@media (min-width: 1280px) {
	header, section, footer{
		padding: 1rem calc(50% - (1280px / 2));
	}
}

ポイントはheader, section, footerpaddingを設定してるところです。
画面幅1280px以上のとき、画面幅から、主となるコンテンツ幅1280pxを引いたものを割る2して、左右の余白幅を計算しています。
それにより、背景色は画面幅いっぱいに塗られますが、テキストは1280pxの中におさまります。

注意

mainにこのpaddingを設定すると、sectionの背景色が画面いっぱいにならないので注意。
※実際にはcssはタグじゃなくclassで指定してね!
 

【3】サイドバーがある場合

サンプルの数字

サイドバーがある場合

cssサンプル

body{
	display:grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto;
	row-gap:3rem;
}header,main,aside,footer{
	width: 100%;
}
/*PC*/
@media (min-width: 1280px) {
	body{
		--mainWidth: 930px;
		--asideWidth: 300px;
		--space: calc(50% - (1280px / 2));
		grid-template-columns: calc(var(--space) + var(--mainWidth)) calc(var(--space) + var(--asideWidth));
		column-gap:50px;
	}
	header, footer{
		grid-column: 1 / -1;
		padding:0 var(--space);
	}main{
		margin-left: auto;
		max-width: var(--mainWidth);
	}aside{
		max-width: var(--asideWidth);
	}
}

ピクセルで指定するとまったくスマートでない気がしますが、シンプルなHTML構造を保っています。
【2】で計算した左右の余白幅は、カスタムプロパティ--spaceに入れました。
 
画面幅が1280px以上になったときには、grid-template-columnsmainは余白幅+930px、asideは余白幅+300pxの割り振りをします。
 
mainは最大幅を指定して、margin-left:auto;することにより、真ん中寄せになります。

よくあるHTML構造とcssのメモ #フロントエンド #ウェブデザイン #ウェブ制作 #WEBデザイン #WEB制作 #css #grid

作者の似顔絵

秋田市在住のプログラマーです。
プログラミングを始めて18年、まだまだ日々勉強。調べたことをブログにまとめていきます。
記事の感想・質問・間違い指摘などはツイッター ( @blooshcompany ) へお願いします。