メヘンニミン

たくさんの言語に触れたい.走り書きで見る整理ブログです.

あたりまえのレスポンシブWebデザイン(基本理解集)

Webやりたいぜー向けのお話です.

重要性とか

Webはもう,大画面デスクトップPCで悠々と見るためだけのものではない・・・

という“世はスマホタブレット時代”の話はよく聞きます.仕事の休憩に/電車の中で/歩きながら/家のベットで行えるネットサーフィンの海は,とっくに机上からはみ出した大洋規模と化していたのです.

スマホでのウェブサイト閲覧頻度はPCの約2倍ーリビジェン調査 | 「マイナビウーマン」
2014年最新スマートフォン市場動向 〜 世界出荷ベースでスマホは13億台、PCの3倍を超える [in the looop]

さらにいえば,巨大化を進めるiPhoneに,サイズがバラバラなAndroid端末.OSも画面幅も異なる様々な端末があちらこちらで動作する現況を見てみますと,どんな環境にも素敵なデザインで応戦する“世はレスポンシブデザイン時代”という導入もわかってもらえると思います.

レスポンシブ = CSS x 横幅

“多種の環境に対応する”という意味ではいくつか方法がありますが,.htaccessをいじるのが楽です

.htaccessでスマートフォンサイトをアンドロイドやiPhoneで判別表示

上記は,その環境ごとの専用ページを1つずつ用意しておく手法です.あとはサーバサイドで「あ,スマホですか?ならこっちのページに飛ばしやっす!」と仕分けることで,ページの移動を行います.パソコンとスマホそれぞれで見た時に全く異なったコンテンツを表示する場合なら,こちらがやりやすいです.


一方で,環境に合わせてコンテンツのデザインを変更するのみで対処できる場合は,レスポンシブでやっちゃいましょう.ここでいうデザインとはCSSのことであり,ここでいう環境とは,実は横幅です.そう,仕組みは至って簡単で,重要なのは,

【画面の横幅によって適用するCSSを変更する】

という理解です.たったこれだけ!!

/* 全てのサイズに適用 */
p{
  color: #000;
  font-size: 12pt;
}
/* 横幅が640px以上979px以下の場合に適用 */
@media screen and (min-width: 640px) and (max-width: 979px){
  p{
    color: #f00;
    font-size: 80%;
  }
}
/* 横幅が639px以下の場合に適用 */
@media screen and (max-width: 639px){
  p{
    font-size: 60%;
    text-align: center;
  }
}

f:id:enlosph:20141115171603j:plain
[PCブラウザの横幅を変更すると動的にCSSが変更されます]


“多種の環境に対応する”中でWebデザインにおける大きな課題とは,狭い画面サイズで見る表現の限界でした.我々,長い縦幅(height)についてはスクロールする習慣がありますが,横幅(width)の長いWebページなんて大嫌いでしょう.一般にWebデザインとは,横幅に重きを置いています.デスクトップと比較して「小さな画面」と言われていた昔のノートパソコンが主流の時代では,解像度SVGA(横幅800px)を前提にレイアウトを決定するのがふつうでした.現在,でかい!と言われているiPhone 6 Plusでもそのブラウザ解像度の縦持ち横幅は414pxです.レスポンシブとは,“多種の横幅に対応する”ことなのです.

以上2つの手法の比較は,こちらがわかりやすいです.

レスポンシブWebデザインのメリット・デメリットをわかりやすく!解説|Tips*Blog|株式会社コプロシステム


当然ですが,スマホタブレットの横幅だけではなくPCブラウザの様々なウインドウサイズにも対応することも,レスポンシブWebデザインの魅力のひとつです.そこで現在主流のCSSフレームワークの多くは,可変レイアウトへの考慮が非常に深いです(というより,このことが導入メリットの1つに挙げられるほど!).

CSSフレームワークまとめ - Qiita

つまり以上を導入し,任意のクラスを指定するだけでパ パ ン っ ! とレスポンシブデザインを実現できるわけですが,CSSで記述する分には自前でも十分実装可能です.レスポンシブの基本を理解するため,次にどんな工夫がなされているかをまとめてみます.

レスポンシブの基本理解

理解1 - サイズはどうする?

スマートフォンでモバイル非対応のWebページを見ると,縮小されて表示されるのはご存知ですよね.ユーザはそこからピンチイン・ピンチアウト(拡大・縮小)を駆使してなんとか閲覧します.まずはこの対処からスタートしましょう.

<meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1" />

<head></head>部分に以上を追加することで拡大・縮小を禁止し,端末の横幅に合うようにCSSが切り替わります.

次に,横幅によりCSSの適用対象を変更するというコードは,上記に示しました.
では,望ましい横幅の具体的なサイズとは?

Media Queries は基本こう使う事に決めた。 | Webデザイナーの備忘録

あまり理想はないらしい

また,用意するレイアウト数についても多くを決める必要はありません.基本は2つ(PC・タブレット用/スマホ用)ないしは3つ(PC用/タブレット用/スマホ用)辺りですが,Bootstrapでは4つのサイズを用意していますね.

理解2 - パーセント指定を使え!

width: 50%;

このような記述は,CSSでよく推奨される相対的な指定のしかたです.横幅をぐい~んと拡大するとコンテンツも広がってくれる仕組みはリキッドデザインなどと呼ばれていますが,例えば親要素の横幅に対し上記を適用した要素は常に横幅半分を維持してくれます.

リキッドレイアウトのCSSをマスターする(+レスポンシブウェブデザインへの適用)|2.IDEA

フォントサイズの場合は,%やem,remという単位を使います.これらの基準は,親要素・ルート要素のフォントサイズ(ない場合はブラウザのデフォルトサイズ)です.それでも調整が難しいと思うならば,以下のJQueryプラグインを利用します.

[JS]親要素のサイズに合わせてフォントサイズをフィットさせるスクリプト -FitText | コリス

狭すぎ・広すぎについても制御できますよ.

max-width: 900px; //これ以上大きくしない
min-width: 60px; //これ以上小さくしない


ところで,横並びのコンテンツの横幅を合計100%にしたい時,また横幅いっぱいにコンテンツを広げたい時に,何だか調子がおかしいぞってことがよくあります

FFBlog Webサイトの横幅100%表示は、実は結構難しい | 株式会社KSK フレックス・ファームビジネスユニット
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life

いつものことですが,marginやpaddingの調整はご計画的に.なお,彼らも相対値指定が推奨されています.

理解3 - 表示も,非表示も,あるんだよ

デザインを変えるだけがレスポンシブではないです.

CSSには,表示・非表示を切り替えるコードがありました.

display:none と visibility:hidden の違い | PHP & JavaScript Room

display: inline; //初期値
display: none; //削除

例えば,画面の横幅が狭い時にサイドバーは消しておきましょう,といったことができます.

応用すると,あまりに要素が狭い場合に文字列が改行されてしまう!という場合を対処できることも.

<div>メニュー <br class="hide-phone" />を開く</div>

f:id:enlosph:20141115005203j:plain
[ちょっとムリヤリだけど任意改行]

ただし,要素は非表示であっても読み込みを行うため,スマホで見た時に重くなる可能性に注意です.

理解4 - 狭いテーブルは嫌!

テキスト情報を多く含むテーブル.彼のレスポンシブ化は非常に困難ですが・・・

レスポンシブWebデザインでテーブルを使う時の小技 │ Design Spice

どれかを採用してください.例えば上記「inline-blockとoverflow-xを使う」方法では,行と列をチェンジして,横に長くはみ出した分をスクロールで閲覧することができます.なお,このスクロールバーはスマホブラウザでは表示されないことがあるので,うまく説明するデザインも追加してあげましょう.

理解5 - グリッドデザイン素敵

一瞬でわかるグリッドデザインはこちら.

» グリッド| 縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG

PCのWebブラウザで,横幅をぐりぐり動かして様子を見てみましょう.とどのつまりこれは,小さな要素を横に並べたり,縦に並べたりしてコンテンツ省略を回避するレイアウトです.

グリッドレイアウト採用時に便利なjQueryプラグイン 20 | NxWorld

以上のJQueryプラグインを利用するのもよいですが,ここでは簡単な実装例を示します.

.col_8, .col_6, .col_4, .col_2{
  position: relative;
}
@media screen and (min-width: 639px){
  .col_8, .col_6, .col_4, .col_2{
    float: left;
  }
  .col_8{ width: 66.66666667%; }
  .col_6{ width: 50%; }
  .col_4{ width: 33.33333333%; }
  .col_2{ width: 16.66666667%; }
}
<div class="grid">
  <div class="col_6">A型はせっかち</div>
  <div class="col_4">B型はせっかち</div>
  <div class="col_2">O型はせっかち</div>
</div>

f:id:enlosph:20141115172012j:plain
[小さな画面だと普段の横幅100%のDVI要素に戻る仕組み]

例えば大きな画面では右側についているサイドメニューやサブコンテンツを,小さな画面では下側にもっていくといったレイアウトが可能になります.コンテンツが縦並びになるため,スマホ用のデザインとしては最適です.

「col_12」を100%とした上記の書き方はよく見かけるので,1レイアウトごとに1セット作っておくと便利です.またグリッドデザインでは,各コンテンツの高さが異なる場合は左上を基準に要素がどんどん敷き詰められていきます.こうした自由な回り込みを途中で解除したい場合は,以下の属性をもつ親要素(grid)を複数個設置するか,途中にその属性をもつ要素(clear)を挟むことで解決できます.

.grid, .clear{
  clear: both; /* floatによる回り込みをリセットする */
}

 

おわりに

デザイン的視点などで密に勉強されたい方は,検索するだけでもいっぱい出てきますよ.


CSSは僕自身,きちんと学んだことはないです.繊細な言語ですよね.そこで今,発注している本があります.
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

これでまともな書き方を学んでみようっと.