目次
今日はレスポンシブウェブデザインの基礎について書いていきたいと思います。
まずはレスポンシブウェブデザインの意味について。
レスポンシブウェブデザインとは、ひとつのHTMLでＰＣ、タブレット、スマートフォンなどの様々なデバイスに対応できるウェブサイトの作り方をいいます。
主にCSSで調整をしていきます。一番簡単な方法は@media(){}を利用する方法です。
これは、画面のサイズを指定して、画面のサイズが○○以下、以上であればこのスタイルシートを適用すると指定できるプロパティです。○○は()の中に入れます。(○○をブレイクポイントという)今回も実際の例を挙げて説明してみます。
例）パソコンで閲覧する場合は図1のように表示させたいが、スマートフォンで表示させる場合は、図2のように表示させたい。
図1
図2
まず、図1と図2は「boxの並列、分割について」の記事で使ったものと同じものです。
768ｐｘ(iPadの画面)をブレークポイントに設定したいと思います。つまり、iPad以上の画面のサイズを持ったデバイスで見ると図1のように表示されるという事です。
CSS
@media(min-width: 768px){
.X:after {
content: "";
display: block;
clear: both;
}
box2 {
float: left;
width: 50%;
}
box3{
float: left;
width: 50%;
}
}
と記述します。これで768ｐｘ以上ではこの大括弧内のＣＳＳが適用されます。
一番最後の行の}は、@mediaの閉括弧です。
また、768px以下の時のために図2のシンプルなコードを通常通り書いておけばその通り表示されます。
ここで気を付けなければいけないことは、box1、box4はCSSにて特に記述する必要がないことです。
便宜上上のふたつの画像には色や名前をつけてわかりやすくしていますがbox2やbox3に色を指定していないように、box1やbox4にも特に色などを指定しない限りＣＳＳには何もかく必要がありません。
また、ある範囲からある範囲までを指定したい場合には
@media(min-width: ○○px)and(max-width: ○○px)と記述
します。
タブレットの画面用の記述などにつかえますね。(ＰＣとスマホの中間のサイズ)
ウェブページを作成する際には様々なデバイスで閲覧される事、また様々な解像度のもので閲覧される事を念頭に置かなければいけません。
そこで意識すべきことは「画面の大きさ(スクリーンの物理的大きさ) 」と「解像度(画素数)」です。
自分のパソコンで折角かっこいいデザインのページを作っても他のパソコン、あるいはスマホで観たら「…」ということもあります。
それはなぜか？？
例えば、画面の大きさが同じでそれぞれ画素数(何個の画素が縦横に配列されているか)が異なるパソコンが一台ずつあるとき、
画素数が大きいパソコンでは同じ画面を閲覧しても、小さく表示されます。
画面がより小さく区切られているからです。
だから一番に意識しなければならないのは、画面のサイズよりも画素数ですね。
次に画面のサイズ、、、例えば、いくら高性能で解像度の高いスマートフォンでも大きな画面のパソコンに解像度で勝ることは難しいです。
物理的に画素を敷き詰められるスペースがかなり制限されているからです。
そう考えると、
スマートフォン、タブレット、パソコンとまずは三つに分けてそれぞれのサイズをイメージしてデザインを考えて、それぞれ最も解像度がやや低い場合を想定して作るのがよいでしょう。
解像度の高いパソコンで見た時に小さく表示される分には拡大をすればいいですが、低いパソコンで見た時にコンテンツがはみ出してしまっていたら台無しです。
