メディアクエリとは
CSSの仕様の1つで、表示された画面の大きさによって、見栄えを切り替えられる機能のこと。
それによって、レスポンシブサイトを作ることが出来ます。
レスポンシブサイトとは
PCだけじゃなく、スマホでもタブレットでも綺麗に表示されるデザインですね。
ちなみに、今から12年前（今現在2022年）自分の周りは、全員ガラケーでした。（笑）
9年前、自分の周りは、自分以外全員スマホでした。（苦笑）
その３年間で、スマホが爆発的に普及したってことですね。
検索数でも、数年前にスマホの方がPCより多くなった様です。
今やスマホでも綺麗に表示されて当たり前という時代。
そのあたりも意識して、やらざるを得ないという訳です。
サイトの構成を考えよう
カラムとは
columnで、縦の列という意味です。
ちなみに、このサイトは右側3分の1に検索やカテゴリーを、左側3分の2に本記事を配置している2カラムの構成です。
ちなみに、横の列はロウ（row）と言います。
ブレイクポイント768pxの2カラムの簡単なレスポンシブサイトの作り方
画面サイズが768px以上の時のデザイン
画面サイズが767px以下の時のデザイン
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>DEMO</title>
<meta name="description" content="実際にコードを書くことで、デザインや動きを確認するためのデモサイトです。">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<!-- ヘッダー -->
<header>
</header>
<!-- メイン -->
<main>
</main>
<!-- サイドバー -->
<aside>
</aside>
<!-- フッター -->
<footer>
</footer>
</div>
</body>
</html> css
@charset "UTF-8";
body {
margin: 0;
}
/* 画面サイズ(768px~) */
@media screen and (min-width: 768px) {
.container {
display: grid; /* グリッドコンテナを作る */
width: 100%;
height: 100vh;
grid-template-rows: 100px 1fr 50px;
grid-template-columns: 3fr 1fr;
grid-template-areas: 'header header'
'main sidebar'
'footer footer';
}
}
/* 画面サイズ(~767px) */
@media screen and (max-width: 767px) {
.container {
display: grid; /* グリッドコンテナを作る */
width: 100%;
height: 100vh;
grid-template-rows: 50px 1fr 1fr 50px;
grid-template-columns: 1fr;
grid-template-areas: 'header'
'main'
'sidebar'
'footer';
}
}
/* ヘッダー */
header {
grid-area: header;
background-color: #fcc993;
}
/* メイン */
main {
grid-area: main;
background-color: #ffff93;
}
/* サイドバー */
aside {
grid-area: sidebar;
background-color: #93ffc9;
}
/* フッター */
footer {
grid-area: footer;
background-color: #c9ff93;
}cssのbody {margin: 0;}は、次の記事で説明します。
先日cssファイルに、body {margin: 0;}を書き込みました。 これを書き込まず、リセットcssも記載していなければ、Google Chromeブラウザの上下左右に白い隙間ができていると思います。 これを消していきます。 […]
@media screen and (min-width: 768px) {}の部分は、画面サイズが768px以上の時のスタイルという意味です。
@media screen and (max-width: 767px) {}の部分は、画面サイズが767px以下の時のスタイルという意味です。
gridは、この表のような書き方が、最も基礎的なものですね。
他にも書き方がありますし、大変便利な使い方もあります。
こちらのサイトが、その辺りをを詳しく説明してくれています。
一番分かりやすいCSS Grid Layoutの使い方ガイド | Web Design Trends
CSS Gridを使ったレスポンシブ対応の基本レイアウト | Webクリエイターボックス
さいごに
なるべく絶対単位pxよりも、%などの相対単位で書いていきたいですね。
あと、注意点が1つあります。
codeを変えても、デザインに反映されていない場合は、
これだけ要注意です。
今日は、ありがとうございました。では、また！