コーディングはモバイルファースト方式で…と要件にあったので、まず作るのはスマホ幅での表示です。 ですが、レスポンシブデザインは表示幅に合わせたレイアウト変更もあります。どこから手を付け、どうコーディングを進めたら良いか迷う方も多いのではないでしょうか。
今回と次回のレッスンでは、サイトの全体像（大きなコンテンツ区分、レイアウトの規則性）を捉えながら、HTMLとCSSのベースを作成する方法を解説します。コーディング手順に迷っている方は、解説と一緒にコードを書きながら進めてみてください。
制作用のフォルダ、ファイルを作る
これからコーディングを進め、Webサイトを作るためのフォルダを用意します。
フォルダ/ファイルの新規作成
解説ではフォルダ名を「zooloppa」とします。お好みで変更されても構いません。
前回のレッスンで書き出した画像の入ったフォルダを、作成したzooloppaフォルダに移動させてください。
そして、WebページとなるHTMLファイルを新規作成します。今回のデザインはトップページなので、名前はindex.htmlにします。 CSSを書いていくためのスタイルシートファイルstyle.cssも新規作成してください。
HTMLの方は基本書式+CSSの読み込みを書いておきましょう。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ズーロッパ東京</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
CSSはまだ書かず、空ファイルの状態良いです。
style.css
フォルダ分けについて
今後のレッスンやクライアントワークを進めるために、フォルダにある程度の規則性があると分かりやすいです。
フォルダの作り方・ファイル整理方法は個人差が大きい部分。 社内ルールがあればそれに則り、ない場合は「自分が分かりやすい」ようにすればOK。
ただ、デザインデータ（ai,psd,xdファイル）類と、コーディングしたサイト一式は分けたほうが良いです。 すべて1つのフォルダに入れてしまうと、クライアントにお渡し、もしくはサーバーにアップロードする時に、必要ファイルを選ぶ工程が必要になります。面倒ですし、ファイル抜けが出る・重いデザインデータや使わない画像まで送ってしまう危険もあります。
このため、お仕事用では下図のような構成で整理されている方が多いです。
【フォルダ管理の例】
Webページの大きな区分けをする
コーディングに必要なファイルを揃えたら、いよいよコーディングです。
どこから着手しようか迷ったら、とりあえずデザインを眺めてみましょう。
表示幅ごとの違いもありますが、共通点も多いことがわかりますね。 レスポンシブデザインの基本は「同一のコンテンツを、アクセスしてきた端末に合わせて表示する」ことですので、大まかなコンテンツ構成はどの幅でもほぼ一緒。すべての幅に共通した、大きな括りから書いていくと、迷いにくいですよ。
1.ページの大きな構成要素
ページ全体を見ると、最も大きな区分としてheader,main,footerの３つに分けられます。
これをそのままHTMLの、body内に書いていきます。 セマンティック要素を使って、わかりやすくマークアップしていきましょう。
index.html
<body>
<header></header>
<main></main>
<footer></footer>
</body>
HTMLのセマンティック要素とは
セマンティック要素とは、HTMLタグ自体が意味を持っている要素のことです。 例えばheaderやfooter、見出しを囲うh1~h6タグなどが代表的です。
| タグ | タグの意味 |
|---|---|
| header | ページ、もしくは区分の中のヘッダー（導入部分）であることを示します。 |
| main | ページの中での主要な内容部分（メインコンテンツ）であることを示します。 |
| aside | ページのメインコンテンツとは直接的な関係のない部分であることを示します。 |
| nav | ナビゲーションリンクの役割があることを示します。 |
| section | セクション (章、節など１つのグループ)であることを示します。 |
| article | 自己完結していて、それ自体が独立したコンテンツとして成立するブロックを示します。 |
| footer | ページ、もしくは区分の中のフッターであることを示します。 |
詳しい定義はHTML 要素リファレンス | MDNで紹介されています。
2.main要素内で大区分を作る
先程分けた３パートの中で、さらにmainの中身は大きく４つのグループに分かれています。 4つのグループに、それぞれ分かりやすい名前をつけましょう。
この構成をindex.htmlの、mainタグの中に書いていきます。
それぞれのグループを、sectionタグでマークアップしてみましょう。 そして、上図で付けた名前を、classを使ってそれぞれの要素に追加します。
※各グループを独立したコンテンツと捉え、articleタグを使っても間違いではありません。
index.html
<body>
<header></header>
<main>
<section class="firstview"></section>
<section class="event"></section>
<section class="about"></section>
<section class="info"></section>
</main>
<footer></footer>
</body>
これで、HTMLのベースになる、大まかな区分けができました。
次のレッスンではCSSを書いていきましょう。 今回sectionタグに指定したクラスも使いますよ。