grid templateっていうWebデザインのCSSレイアウトで良いのがあるらしい -Terra Sea-

Grid templateっていうWebデザインのCSSレイアウトで良いのがあるらしい

更新：2020/08/07

はじめに

何やらWebサイトのデザインを決めるCSSにて、
レイアウトを決めるときに便利なものがあったので、まとめてみました。

•CSSとは
•実態
•ソースの全貌
•grid templateの書き方
•おわりに

CSSとは

そもそもCSSっていうのは、
所謂Webサイトの色、レイアウトなどデザインを決めるためのモノとなっています。

今回はそのCSSのうち、レイアウトの部分でかなりいいもの見つけたので、
まとめてみました。

実態

まず、今回例として挙げて表示させたいコンテンツは
ヘッダー、メインコンテンツ欄を2つ、サイドナビ、フッターとします。
それをこの様に配置します。

まぁ一般的に2カラムレイアウトと呼ばれていて、
左側にメインのコンテンツ2つがあり、
右側にナビゲーションがあるようなモノにします。
各項目の大きさはこの様な感じ。

ページ幅	900px
contents幅	700px
sidenavi幅	195px
header,footer高さ	100px
contents1,2高さ	200px
sidenavi高さ	400px

各項目ごとの間隔は5pxにしています。
HTMLの方はこの様な感じにします。

<body>
	<header>
		Header
	</header>    	
	<div class="sidenavi">
		SideNavi
	</div>
	<div class="contents1">
		Contents1
	</div>	
	<div class="contents2">
		Contents2
	</div>
	<footer>
		Footer
	</footer>
</body>

そして2カラムレイアウトのCSSですが、
一般的に使われており、標準(?)のfloatでやるやり方と
今回のメインであるgrid templateを使ったもので比較していきます。
まずは出来上がったページを見てみましょう(PC推奨)
floatのバージョン
grid templateのバージョン

見ていただくと分かるかと思いますが、
見た目的には何も変わりないかと思います。

ソースの全貌

ですが、内部的なソースは結構違っています。
floatで行った方のCSS

body{
	width: 900px;
	margin:5px auto ;
}				
header{
	border: solid 1px black;
	height: 98px;
	margin-bottom: 5px;
}				
.contents1{
	border: solid 1px black;
	float:left;
	width: 698px;
	height: 198px;
}				
.contents2{
	border: solid 1px black;
	float: left;
	width: 698px;
	height: 198px;
	margin-bottom:5px;
}				
.sidenavi{
	border: solid 1px black;
	float: right;
	height: 398px;
	width: 193px;
} 				
footer{
	clear: both;
	border: solid 1px black;
	height: 98px;
}

grid-templateで行った方のCSS

body{
	display: grid;
	grid-template:
		"... ......... ...... ...... ..." 5px
		"...  header   header header ..." 100px
		"... ......... ...... ...... ..." 5px
		"... contents1 ......  side  ..." 200px
		"... contents2 ......  side  ..." 200px
		"... ......... ...... ...... ..." 5px
		"...  footer   footer footer ..." 100px
		"... ......... ...... ...... ..." 5px
		/auto  700px    5px   195px  auto ;
		margin: 0 auto;
}
header{
	grid-area: header;
	border: solid 1px black;
}
.contents1{
	grid-area:contents1;
	border: solid 1px black;
}
.contents2{
	grid-area:contents2;
	border: solid 1px black;
}
.sidenavi{
	grid-area:side;
	border: solid 1px black;
}
footer{
	grid-area:footer;
	border: solid 1px black;
}

といった感じになっています。
大きく違うのが分かると思います。

(※floatの方は幅や高さのピクセル指定を一部仕様上border分を考慮して設定しています。)

大きな違いはgrid-templateの方にある

body{
display: grid;
grid-template:
	"... ......... ...... ...... ..." 5px
	"...  header   header header ..." 100px
	"... ......... ...... ...... ..." 5px
	"... contents1 ......  side  ..." 200px
	"... contents2 ......  side  ..." 200px
	"... ......... ...... ...... ..." 5px
	"...  footer   footer footer ..." 100px
	"... ......... ...... ...... ..." 5px
	/auto  700px    5px   195px  auto ;
	margin: 0 auto;
}

の部分でしょうか。
かなり視覚的には良いかと思います。

grid templateの書き方

気になるgrid templateの書き方ですが、
通常のHTMLにCSSのクラスを指定して、
指定したクラス内にて、

header{
	grid-area: header;
}
.contents1{
	grid-area:contents1;
}
.contents2{
	grid-area:contents2;
}

この様に、"grid-area:任意の名前"を指定します。
そうしたら、そのクラスが属している大枠の"body"などに、
"display:grid;"と"grid-template:...."と記述します。

body{
	display: grid;
	grid-template:
	"... ......... ...... ...... ..." 5px
	"...  header   header header ..." 100px
	"... ......... ...... ...... ..." 5px
	"... contents1 ......  side  ..." 200px
	"... contents2 ......  side  ..." 200px
	"... ......... ...... ...... ..." 5px
	"...  footer   footer footer ..." 100px
	"... ......... ...... ...... ..." 5px
	/auto  700px    5px   195px  auto ;
}

あとは上記の様に、二次元配列みたいにして記述するだけです。
上記のCSSみたく点々を書く必要性はありませんが、
各コンテンツ毎に余白を持たせたい場合等あると思うので、
点々を記述することをオススメします

記述したgrid-templateの各行の右側に数値を設定することでheight(高さ)
最終行後に一行追加し、数値をコンテンツ分記述することで、width(幅)を設定することもできます。

もちろん、最近では必須になりつつある、
レスポンシブデザインにも対応させることができます。

body{
	display: grid;
	grid-template:
	"... .........  ..." 5px
	"...  header    ..." 100px
	"... .........  ..." 5px
	"... contents1  ..." 200px
	"... contents2  ..." 200px
	"... .........  ..." 5px
	"...  footer    ..." 100px
	"... .........  ..." 5px
	/auto   80%    auto ;
}

の様にして、特定の部分を記述しないことで、
CSSの各クラスに"display:none;"の記述もしなくて済むのでラクかと思われます。

この様な感じでgrid templateは視認性も良いですし、
レスポンシブデザイン適用時とかに、小回りが利きますので
特に、floatに絶対にしなければ行けない時以外は
grid templateをオススメします。

おわりに

足早にfloatとgrid teplateの比較と紹介をさせてもらいましたが、
いかがでしたしょうか。
もし、何かの機会にCSSでレイアウトをいじることがあれば、
ぜひ思い出してみてくださいね(?)

アダルトサイトで良く出るアレを作りたい！

TOPページに戻る

Twitter @Terra__Sea

Tweets by Terra__Sea

Grid templateっていうWebデザインのCSSレイアウトで 良いのがあるらしい

Grid templateっていうWebデザインのCSSレイアウトで良いのがあるらしい