簡単なレスポンシブデザインのHTMLとCSSを組んでみよう
PR
初心者向けのWeb制作ヒント集ということで立ち上げたのですが、いきなりレスポンシブWebデザインネタです。
でもWebデザイナーを目指している方もいつかはぶち当たるかもしれないので、今は不明であってもいつか役に立ったら幸いです。
では話を戻して、レスポンシブデザインについてまとめていきます。
レスポンシブデザインについて
まずはレスポンシブデザインというのから学んでいきましょう。
最近ではPCよりもスマートフォンやタブレット端末でのサイト閲覧をする方が増えてきております。
PCやスマートフォンでも同じファイル（HTML）で画面サイズを基準にしてサイトを切り替える方法のResponsive Web Design（レスポンシブWebデザイン/RWD）が誕生しました。2010年に誕生したまだ若い技術です。
レスポンシブデザインは単一の技術ではなくメディアクエリ、フルードグリッド、フルードイメージの技術の要素で構成されています。
デメリットもあるので注意
メリットが多いだけではなくデメリットも存在します。
PCとスマートフォンのサイトを1つのソースコードで制作するためデザインにこだわったサイトや独自性の高いサイトを制作したい場合はには不向きです。その場合はPCとスマートフォンのファイルを分けて制作したほうが良いです。
そして比較的新しい技術でもあるのでIE8以上での環境でしか動作しません。IE8の場合、JavaScriptを読み込み解決します。
モバイルファーストについて
文字通りモバイル端末から制作するという言葉です。制作といっても企画や設計も含みます。
制作環境においてもモバイルサイトを制作するときは結構気を使わなければなりません。
PCにはない特有の特性がモバイル端末にはある（タッチという動作、押しやすさなど）ので先にクリアして、PCサイトへ移るようにしたほうがサイト全体の把握もしやすいかと思います。
このモバイルファーストが正解というものでもないのでなんとも言えませんが、個人的な観点を入れるとモバイルファーストで制作したほうがスムーズと感じました。
実際にHTMLを組んでみよう
では早速簡単なレスポンシブデザインのHTMLを組んでみましょう。
その前にCSSのリセットやIE8対応するためJavaScriptファイルをダウンロードしましょう。
リセットCSSは様々ありますので先にご紹介しておきます。
個人的に利用しているのはHTML5 Reset Stylesheetです。このリセットに関してはおこのみで設定してください。
では続いてIE8に対応させるためにJavaScriptをダウンロードします。……さっきからIE8対応と言ってもぱっとこないですよね……
IE8以下ではHTML5への対応が不十分です。まだまだWeb制作現場ではIE8対応をしなければならない案件が多かったりします。
なので対応できるようにJavaScriptを読み込みます。
html5shivというページからhtml5shiv.jsというファイルをダウンロードします。
ページには読み込むためのヒントも書かれているので参考にしてみてください。
またCSS3も対応できるようにしましょう。IE8以下では先程と同様対応が不十分なため読み込みます。このライブラリを読み込むとIE6でもメディアクエリを利用できるようになります。
css3-mediaqueries-jsのページよりcss3-mediaqueries.jsのファイルをダウンロードします。
では2つのJavaScriptをダウンロードしたところでサイトに記述していきましょう。ちなみにIE8以下の場合に適用するコードがあるので先に載せておきます。
<!--[if lt IE 9]> <script src="site-url/html5shiv.js"></script> <script src="site-url/css3-mediaqueries.js"></script> <![endif]-->
JavaScriptを読み込む前と後にif lt IE 9とendifと記述します。そうすることによってIE8以下のブラウザの場合のみに実行するようになります。
ではHTMLを組んでみましょう。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <body> <header>ヘッダー</header> <div id="contents" class="cf"> <article>メインコンテンツ</article> <aside>サイドバー</aside> </div> <footer>フッター</footer> </body> </html>
以上のHTMLを組んだとします。
ヘッダー、フッターがある2カラムのレイアウトが想像できるかと思います。
コーディングしたらCSSを組んでみよう
次にCSSを記述していきます。今回の重要なポイントかと思うのでゆっくり理解していきましょう。
/* 文字エンコード */
@charset "utf-8";
body { background: #fff; }
/* clearfix */
.cf { zoom: 1; }
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
/* スマホCSS */
header { background: #000; }
article { background: #39f; }
aside { background: #f36; }
footer { background: #000; }
/* パソコンCSS */
@media only screen and (min-width: 769px) {
header { background: #ccc; }
#contents { margin: 50px 0; }
article { width:500px; float:left; background: #c3f; }
aside { width:200px; float:right; background: #39f; }
footer { background: #ccc; }
}
上から文字エンコードの設定、clearfixの設定をします。
そうしたら次にブレイクポイントを設定していきます。
表示するレイアウトを切り替える画面サイズのことをブレイクポイントといいます。どこでレイアウトを切り替えるかというのが重要になってきます。
スマホCSSと書かれているところからスマートフォンのCSSを記述していきます。
わかりやすいように背景色のみ記述しています。このままではfloat:left;などの指定もないので縦に色が変わっているだけです……
ちなみに配色は、ヘッダー、フッターが黒、articleが青、asideが赤となっています。
PCサイトは2カラムの色違いにしたいという場合は今度はパソコンCSSに書かれている下から記述します。
ヘッダー、フッターの色をグレーに変更、contentsに上下の余白を50px、articleを500pxの左側に背景を紫に変更、asideを200pxの右側に背景を青に変更してみました。
極端なことを言うと変更したい内容を2回繰り返しているだけです……
PCブラウザで確認してみよう
それでは最後に今回作成したHTMLとCSSをブラウザで確認してみましょう。
画面いっぱいに表示してみるとパソコンCSSで指定した色やマージンが適用されているかと思います。
そしてウインドウ幅を小さくしていきましょう。そうすると今度は最初に描いた背景色に切り替わるかと思います。2カラムから1カラムになったかと思います。
これがレスポンシブデザインの概念？です。これからどんどん作りこんでいきます。ちゃんとブラウザ確認をしましょう。IEもしっかりチェック！IEも！！
制作案件によって臨機応変に対応
個人的にはIE8以降で制作する場合は、レスポンシブデザインでの構築を視野に入れています。
とはいっても案件によってはPCだけで良いと言う案件もありますし難しいところです。
比較的新しい表現方法なので今後更に進化するかもしれませんし忘れ去られるかもしれませんが、覚えておいて損はないかと思います。
サイト制作や運営に困ったときに相談ができるココナラと言うサービスもあります。もしどうしても解決できない時とかには利用するのもひとつの手かもしれません。
今回は簡単なレスポンシブデザインについての解説なのでサンプルページはご用意しておりません……今後はサンプルページなどを用意しながら親しみやすいブログづくりをしていきたいと思います。
PR