CodeIQ MAGAZINECodeIQ MAGAZINE

レスポンシブWebデザインを実現する3つの技術を簡単解説 #HTML5 #CSS

2014.04.02 Category:技術コラム Tag: , ,

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

スマートフォンやタブレットが進み、PCサイトだけ制作すればよかった頃とは様子も変わってきました。それに伴い普及してきたレスポンシブWebデザイン。PC/タブレット/スマホなどのデバイスへの対応をワンソースで実現できる優れものですが、敷居が高そうだと思っていませんか?

今日はそんなレスポンシブアレルギーを持つ方へ、レスポンシブサイトの簡単な仕組み解説をお届けします!
by hibikiYzk

レスポンシブWebデザインは魔法じゃない!

例えばPC閲覧時に表示されていたバナーやメニューがスマホ閲覧時だと表示されなくなったり、全く違う形のコンテンツに変化していたりと何かとトリッキーな動きをしがちなレスポンシブWebデザイン。

そんな魔法のような事を実現させるには何かとんでもなく難しい技術を使っているんじゃないの!?

そう思われる方もいらっしゃるかもしれません。
見た目が派手なので魔法の様に見えますが、実はレスポンシブWebデザインの仕組みはとてもシンプルです。

レスポンシブWebデザインを実現する3つの技術

レスポンシブWebデザインの根底には3つの基本となる技術があります。
ほかにもいろいろな技術はありますが、メインとなる技術は3つです。シンプルですね!それではその技術について順番にご紹介していきましょう。

①メディアクエリー

PC閲覧時には表示されていたコンテンツがスマホ閲覧時には表示されなくなった!それを実現するのがこのメディアクエリーです。

メディアクエリーは、画像解像度、ウィンドウの幅、デバイスの向きなどの指定条件にあわせて別々のCSSを適用する技術です。デバイスごとに別々にCSSを適用できるので、PC閲覧時とスマホ閲覧時でレイアウトを変えることができるようになります。例えば上記のスマホ閲覧時に表示されないコンテンツはどのように実装しているかというと、次のようになります。

#sideMenuContents {
    width:20%;
    margin-top:2%;
}

@media (max-width: 350px) {
    #sideMenuContents{
        display: none;
    }
}

この@mediaの部分がメディアクエリです。ディスプレイサイズが指定のpx以下になった時に適用されます。上のソースだとディスプレイサイズが350px以下になった時点でdisplay:none;が適用されたので、コンテンツが表示されなくなったという訳です。このメディアクエリーのおかげでデバイスに応じた最適なレイアウトを適用することができるようになります。

②フルードグリッド
フルードグリッドはページを罫線やマス目に区切ってpxでレイアウトするグリッドデザインと、ブラウザの横幅に合わせてサイズを%で調整するフルードデザインをかけ合わせたものです。制作の方法として、最初にグリッドデザインでpx単位のデザインを行い、次にpxを%に変換してフルードデザインに変更するという手法がよく用いられます。

③フルードイメージ
レイアウトの大きさに追随して画像のサイズを拡大・縮小する手法です。ウィンドウサイズより大きい画像でもウィンドウサイズや親コンテンツの幅に応じて縦横比を保持したまま自動的に画像を拡大・縮小します。imgタグに対してmax-width:100pxを設定してやることで実装が可能です。

img{ max-width : 100%}

デバイスによってレイアウトが変わる仕組みの正体

レスポンシブWebデザインを支える3つの技術をご紹介したところで、次はデバイスによってレイアウトが変わる仕組みをご紹介しましょう。デバイスによってレイアウトが変わるサイトの例として、レスポンシブなデザインで話題のNHKスタジオパークを挙げてみます。

<例:NHKスタジオパーク>

ウィンドウ幅を狭めていくと、コンテンツが消えたり別の場所に配置されたりします。(とてもスムーズに動きますが、これはjQueryで実装されているためです)

消えるのは先ほどご紹介したdisplay:none;の制御ですね。ウィンドウ幅が狭まるごとにどんどんコンテンツが少なくなります。

では別の場所に配置されるのはどういう仕組みなのでしょう?上記画像の例で言うとウィンドウ幅が広い間はサブメニューと同列に並んでいたバナーコンテンツが、ウィンドウ幅を狭めるとサイドメニューの下に潜り込むようになりました。実は、これもメディアクエリーを上手く利用することで実現させている動きなのです。

display:none;とdisplay:block;を使い分けてコンテンツを集約させる

スマホは特に、大画面で色々な情報を一度に見られるPCとは違い、画面が小さいので情報量が多いと見づらくなってしまいます。そこでレスポンシブWebデザインではPC→タブレット→スマホの順にコンテンツを削り強調させたいコンテンツや利用者が欲しい情報を優先して表示させるようにします。

重要でないコンテンツは、display:none;を利用して削り取っていきます。一方、強調させたいコンテンツについては画面フル幅で表示させるようにするのです。

#mainBunnerContents {
    width:60%;
}
@media (max-width: 350px) {
    #mainBunnerContents{
        display: block;
        width:100%;
    }
}

例えばPC閲覧時に横幅を60%で指定しているとすれば、スマホ閲覧時には100%の横幅で設定してやります。するとサイドメニューの横に並んでいられなくなり、メインバナーの下に表示されるようになります。

トリッキーな動きですがこのようにそれぞれのデバイスに最適なコンテンツ配置を適用していく、これがレスポンシブWebデザインの基本的な考え方です。

metaタグでViewportを指定する

最後に忘れてはいけないのが、Viweportの設定です。スマホはPCのようにウィンドウをリサイズする概念がありません。ではどうなるかと言うとその機種のスクリーンサイズ=ブラウザーウィンドウのサイズと認識し、意図したCSSを反映してくれなくなるのです。多くの場合はとても小さい文字や画像が表示されます。

これはPCサイトを閲覧できる端末であれば特にPC向けサイトを画面ちょうどに収めるため、デフォルトでViewport のサイズをPC画面相当にしてあるからです。そこで、metaタグでViewportを指定してやります。Viewportをデバイスの横幅に合わせることが出来るので、スマホ向けCSSを適用できようになります。

最後に…

さて、今回はレスポンシブWebデザインに少しでも取っ付きやすくなるための基本的な仕組みについてご紹介しましたが、いかがでしたか?

レスポンシブWebデザインにはほかにもたくさんの技術や制作テクニックがありますが、今回の記事が少しでもアレルギー緩和のお役に立てれば幸いです。

CodeIQコード銀行にあなたのコードを預けてみませんか?

  • CodeIQコード銀行ではあなたのコードを財産と考えます。
  • お預かりいただいたコードは、CodeIQコード銀行がしっかり評価し、フィードバックいたします。
  • 当コード銀行にお預けいただいたコードは、企業がみてスカウトをかける可能性があります。
  • 転職したい方や将来転職することを考えている方で、今の自分のスキルレベルを知りたい方はぜひ挑戦してみてください。
  • 企業からスカウトがきたら困る人は挑戦しないでください。

興味を持った方はこちらからチャレンジを!

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

■この記事を書いた人

avatar

hibikiYzk

大阪を拠点に活動するwebクリエイター/フリーライター。「やりたいをカタチに」をスローガンにweb制作や記事の執筆活動を行っています。システム開発やweb制作現場での経験を元に、日常の業務でちょっと使えるネタをご紹介していきます。

■関連記事

ブラウザ戦争、HTML5の標準化、ブラウザの未来──歴史を語り尽くすWebブラウザ談義【後編】... 「ブラウザ戦争」とは何だったのか Webブラウザの歴史を辿ると、歴代のブラウザが、技術的にもビジネス的にも激しい覇権競争を繰り広げたことが、結果としてWebの普及を促したことがわかる。 94年12月にリリースされた Netscape Navigatorは順調にバージョンを重ねるが、これに対抗して...
インターネットとWebの誕生が、いつか知ってる?──歴史を語り尽くすWebブラウザ談義【前編】... 今あらためてWebブラウザの歴史を辿る意味 Webブラウザはたかだか四半世紀の歴史とはいえ、世界を変えたこの25年はあまりにも劇的で、細かい歴史は忘れられていることも多い。 しかし、Webブラウザの歴史をたどることで、インターネット技術がどのように発展してきたのか、そしてこれからはどのようにそれ...
Azureで仮想マシンを作り、リモートデスクトップ接続で『Visual Studio』を使ってみよう... AzureならインストールすることなくVisual Studioが使える!? 現在、CodeIQで展開されているキャンペーン問題、日本マイクロソフト・エバンジェリストである物江修さんが出題する「HTML5+JSで落ちものゲームを作ってみよう」と、同じくエバンジェリストの高橋忍さんが出題する「きゃん...
HTML5、C#を使ったスマートフォン・タブレット向けアプリ開発を基礎から学ぼう!... 中学1年生になったシュン君とゲームアプリ問題に挑戦! タブレットやスマートフォンのエンタープライズ環境への導入が増えているとはいえ、そのような端末向けのアプリケーション開発に携わっているITエンジニアはまだまだ少ない。 今回のキャンペーン問題は、「HTML5/JavaScript」と「XAML/...
【最終回】シュン君のゲームをChrome Web Storeで公開してみよう!#5jcup #htm... Chrome Appsとは何か? 前回までの講師は、UEI清水亮氏(前編・後編)、日本マイクロソフト物江修氏(Windowsストアアプリ編)、Mozilla Japanの清水智公氏(Firefox OS編)、アシアル生形可奈子氏(スマートフォン編)。 ラストを飾るGoogle Developer...
Monacaでenchant.jsで作ったHTML5ゲームを、シュン君とスマートフォンに移植してみよ... なぜ、スマートフォンアプリ化する必要があるの? 前回までの講師は、UEI清水亮氏(前編・後編)、日本マイクロソフト物江修氏(Windowsストアアプリ編)、Mozilla Japanの清水智公氏(Firefox OS編)。 そして次なるターゲットは、スマートフォンアプリ移植。講師には、アシアル株...

今週のPickUPレポート

新着記事

週間ランキング

CodeIQとは

CodeIQ(コードアイキュー)とは、自分の実力を知りたいITエンジニア向けの、実務スキル評価サービスです。

CodeIQご利用にあたって
関連サイト
codeiq

リクルートグループサイトへ