COMMEND

3つの“D”の視点から
夢あるライフスタイルづくりを提案

Vol.6 レスポンシブWebデザインの基本構造

2014/09/26 up カテゴリー : WEBの現場から！

　
今回は基礎となるコードの解説をしたい。前もって言っておくが、このTRIAINA式「レスポンシブWebデザイン」は「HTML5とCSS3の基礎知識はある程度あるが、レスポンシブWebデザインは初めてだ」という人のための講座である。完成させるサイトは、【ここから】見てほしい。それでは1から順に作成していく。

レスポンシブWebデザインの基本構造

下記のHTMLは非常にシンプルだが、これこそがレスポンシブWebデザインの基本構造である。
まず、デスクトップに「sample」と名前をつけたフォルダを作成。次に、下のHTMLをテキストエディタにコピーし、「index.html」と名前をつけて保存し、最初につくったフォルダの中に入れる。コピーするには、下記ソース黒枠の右上にある「ソースを表示」から。
　

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<title>MY BLOG</title>

<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->

<!--[if lt IE 9]>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->

</head>

<body>
コンテンツ内容
</body>
</html>

　
上記の <meta name="viewport" content="width=device-width"> から説明しよう

「viewport」とは

スマートフォン、タブレットで表示する際のサイトの見え方の指定のことである。縦幅や横幅の他に拡大縮小の倍率や、ピンチイン・アウトを許可するかどうかの指定もできる。width=device-width は「デバイスの横幅で描画してください」という意味である。とにかくmeta要素にこの一行を追加しておくだけでいい。

リセットCSS

リセットCSS（zip）

html5shiv.js

<!–[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]–>
　
<!–[if lt IE 9]><![endif]–>の表記は、「もしもIEのバージョンが9未満だったならば～を実行する」というコード。ここで読み込んでいる「html5shiv.js」とは、HTML5から新たに導入されたタグ「aside article header nav section……」などを、IE8以前のバージョンでも表示がくずれることなく観覧できるようにしてくれるスクリプトである。以下からダウンロードして解凍。「sample」フォルダの中にさらに「js」というフォルダを作成し、その中に「html5shiv.js」を入れてほしい。
　

html5shiv.js（zip）

css3-mediaqueries.js

<!–[if lt IE 9]>
<script src="js/css3-mediaqueries.js"></script>
<![endif]–>
　
レスポンシブWebデザインでは、PCやスマホの表示をCSS3の「メディアクエリ」を使ってスタイルを切り替える。しかしIE6、IE7、IE8はこの「メディアクエリ」に標準で対応していないため、「css3-mediaqueries.js」を読み込ませる必要がある。以下からダウンロードして解凍。「sample」フォルダ内にある、さきほど作った「js」フォルダの中に「css3-mediaqueries.js」を入れればOK。
　

css3-mediaqueries.js（zip）

▼　▼　▼

　
これでレスポンシブWebデザインの基本構造が整った。次回から実際にレスポンシブWebデザインに触れていく。刮目せよ。
　