メディアクエリとは？
まず、「メディアクエリ」という言葉を知っていますか？
以前のWebはPCで見ることが前提でしたが、今はタブレットやスマホといったものが出てきているので、様々な媒体でしようされます。
そのため、メディア・タイプを拡張し”媒体の特性”まで判断できるようにしたのがメディアクエリです。
メディアクエリの書き方
2通りあるのでやりやすい方でやってみてください。。
スタイルシートに指定する場合
必ず、「大きい→小さい」か「小さい→大きい」の順番通りに指定するようにしましょう。
/*
@media以外の所は全てのサイズで読み込まれます。
*/
p {
color: red;
}
@media screen and (min-width:480px) {
/* 画面サイズが480pxからはここを読み込む */
p { color:#ededed;}
}
@media screen and (min-width:768px) and ( max-width:1024px) {
/* 画面サイズが768pxから1024pxまではここを読み込む */
p {}
}
@media screen and (min-width:1024px) {
/* 画面サイズが1024pxからはここを読み込む */
}
link要素として指定する場合
この方法はhtmlのheadタグの中に記述する方法です。従来のCSSファイルを読み込む方法と違いがありません。
<head>
<link rel="stylesheet" href="style.css" media="screen and (max-width:480px)">
中略
</head>
グリッドシステムとは？
レイアウトを行う際、画面上に架空の縦横線をガイドラインとして引き、そのブロックごとに文字や図版を配置し、無駄なくスッキリした画面を作る手法。
指定する数値の単位に「px」以外に「fr」という単位も使います。
指定したものに余白を可変幅で適用させてくれます。
基本的な使い方
親要素に以下を記述することで、列・幅を設定できます。
grid-template-rowsは各行の幅をしているもので、grid-template-columnsは各列の高さを表しています。
body {
/* これは絶対記述しないといけないもの */
display: grid;
/* 3行の均等な幅に設定されている */
grid-template-rows: auto auto auto;
/* 可変幅の列、700pxの列、可変幅の列と設定されている */
grid-template-columns: 1fr 700px 1fr;
}
※repeat()記法を使うことで、トラックのすべてまたは一部を繰り返し表記することができます。
この記法では、「auto-fill」と「auto-fit」という値が使えます。簡単にいうと、、
・auto-fillでは、親要素にスペースが余る場合、空のグリッドが作られます
・auto-fitでは、親要素にスペースが余る場合、グリッド・アイテムの幅が変わってスペースが埋められます
body {
display: grid;
/* repeatで書くとこうなる */
grid-template-rows: repeat(3, auto);
/* auto-fillの場合 */
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
/* auto-fitの場合 */
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
使えるグリッドシステムの知識集
gapプロパティ
指定した分、隙間をあけることが出来る。
body {
display: grid;
/* 視認性を高めるために間隔を追加 */
grid-gap: 10px;
}
grid-auto-rows/grid-auto-columns
サイズリストでは不明確なグリッドトラックの縦方向のサイズを指定する際に使用します。
つまり、行や列が何行かが明確でないときに使います。
body {
display: grid;
/* 100pxごとに自動で行を設定してくれる */
grid-auto-rows: 100px;
/* 100pxごとに自動で幅を設定してくれる */
grid-auto-columns: 100px;
}
ラインの番号で指定する
grid-row: アイテムが占める行のラインの番号をスラッシュ区切りで指定する
grid-column: アイテムが占める列のラインの番号をスラッシュ区切りで指定する
.box1 {
/* 左から1〜３行を占める */
grid-row: 1 / 3;
/* 左上から1〜２列を占める */
grid-column: 1 / 2;
background: #f88;
}
.box2 {
/* 左から1〜2行を占める */
grid-row: 1 / 2;
/* 左上から2〜3列を占める */
grid-column: 2 / 3;
background: #8f8;
}
grid-auto-flow
グリッドアイテムを並べる方向を row または column で指定します。dense を指定すると、空きスペースをなるべく埋めるように配置します。
.grid-container-row {
display: grid;
grid-auto-flow: row;
}
.grid-container-column {
display: grid;
grid-auto-flow: column dense;
}
grid-template-area
グリッドで区切られた領域に名前をつけます。
body {
display: grid;
grid-template-areas:
"a a a"
"b c c"
"b c c";
}
.box1 {
background-color: red;
grid-area: a;
}
.box2 {
background-color: blue;
grid-area: b;
}
.box3 {
background-color: green;
grid-area: c;
}