おきがるみがる

お気軽&身軽にスナップ写真を楽しむ雑記ブログです。はてなブログテーマ Sentenceの配布も行っております。

レスポンシブWebデザインのブレイクポイントとフルードグリッド

最近はひたすらレスポンシブWebデザインの勉強をしています。今日も休みでしたが、コードとにらめっこで1日が終わりましたw

レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL)

レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL)

テキストは菊池崇さんの『レスポンシブWebデザイン』を使っています。必要そうなところだけを拾い読みしつつ、実際にコーディングしてだいぶ理解が進んできました。

2013年の刊行と、少々古いですがフルードグリッドの考えを使えば現代でも十分通用する気がしますね。

ブレイクポイント

レスポンシブWebデザインにおけるブレイクポイントとは、ブラウザの横幅に応じてデザインを変更する際に境界となるポイントです。

パソコンだけでなくスマホやタブレットでネットを楽しむ人が増えており、しかもスマホの方が人口が増えてきている昨今です。

パソコン用のデザインだけでなく、スマホ用のデザインを用意することが喫緊の課題です。むしろスマホ用のデザインにウェイトを置く、モバイルファーストという概念も言われていますね。

そこでブレイクポイントは、

  • スマホ用(デフォルト)
  • タブレット用(min-width: 768px)
  • デスクトップ用(min-width: 1024px)

の3種類の表示ができるように設定します。

そしてスマホ用のデザインから作り始めて、できあがってから差し分をタブレット用とデスクトップ用に追記していきます。

スマホ用のデザインを作る時は横幅320pxを想定します。この大きさはiPhoneのシリーズでよく使われ、数多あるスマホの中でも最小クラスのディスプレイサイズと言えるでしょう。

フルードグリッド(リキッドデザイン)

この作り方だと320〜767pxまでは同じデザインを使うことになります。

最近はスマホも大きめサイズのものがたくさんありますよね。iPhone 6 Plusだと横幅414pxだそうです。

こういった大きなディスプレイのスマホでも320pxの表示だと余白が大きくなります。それに横幅320pxのスマホであっても横向けで表示することもあります。

そういった端末でも画面サイズに合わせて表示されるように、フルードグリッド(リキッドデザイン)を施します。

フルードグリッドとは、各コンテンツの横幅を絶対的数値(px)で記述するのではなく、割合(%)で記述するというものです。

例えばコンテンツ全体の横幅が900pxで、メインカラムが600px、サイドバーが300pxというデザインがあるとします。

これをフルードグリッドで表現するならば、全体の横幅を100%として、メインカラムが66.66%(600px / 900px)、サイドバーが33.33%(300px / 900px)と記述することになります。

こうすることでブラウザの横幅の変化に伴って、この割合に比例してコンテンツが表示されます。これなら横幅という点では、たくさんブレイクポイントを作らなくても済みますね。

タブレットの768〜1023pxに関しても同様にフルードグリッドを使えば、すべてのデバイスの環境に適用することができます。

もうすぐ自作のはてなブログテーマが完成します

ここしばらくはてなブログテーマを自作していますが、レスポンシブWebデザインを施したことによってだいぶ完成が見えてきました。

でもコードを書けば書くほど奥の深さを実感させられますね。そして1つを書き直せば、いたるところが書き直しになったりと……^^;

来月までにテーマを投稿できたらいいな〜って思います。

レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL)

レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL)