初期セッティング
これからHTMLページを作っていくための下準備を行いましょう。
1.ファイル作成
まず、HTMLとCSSファイルを作ります。
【やること】
- HTMLファイルを作成する - index.html
- titleとmeta descriptionを記述する
- 指定されているsanitize.cssを読み込む
- 設定用のCSSファイルを作成し、htmlから読み込む - style.css
ここまで書いたHTMLは下記のようになります。
2.ベースのフォントファミリーを指定
作成したstyle.cssに、ページ全体に共通するスタイルを指定しておきましょう。
デザインを見てみると、トップのキャッチコピーはHiraginoSansですが、本文のテキストは下記のようになっています。
- 英数字：Helvetica
- 日本語：游ゴシック（YuGO）
windows環境だと馴染みがありませんが、HelveticaはMacで使われているサンセリフの欧文体。このデザイナーは「アルファベットと数字はサンセリフ、日本語は游ゴシックで」という考えをしているらしいと想像できます。
Illustratorで使われているフォント名をそのまま入れても、windowsでは全く効きません。windowsでもそれっぽく見えるように対応フォントを入れる必要がありますね。
font-familyの書き方は検索すると、色々な方が「このフォントならこう書く」という例を紹介してくれています。使わせていただきましょう。
body {
font-family:Helvetica, Arial, Yu Gothic Medium, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif;
}
3.メディアクエリを用意しておく
アートボードのサイズを見てみると、PCは1600px、スマホは375pxで作られています。
かつ、PCデザインではコンテンツの幅上限が1200pxっぽい作りですね。 日本でオーソドックスな960px〜1080pxよりも、少し大きめです。
今回のコーディングは「デザインの再現性重視」とのことです。 @media (min-width: 992px) {}でPCデザインを作ろうと思うと、調整が大変そうですね。なので、PC幅用のメディアクエリは1200px幅以上の場合＝@media (min-width: 1200px) {} を使って作ってみましょう。
ヘッダーナビゲーションを作る
ページトップにあるヘッダーナビゲーションを作ります。
- スマホ幅では開閉式
- PC幅ではリンクが横並び
ちょうどcode penにシンプルで使いやすいコードがありました。 今回はこちらのコードをお借りして、作ってみましょう。
1.HTMLにコードを貼り付ける
index.htmlにナビゲーション部分のソースコードをコピー＆ペーストします。
2.CSSを貼り付ける
style.cssにCSSを丸ごとコピー＆ペーストしましょう。 先程作ったメディアクエリは気にせず、bodyの下に全て貼り付けます。
この状態で保存して、ブラウザで表示を確認してみましょう。 また開閉はしませんが、見た目は切り替わっていますね。
style.cssに戻って、貼り付けたスタイル指定を見てみましょう。
- スマホ幅：@media(max-width:767px){}
- 無指定（共通）
- タブレット幅以上：@media(min-width: 768px){}
３種類で構成されています。
まず、タブレット以上はmin-width:の値も一緒ですね。 そのまま作っておいたメディアクエリ箇所に移動させましょう。 どんどん記述が増えるので、何の設定かを書いておくと分かりやすいです。
そして、@media(max-width:767px){}内の記述。 ここにはposition: fixed;指定などがあり、ディアクエリを外してしまうと、タブレット以上の表示が崩れます。
プロパティ指定をし直すのは大変です。 コードの量も多くなるので、@media(max-width:767px){}部分はそのまま使います。
3.JSをコピー＆ペースト
新規JSファイルを作成します。 codepenからJSコードをコピーして貼り付けます。
common.js と名前をつけて保存してください。 （見本コードではdemo-common.jsとしています)
4. index.htmlでjsを読み込ませる
index.htmlの</body>直前で、common.jsを読み込ませます。
保存して、ブラウザ（スマホ幅）で確認してみましょう。 右上の３本線をクリックして、ナビゲーションメニューが表示されれば成功です。
色やメニューのサイズ・位置の調整は、次回行いましょう。