• 今、流行り?レスポンシブWEBデザイン


    • 様々な閲覧環境に対応するためにレスポンシブWEBデザインを取り入れよう

    レスボンシブWEBデザインって何だろう

    「レスポンシブwebデザイン」は、 ブラウザの横幅サイズをwebサイト表示の判断基準にし、ページのレイアウトデザインを柔軟に調整できる手法です。
    何故、このよな手法があるのかというと、スマートフォンが原因です。
    ホームページは、今やパソコンだけで閲覧されるものではなく、スマートフォンやタブレット端末からもで閲覧されています。
    そのため、ホームページも閲覧環境に応じてページレイアウトを柔軟に切り替えられるようにマルチデバイス化が必須になってきますが、デバイス毎にレイアウトの違うHTMLファイルを複数用意しているとコストが非常に多くかかりますし、コンテンツ管理も大変です。
    そこで、ページのレイアウトデザインを柔軟に調整できるようにしたレスボンシブWEBデザインが重要になっているのです。

    レスボンシブWEBデザインのホームページを作成しよう

    「レスポンシブwebデザイン」では、1つのHTMLファイルを、CSS3(Media Queries)で制御し、ブラウザの横幅サイズに応じてページのレイアウトデザインを調整します。
    もっと簡単に言えば、一つのHTMLに複数のCSSを用意し、閲覧環境に応じたCSSを適用するように設定するということですね。

    おススメページ

    レスポンシブwebデザインがどのようなものかをより理解できるよう、レスポンシブwebデザインを採用しているホームページをご紹介しています
    もっとも、パソコンとスマートフォンの両方でチェックしない限り、どういうものかわかりにくいのが難点ですが・・・
    とりあえず媒体を変えて閲覧しても同じように見えるものだと理解していただければ十分です。
    是非とも参考にして、自身のホームページ作成に役立ててください。

    3200Tigres

    アドレス:http://3200tigres.wwf.fr/
    横幅を1200px,900px,700px,480pxの4種に設定しています。
    このうち700pxはダブレットタイプ用、480pxはスマートフォン用となります。

    Post Tagged with
Comments are closed.