Media QueryでHTMLに適用するCSSを切り替えてみる

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

今回は、以下の記事で作成したHTML/CSSをMedia Queryを使って条件によって切り替えてみようとおもいます。
www.opensourcetech.tokyo

ブラウザの幅を変更を切り替え条件として、
header部の背景色を変更するようにしてみます。
f:id:opensourcetech:20200813111516p:plain

方法その1 まずは、HTMLファイル内のlinkを使います。

ブラウザの幅が、0-480px < 480-960px < それ以上と変化することで使用するCSSファイルが変更されます。

<!DOCTYPE html>
<html>
<head>
<title>Grid layout test</title>
<link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="./mq1-1.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 480px) and (max-width: 960px)" href="./mq1-2.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 960px)" href="./mq1-3.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>

https://github.com/kujiraitakahiro/html5/blob/master/media_query1.html
1つ目の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を使う */
}

https://github.com/kujiraitakahiro/html5/blob/master/mq1-1.css

2つ目のCSSファイル。

.container {
  display: grid; /* グリッドレイアウトを使うという宣言 */
  grid-template-columns: 100px 1fr; /* 1列目の幅 残り全ての幅 */
  grid-template-rows: 100px 200px 100px; /* 1行目の高さ 2行目の高さ 3行目の高さ */
}
.header {
  background-color: yellow; /* 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を使う */
}

https://github.com/kujiraitakahiro/html5/blob/master/mq1-2.css

3つ目のCSSファイル。

.container {
  display: grid; /* グリッドレイアウトを使うという宣言 */
  grid-template-columns: 100px 1fr; /* 1列目の幅 残り全ての幅 */
  grid-template-rows: 100px 200px 100px; /* 1行目の高さ 2行目の高さ 3行目の高さ */
}
.header {
  background-color: red; /* 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を使う */
}

https://github.com/kujiraitakahiro/html5/blob/master/mq1-3.css

実際にブラウザの幅を変えると、以下のようにheader部の色が変わります。
f:id:opensourcetech:20200814233505p:plain

方法その2 CSSファイル内で、@mediaを使う方法です。

<!DOCTYPE html>
<html>
<head>
<title>Grid layout test2</title>
<link rel="stylesheet" type="text/css" href="./mq2.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>

https://github.com/kujiraitakahiro/html5/blob/master/media_query2.html
そして、CSSファイル。
@mediaが3カ所ありますが、そこで条件を付けています。

.container {
  display: grid; /* グリッドレイアウトを使うという宣言 */
  grid-template-columns: 100px 1fr; /* 1列目の幅 残り全ての幅 */
  grid-template-rows: 100px 200px 100px; /* 1行目の高さ 2行目の高さ 3行目の高さ */
}
.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を使う */
}
@media screen and (max-width: 480px) {
  .header {
    background-color: lightgreen; /* headerの背景色 */
    grid-column: 1 / 3; /* 行番号1から3を使う */
    grid-row: 1 / 2; /* 列番号1から2を使う */
    }
}
@media screen and (min-width: 480px) and (max-width: 960px) {
  .header {
    background-color: lightyellow; /* headerの背景色 */
    grid-column: 1 / 3; /* 行番号1から3を使う */
    grid-row: 1 / 2; /* 列番号1から2を使う */
    }
}
@media screen and (min-width: 960px) {
  .header {
    background-color: magenta; /* headerの背景色 */
    grid-column: 1 / 3; /* 行番号1から3を使う */
    grid-row: 1 / 2; /* 列番号1から2を使う */
    }
}

結果は同様です。
f:id:opensourcetech:20200814233935p:plain

おわりに
やっていることはどちらの方法も一緒ですが、
CSSを1つのファイルにまとめて管理したい(デメリットとしてはファイルの内容が長くなる)か、通信してくるデバイスなどに合わせてCSSをファイルを分けて管理するか(ファイル数が多くなる)というところでしょうか。

Opensourcetechブログ

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

Media QueryでHTMLに適用するCSSを切り替えてみる