BLOGなにかの役には立つかもしれない。viewportサイトにモバイル対応(スマートフォン・タブレット対策)をする時、一番手っ取り早いのがレスポンシブデザインにすることです。レスポンシブデザインとは、サイトの骨組みであるHTMLソースを変えずに、スタイルシートによって表示方法を変え、スマートフォン・タブレットでも見やすいデザインで表示するという方法です。スマートフォン・タブレットのシェアが急増している昨今、レスポンシブデザインで形成されているサイトも増えてきました。この記事では、レスポンシブデザインのサイトの基本的な作り方を紹介します。※以前、別の記事で「レスポンシブデザインを使用するメリットとデメリット」を書きましたので、そちらもご参考下さい。レスポンシブデザインでサイトを作ろうレスポンシブデザインでサイトを作ると、携帯用の別サイトを用意しなくてもスマートフォン・タブレットで表示時にサイトを見やすく表示することができます。スマートフォン・タブレットのブラウザはレスポンシブデザインで表示するのに必要なCSSのメディアクエリに対応しているので、レスポンシブデザインに適したHTMLを準備し、スマートフォン・タブレット用のスタイルシートを用意すればレスポンシブデザインを適用することができます。ホームページの基本的な仕組みホームページは、HTMLソースをブラウザで表示することで閲覧できるようになります。ホームページの骨組みとなるのがHTMLソースです。HTMLソースをブラウザで表示した時のデザインの設定を行うのがスタイルシートです。・横幅・配置など、サイトのデザインが変更できます。骨組みであるHTMLソースに対して、スタイルシートは衣装や装飾品のように考えればよいと思います。ちなみに、閲覧・表示する以外の様々な機能(例えばウィンドウを閉じたり確認ダイアログを表示したり)を付けたい場合は、javascriptやjQueryを利用します。javascriptやjQueryを利用すると、ホームページの閲覧にアニメーションなどの動きを持たせることもできます。HTML・スタイルシートに対して、javascriptやjQueryは、武器その他道具のような装備品と考えてれば良いかもしれません。レスポンシブデザインでは、同じHTMLをスタイルシートやjavascript・jQueryを変えて表示する、つまり、骨組みは変えずに衣装や装飾品・装備品の変更だけでスマートフォン・タブレットなどに対応します。どのようなHTML・スタイルシートを用意すればよいのでしょうか。レスポンシブデザインに適したHTMLソースの書き方HTMLソースは、通常上記画像のようにエディタ上で編集します。レスポンシブデザインに適したHTMLにすることを考えると、少なくとも下記のことを気をつけた方が良いでしょう。METAタグにviewportを設定するframeタグは使わない外部スタイルシートを利用する外部スタイルシートで利用するために適宜IDやクラスを設定するtableタグを避けてdivタグを利用したレイアウトを行うそれぞれ詳しくは下記の通りです。METAタグにviewportを設定するレスポンシブデザインを採用するために、METAタグにviewportを設定します。レスポンシブデザインで表示したいHTML画面のHEADタグ内に、下記のソースを記入してください。content="width=device-width,initial-scale=1"></head>上記のようにすると、ブラウザが端末の画面幅にあわせて表示領域を調整して表示してくれるようになります。frameタグは使わないFRAMEタグは、HTML5では廃止される予定です。レスポンシブデザインでサイトを構成する場合は、FRAMEタグは利用しないで下さい。FRAMEタグを使ったサイトのようなデザインにしたければ、スタイルシートの擬似フレームを利用しましょう。外部スタイルシートを利用するスタイルの設定は、HTML内には書き込まず、外部スタイルシートを利用するようにしましょう。PC・スマホ・タブレットなど、全ての環境で利用するスタイルシート、スマホのみに利用するスタイルシートなどを分けて構成しておくと、スタイルシートをスムーズに切り替えることができます。idやclassを設定するHTMLタグには、id要素・class要素をつけることができます。どちらもタグに名前を付与することに変わりはありませんが、idは固有の名称であり、単独でしか使えないclassは共通の名称であり、複数設定することも可能という違いがあります。詳しくは、当サイト記事「HTMLタグの要素と属性」を参考にしてください。tableタグを避けてdivタグを利用したレイアウトを行うtable(表)タグを多用すると、スマートフォンのような横幅の狭い画面では見難さが発生します。tableタグは、画面全体のレイアウトでは利用せず、画面全体のレイアウトにはdivタグを利用しましょう。レスポンシブデザインに適したCSS(スタイルシート)の書き方レスポンシブデザインにサイトを適用させるために、スタイルシートを切り分けることを意識しましょう。全体的に適用するスタイルシートスマートフォン・タブレットのみ適用するスタイルシート上記のように切り分けて設定すると、スタイルの切り替えが行いやすいです。スマートフォン・タブレットのみにスタイルを適用させるには、主に下記の2つの方法があります。メディアクエリを利用するjQueryを利用する上記のどちらを利用しても構いませんが、簡単なのはメディアクエリを利用する方法です。メディアクエリを利用してスマートフォン・タブレットのみにスタイルシートを適用させるメディアクエリとは、CSS3で利用できる機能です。画面サイズに応じてスタイルシートを上書きすることができます。*/}}スタイルシートに上記のように記載すると、480ピクセル以下の画面では背景色灰色の設定が上書きされて背景色黒で表示されます。※メディアクエリは多くのスマートフォンブラウザで利用できますが、IE8などブラウザによってはメディアクエリを利用することができないものもあります。IE8でもメディアクエリを利用できるようにするには、jQueryを利用してください。Formコメントを入力してください。半角で入力してください。NETsince:2014.01.01東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。