【初心者向け】レスポンシブデザインについて
【初心者向け】レスポンシブデザインについて
レスポンシブでサイトを制作したい！
今やWeb制作をする際には当たり前になっているレスポンシブ。
出力するデバイスによって解像度が違うので、場合に応じてCSSの変更が必要となります。
今回はメディアクエリを利用したレスポンシブデザインにする方法を紹介します。
まずはこれがないと始まらない
それは、ビューポート設定です。
解説は下の方でするのでまずはおおまかな流れから。
１.まず<head>内に以下の記述をする
<meta name="viewport" content="width=device-width, initial-scale=1">
２.次にCSSに以下の記述を書きます。
@media screen and (min-width: 979px) {
/*最低横幅が979pxの場合(PCとか)*/
}
@media only screen and (min-width: 768px) and (max-width: 978px) {
/*最高横幅が978px以下で最低横幅が768以上の場合(タブレットとか)*/
}
@media screen and (max-width: 765px) {
/*最高横幅が765pxの場合(スマホとか)*/
}
３.CSSを読み込む
<link href="xxx.css" rel="stylesheet" type="text/css">
これで基本的な設定は終わりとなります。
解説
では１からなるべく詳しく説明していきましょう。
<meta name="viewport" content="width=device-width, initial-scale=1">
これは何を宣言しているかというと、ビューポートを宣言しています。
ビューポートって何？簡単に言うとデバイスの表示領域です。
それぞれの説明を入れておきます。
name="viewport"
これはビューポートですよという宣言
content="width=device-width", initial-scale=1"
横幅は現在の出力端末の横幅で倍率は×１（つまり等倍表示）ですよ
ってことを宣言しています。
もう魔法の言葉ってことで無視してコピペしちゃいなよ(きちんと理解しましょう)
次に、２.CSSの内容です。
CSSの中身のコメントに書いてある通りですが、
メディア(出力端末)の現在の横幅を基準にCSSが反映されますという意味です。
このメディアクエリはリアルタイムに反映してくれます。
javascriptやjQuery一切不要です。
CSSの読み込みは２パターン
ひとつはいつも通り普通にCSSを呼び出す方法。(省略します)
ふたつ目はメディアクエリで分けた数それぞれCSSを作成し、読み込むという方法もあります。
このページの例で言えば３つにわけてますからCSSファイルは３つになります。
３つ分書くわけですから、当然CSSソースは長くなります。
長くなると可読性が低くなり、どこに何を書いてる？ってなることもしばしば。
なのでそれぞれにCSSファイルを作成し読み込むという方法があります。
このような形で読み込みます。
（2020年6月25日現在：最近この形で読み込んでいるのはあまり見かけなくなりました。）
<link rel="stylesheet" media="(min-width:979px)" href="xxx.css">/*パソコン*/ <link rel="stylesheet" media="(min-width:768px) and (max-width:978px)" href="xxx.css">/*タブレット*/ <link rel="stylesheet" media="(max-width:767px)" href="xxx.css">/*スマホ*/
注目すべきは media というところ、もうだいたい勘づいてはいるかと思いますが。
ここでも最高または最低の横幅で読み込んであげるということです。
CSSはPCのものを再利用
メディアクエリでwidth毎に切り分けたのですが、肝心の中身はどうするのか？
まずはいつも通りPC版をコーディング済みとします。
そのCSSをまずは一旦そのままコピペします。
再利用できるものは削除します。
例えば、
color background
などはそのまま再利用することの多いCSSプロパティです。
逆に、
width height float position margin padding
などは初期値で上書き、または新たに書き直すということ多いCSSプロパティです。
それでは始めましょう。
まずは横スクロールを無くす所から
widthは基本的には100%にしていきます。
左右にmarginがある場合は0もしくはautoにして打ち消します。
paddingがある箇所はbox-sizing:border-box;とし、全てwidthの中に収めてしまいます。
imgがwidthをはみ出る場合があります。
その場合はimgにもwidth:100%;をつけます。
その際に忘れてはならないのが、height:auto;です。
横が縮んで縦方向に伸びるということを防ぐためです。
floatはnone、postionはstaticで初期化
こうすることで横並びにしていた場合は回り込みが解除され、縦並びになります。
tableはtr,th,tdにwidth:100%,display:block;
お問い合わせや会社概要にtableを利用していた場合。
画面に押しつぶされるようにテーブルが縮み最終的にははみ出します。
見出しに記述した通り、
tr,th,tdにwidth:100%,display:block;
とすると、tableが横並びになってくれます。
まとめ
結構簡素化しましたが大枠はこのような形になります。
ちなみにスマホの解像度は当然機種によっては違います、今回適当に767としてますが、実際の解像度はもっと小さくなります。
準備しておくと役に立つCSSをもう少しだけ紹介。
display:none;
これはその要素は表示させないってことです。
imgで、バナー関係は画像の文字の大きさは変更出来ないので、
PC用のバナー、SP用のバナーと二つ作っておき、それぞれで切り替えるということを行ってあげると良いですね。
他にも<br>にもclass名を付与し、PCの改行をSPでは無くすということにも使えます。
小難しいですがメディアクエリについて詳しく知りたい方はこちらをどうぞ↓
Mozilla Developer Network
https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Media_queries
Google Developers
https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=ja