1つのレイアウトを、複数のボックスに切り分けて実現するレスポンシブの本質とは?

1つのレイアウトを、複数のボックスに切り分けて実現するレスポンシブの本質とは?

本のまとめ

▼読んだ本は?

■HTML5&CSS3デザインブック
■エビスコム (著)

▼レスポンシブコーディングのために前準備すべきメタタグは?

■「viewport」で、ブラウザの画面サイズをデバイスのサイズに合わせた形に
■「initial-scale=1.0」で、スマートフォンを横に倒した時の拡大率をAndoroid・iOSで統一

▼ボックスの一部分のみを横に並べるには?

■できあがりイメージ

■「div」「float」「after」を使う
・「html側」の記述

・「CSS側」の記述

▼PC・スマートフォンでボックスの並びを変更するには?

■出来上がりイメージ

■「@media(メディアクエリ)」を使う
■「float」の「left」を使う
・「html側」の記述

・「CSS側」の記述

▼PC・スマートフォンでボックスの並びと順序を変更するには?

■出来上がりイメージ

■「@media(メディアクエリ)」を使う
■「float」の「left」「right」を使い分ける
・「html側」の記述

・「CSS側」の記述

▼PC・タブレット・スマートフォンでボックスの並びと順序を変更するには?

■出来上がりイメージ

■「@media(メディアクエリ)」を使う
■「float」の「left」「right」を使い分ける
・「html側」の記述

・「CSS側」の記述

思ったこと

PC・スマートフォン・タブレットなどサイズのまったく異なるデバイスでWEBサイトを閲覧するユーザー。そんなユーザーに対して、それぞれ異なるソースコードを用意していたのも過去のこと。今では、レスポンシブと呼ばれる技術を取り入れることで、同じHTMLを利用しながら、レイアウトだけを変更する方法が生み出されています。

レスポンシブにおいて大事なのは、一つのデザインを複数の「かたまり=ボックス」に切り分けること。そして、切り分けたそれぞれのボックスを、cssにおける「メディアクエリ」「float」を用いて、位置変更を切り分けること。

手法として、そんな単純な方法をうまく利用することで、柔軟かつさまざまなユーザーに使える簡単なサイトを作れるって、なかなかすごいすね。

もう数年、最近ずっとレスポンシブ系のサイト構築が続いている中で、改めてレスポンシブの基本を学び直すきっかけになりました。

ありがとうございました!

関連する記事