画面サイズに合わせて
レイアウトが変わるホームページ

新たな潮流:レシポンシブWEB

レシポンシブWEBというのは、1つのWEBページを、パソコンやタブレット・スマホといった画面サイズの異なる端末で、不自由なく閲覧出来るようにする設計技術のことだそうです。
つまり、ホームページに載せる原稿は1つですが、端末の画面サイズによってレイアウトを切り替える仕組みです。

 

レイアウトは、メディアクエリという設定が従来のCSSに加わることで、サイズに合わせてCSSを設定することが可能になります。
このホームページもその仕組みを取り入れてあります。
PCのブラウザで画面サイズを伸縮してみてください。
小さくなると左側のナビゲーションが上下に移動して、狭い画面サイズでも、何となく成立するように作ってあります。
ついでに画像も画面サイズに合わせて伸縮します。

 

<レシポンシブWEBのイメージ画像>

解説画像

タブレットやスマートフォンのサイズに対応して変化するように調整してあります。

 

同じ仕組みをブログシステムでも利用できます。
これまた手前味噌ですが、私のブログに実装してみました。

http://note.skip-design.com/

同じくブラウザを小さくすると左右のレイアウトが前後に移動して狭い画面でも成立するようになっています。
またメニューは上部のボタンに変化すると思います。

 

 最初のホームページブームが起きた15年くらい前は、レイアウトはもっぱらテーブルレイアウトと言って、表組のプログラムルールを利用してレイアウトを行うのがスタンダードでした。その後、主流になったのがCSSというレイアウトスタイル。テーブルに比べてレイアウトの理屈が扱いづらいため、ある程度スキルがある人でないとこれでHPを構築・更新するのは難しくなりました。その代わりWordPressのような、デザイン性も高く更新も簡単なシステムによるHP制作が主流になったように思います。

 これで落ち着いたかと思っていましたが、やっぱり技術ですね。留まることなく、いつの間にか流れていきます。今度は各端末に併せて自在にレイアウトを変化するレシポンシブWEBの登場。端末側も対応に安定感が出てきた昨今、きっとHPのリニューアルを考える時期になってきているのでしょう。