レスポンシブのためのWebスタイリング【CSSの書き方】
前回、タブレットサイズ向けのメディアクエリーを紹介しました。
次はPCサイズ用のメディアクエリーをご紹介します。
/*幅990px以上に適用されるCSS（PCサイズ以上）*/
@media screen and (min-width:990px){
}ディスプレイサイズが990ピクセル以上でCSSが反映されるようになっています。
@media screen{}でメディアクエリーを発動、and (min-width:990px)を追加することにより990ピクセル以上という縛りを持たせることが出来ます。
前回のタブレットサイズの指定も同じ要領になります。
ここでポイントは幅を一定のサイズ”以上”で指定するということです。
今までの私が設定していたメディアクエリーではページサイズの範囲を指定しておりました。
min-widthで”以上”、max-widthで”以下”という指定方法です。
例えば
@media screen and (min-width:480px) and (max-width:768px) {
}という指定はディスプレイ・サイズが480ピクセル以上768ピクセル以下という指定になります。
このような設定をするとその範囲の中のデザインを範囲毎で考えなければいけません。
サイズによって細かくデザインを変えたい場合は良いのですが、モバイルサイズを最適化させたいだけなら”以上”の設定方法が楽です。
メディアクエリーによってディスプレイサイズで幅サイズを変更
それでは具体的にご紹介するメディアクエリーを使ってディスプレイサイズが480ピクセルから最大で1280ピクセルまでとして設定してみます。
因みに最大のサイズになったら1280ピクセルでサイズ固定し全体が中央で表示するようにします。
まずメディアクエリーを設定していないCSSはメディアクエリーの中で変更しない限り全てのサイズで反映されます。
ユーザビリティを考えるとメディアクエリーを設定していないCSSはエレメントを中心にデザインしてメディアクエリーの範囲の中のCSSは主に余白やレイアウトを中心に記述していきます。
HTMLの中身は以下です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="base.css">
</head>
<body ontouchstart="">
<header>
<h2>ページタイトル</h2>
<nav>
<ul>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>
</nav>
</header>
<div class="eye-catch">
<img src="" alt="">
</div>
<article>
<aside>
<h3>補足見出し</h3>
<p>補足本文</p>
</aside>
<main>
<section>
<h1>重要な見出し</h1>
<p>本文</p>
</section>
<section>
<h1>重要な見出し</h1>
<p>本文</p>
</section>
</main>
</article>
<footer>
<p>Copyright</p>
</footer>
</body>
</html>
これにbase.cssをリンクさせCSSを記述していきます。
最初の記述はこんな感じです。
*{
margin:0;
padding: 0;
box-sizing: border-box;
font-feature-settings: "palt";
-webkit-appearance: none;
}
body,html{
width: 100%;
height: 100%;
}
/*幅768px以上に適用されるCSS（タブレットサイズ以上）*/
@media screen and (min-width:768px){
}
/*幅990px以上に適用されるCSS（PCサイズ以上）*/
@media screen and (min-width:990px){
}幅の変更をしたいタグは<header>と<article>と<footer>にします。
<div class=”eye-catch”>はデザイン上サイズが大きくなっても幅前面にしておきます。
まずディスプレイサイズ480ピクセルから…。最大サイズ1280ピクセルにしましたので何も設定は致しません。
次にタブレットサイズ768ピクセル…。ここもまだ幅の設定は致しません。
次にPCサイズの990ピクセル以上…。ここから設定します。
ただ990ピクセルでしたらまだ、ほったらかしです。
ただ990ピクセル以上だと1280ピクセルが含まれますので990ピクセル以上のメディアクエリー内に設定しておきます。
ディスプレイサイズが1280ピクセル以上になったら<header>と<article>と<footer>の幅を固定させます。
そして1280ピクセルを超えたらその幅を固定してmargiの左右をautoにすることで常に全体が中央に来る設定にします。
/*幅990px以上に適用されるCSS（PCサイズ以上）*/
@media screen and (min-width:990px){
header,article,footer{
width:1280px;
margin-left: auto;
margin-right: auto;
}
}