HTML/CSSのグリッドレイアウト(グリッドデザイン)について

LinuCエヴァンジェリストの鯨井貴博@opensourcetechです。

HTML/CSSにおけるグリッドレイアウトに関するメモです。
いままであまり気にしたことがなかったのですが、
シンプルな例を用いて理解しやすくしてみました。

まず、完成形のHTML/CSSを使ったコンテンツですが、以下となります。
f:id:opensourcetech:20200813111516p:plain
グリッドレイアウトを使って、4つの領域を作成した単純なものです。

その内容ですが、HTML(grid.html)は以下。
https://github.com/kujiraitakahiro/html5/blob/master/grid.html

<!DOCTYPE html>
<html>
<head>
<title>Grid layout test</title>
<link rel="stylesheet" type="text/css" href="./grid.css">
</head>
<body>
  <div class="container">
    <header class="header"><strong>header</strong></header>
    <nav class="nav"><b>nav</b></nav>
    <main class="main"><i>main</i></main>
    <footer class="footer">footer</footer>
  </div>
</body>
</html>

CSS(grid.css)は以下。
https://github.com/kujiraitakahiro/html5/blob/master/grid.css

.container {
  display: grid; /* グリッドレイアウトを使うという宣言 */
  grid-template-columns: 100px 1fr; /* 1列目の幅 残り全ての幅 */
  grid-template-rows: 100px 200px 100px; /* 1行目の高さ 2行目の高さ 3行目の高さ */
}
.header {
  background-color: green; /* headerの背景色 */
  grid-column: 1 / 3; /* 列番号1から3を使う */
  grid-row: 1 / 2; /* 行番号1から2を使う */
}
.nav{
  background-color: gold; /* navの背景色 */
  grid-column: 1 / 2; /* 列番号1から2を使う */
  grid-row: 2 / 3; /* 行番号2から3を使う */
}
.main {
  background-color: orange; /* mainの背景色 */
  grid-column: 2 / 3; /* 列番号2から3を使う */
  grid-row: 2 / 3; /* 行番号2から3を使う */
}
.footer {
  background-color: blue; /* footerの背景色 */
  grid-column: 1 / 3; /* 列番号1から3を使う */
  grid-row: 3 / 4; /* 行番号3から4を使う */

上記CSSではコメントに何をしているか記載してますが、図示すると以下のようになります。
f:id:opensourcetech:20200813113657p:plain

実際のウェブサイトをデザインする場合、
メディアクエリを使ってスマホ・PCモニターなどのメディアタイプや、ブラウザの横幅などの条件を元に、CSSを切り替えて動作させます。
メディアクエリの使用 - CSS: カスケーディングスタイルシート | MDN
なので、
①コンテンツ内容(HTML)の作成 ②ユーザ毎(メディアクエリ)のCSSの作成 ※どのように表示させるかというデザインに基づく
という順で進めていけばいいですね。

Opensourcetechブログ

OpensourcetechによるNGINX/Kubernetes/Zabbix/Neo4j/Linuxなどオープンソース技術に関するブログです。

HTML/CSSのグリッドレイアウト(グリッドデザイン)について