課題コーディング要点

1.順序と全体設計

①コーディング順序

コーディングは新HTML/CSS入門講座（応用編）で行ったのと同様に、先にパソコンモニター(ブラウザ)幅向けのレイアウトを作成してください。
それをベースに、スマホ幅に合わせてレイアウトを調節のためのCSSを書く形です。

②全体の文字指定とリンク

bodyをセレクタにして、cssファイルでページ全体で使用する文字設定を行ってください。
見本サイトで使用している設定は下記のとおりです。

• font-family: 'Taviraj', serif;
• font-size: 14px;

また、見本サイトではヘッダーナビゲーションや「Learn more」などリンクが張られている文字も黒色で表示されていますね。
そのままだと青色になってしまうので、リンクテキストが通常テキストと同じような外見になるように設定してください。

今回作成するのは1ページのみです。
リンク箇所はジャンプ先を空にした状態（<a href="#"></a>で囲う）にしておいてください。

③各ブロックの幅について

このサイトではパソコン幅表示の場合、フルスクリーン表示をベースにしています。

ただし、ConceptとAccessのエリア・headerの内側は横幅が最大1140pxまでとなっています。
画面幅が1140pxよりも大きい場合は中央に配置されるように設定して下さい。

④セマンティックにする

以下のようなTHMLタグを使用したセマンティックマークアップを行い、HTMLを構造化して下さい。

• セクショニング要素（header, footer, sectionなど）
• 見出しタグ（h1,h2など）

<section>と<article>の使い分けはコーダーによって意見が分かれる部分。
この課題に関してはどちらを使用していただいても良いです。

ちなみに、MDNで解説されている各タグの定義は下記の通りです。

2.ヘッダーとヒーロー画像

ヘッダー

ヘッダー部分はロゴ、ナビゲーション（メニュー）、電話番号の３つで構成されています。
以下のように配置出来るよう、CSSでレイアウトしてください。

• PCブラウザ幅：電話番号がナビゲーションの右
• スマホ幅：電話番号がナビゲーションの下

ヒーロー

画像はimgタグではなく、背景画像として設定してください。

3.サロン紹介部分

2カラム箇所

• 01 Concept
• 02 Menu
• 04 Access

この３か所は、パソコン幅用の表示ではボックスを左右横並びに配置します。
スマートフォン幅の場合は縦（上下）配置になるようにcssで設定して下さい。

見出しの上にある数字の下には「線」の装飾を入れましょう。

Staff部分

スタッフ紹介の所は背景画像を設定したボックスの中に、背景色を半透明に設定したdivを入れることで作成します。

スマホ表示の場合は背景の写真が見切れます。
今回は見切れたままでOKです。
テキストが入ったボックスの位置だけ調整してください。

Map

Accessの部分は、グーグルマップを埋め込んで作成します。

googleマップの埋め込み方につきましては
https://www.360vr.co.jp/blog/shuukyaku/mybusiness/googlemap_umekomi
もしくは「googlemap 埋め込み」で検索し、調べて下さい。

4.フッター

以下の２箇所で、パソコン向けとスマホ幅向けにレイアウトを変更します。

• フッターメニュー
• 店舗情報

レイアウトにはいくつかの方法がありますが、今回はFlexboxを使って行ってみてください。

★クラス設計のヒント

課題のヘアサロンサイトでは、ConceptとAccessなど同じようなレイアウトが複数個所で使われています。
こうした場合、それぞれに全て別のクラスを設定するのではなく、共通するクラスを作って組み合わせると配置が楽に出来ます。

例えば、このようなクラスを作ります。

.col-5 {
    flex: 0 0 50%;
}
.text-right {
    text-align: right
}

divにこのクラスを設定すると、幅50％で右寄せ配置となります。

<div class="col-5 text-right">

右寄せにしたくない場合は、以下のように書くと良いです。

<div class="col-5">

クラスは半角スペースで区切ることで複数設定可能ですので、似た設定の箇所はこのようにクラスを組み合わせて設定してみて下さい。
スマホ幅用の調整がスムーズにできますよ。