スマートフォンサイトを表示する

  1. TOP
  2. 用語集
  3. レスポンシブWebデザイン

用語集

レスポンシブWebデザイン

画面のサイズに合わせてホームページの見た目をいい感じにする手法

2015年3月31日更新

  • このエントリーをはてなブックマークに追加

閲覧数2,803views

ホームページの中の情報(文章や画像など)は同じだけど、パソコンで見た時とスマートフォンで見た時とタブレットで見た時とで、画面サイズに合わせてレイアウトや見た目をいい感じにする手法のことを「レスポンシブWebデザイン」といいます。

ホームページといえば、ちょっと前までパソコンで見るものでしたが、ここ数年でスマートフォンやタブレットでホームページを見る人が急激に増えました。
が!パソコンでいい感じに見えるホームページは、スマートフォンなど画面の小さい機器で見ると、レイアウトがはみ出していたり、字がかなり小さかったりしてとても見えづらかったりします。

これを解決する方法として、パソコン用とスマートフォン用それぞれのホームページを作るという手法もありますが、レスポンシブWebデザインは、ホームページに掲載する情報(文章や画像など)は変えずに、CSSを使って画面サイズに応じて見た目をいい感じに調整して表示するように作る方法です。
レスポンシブWebデザインのレスポンシブ(responsive)は「すぐ応答(反応)する」という意味で、画面サイズに合わせて瞬時に変わります。

実はいまみなさんがご覧になっている「はじめてWEB」のホームページもレスポンシブWebデザインなんですよ(すごーい!)。

パソコンでご覧になっている方は、ぜひブラウザーのウィンドウサイズを小さくしたり大きくしたりしてみてください。

そう、これがレスポンシブWebデザインなんです。

レスポンシブを「レスポンシブル」と「ル」付ける方をたまに見かけますが、レスポンシブルだとresponsible(責任のある)なので、まったく意味の違うホームページデザインになってしまいます。「ル」の取り扱いには十分に気をつけましょう。

#fc0(株式会社エフシーゼロ)

文:#fc0(株式会社エフシーゼロ)

http://fc0.vc/

「もっと多くの人に、"Webへの入口"を」をコンセプトに、中小企業や個人商店をメインとしたWebサイトの企画・制作・運営アドバイスなどの業務を行う。また、主に初心者を対象とした講師・執筆も多数。

用語集一覧へ

  • 1年間無料

    「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

用語集

インポート

インポート

外部にあるデータをパソコンなどに取り込むこと

用語集週間アクセスランキング[期間:2017/5/14~2017/5/20]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!