-
- 1. 講座内容について
- 2. レスポンシブデザインとは？モバイルファーストとの違いも解説
- 3. レスポンシブコーディングに使う、ビューポートとメディアクエリ
- 4. レスポンシブデザインに役立つCSS Flexboxレイアウト基礎
- 5. 【実践編】デザインとコーディング要件
- 6. Illustratorのデザインデータから、必要な画像を書き出す
- 7. レスポンシブデザインのコーディングを始めよう
- 8. レスポンシブコーディング向け、CSSファイルのベースを作ろう
- 9. ヘッダーとフッターのコーディング
- 10. ファーストビューのレスポンシブコーディング
- 11. イベント紹介セクションのレスポンシブコーディング
- 12. 紹介・お知らせセクションのレスポンシブコーディング
- 13. 最終確認と細かい部分の調整
- 14. 講座終了課題
- 15. 【Advance】CSS変数（カスタムプロパティ）について知ろう
- 16. 【Advance】CSS変数の活用例
- 17. 【Advance】ダークモード対応のためのCSS
- 18. 【Advance】Zooloppaをダークモード対応にしてみる
レスポンシブデザインのコーディングを始めよう
コーディングはモバイルファースト方式で…と要件にあったので、まず作るのはスマホ幅での表示です。
ですが、レスポンシブデザインは表示幅に合わせたレイアウト変更もあります。どこから手を付け、どうコーディングを進めたら良いか迷う方も多いのではないでしょうか。
今回と次回のレッスンでは、サイトの全体像（大きなコンテンツ区分、レイアウトの規則性）を捉えながら、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タグに指定したクラスも使いますよ。
無料ビデオ講座のお知らせ
Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。
