## 「ヘッダー」ブロックについて

    <!--▼▼▼▼▼ここから「ヘッダー」-->
    <header>

    <h1 id="logo"><a href="index.html"><img src="images/logo.svg" alt="サイト名"></a></h1>

    <nav>
    <ul>
    <li><a href="#kodawari">私たちのこだわり</a></li>
    <li><a href="#brand">商品ブランド</a>
    	<ul>
    	<li><a href="#">ブランド別メニュー</a></li>
    	<li><a href="#">ブランド別メニュー</a></li>
    	<li><a href="#">ブランド別メニュー</a></li>
    	</ul>
    </li>
    <li><a href="#koe">お客様の声</a></li>
    <li><a href="#faq">よく頂く質問</a></li>
    </ul>
    </nav>

    </header>
    <!--▲▲▲▲▲ここまで「ヘッダー」-->

### 主なスタイルは

cssフォルダのstyle.cssから「header」でテキスト検索してみて下さい。詳しい解説もあります。

### ロゴ画像

サイズ変更はstyle.cssの#logoのwidth:の数字で変更できます。端末サイズ別に２箇所あるので必要に応じて変更して下さい。
画面幅が501px以上だとスライドショーのSVG枠があるので、そこに収まるようにする必要があります。（つまりそのまま使うのであればロゴサイズは変更しない方がいい）
サンプルテンプレートはsvg形式になっていますが、pngなど他の拡張子でご用意頂いてもOKです。その場合は上記html側のlogo.svgをlogo.pngなど変更して下さい。

ロゴ画像のalt="サイト名"の「サイト名」部分はあなたのサイト名に入れ替えて下さい。

### ヘッダー内メニューと、開閉メニューはそれぞれ別のhtmlになっています

他のテンプレートでは共通しているものもあるので、編集の際はご注意下さい。
開閉メニューのhtmlコードは、htmlの下の方に入っています。

### ヘッダー内メニューは画面幅900px未満で非表示になります

現状からメニュー数を増やす際は、画面幅を狭くすると途中でメニューが改行されるので、気になる人はこのブレイクポイントを変更して下さい。cssフォルダのstyle.cssの、

    /*ヘッダー内メニュー

の中にある、

    @media screen and (min-width:900px) {

の900pxがブレイクポイント設定です。この数字を変更して下さい。

### ドロップダウンメニューについて

ドロップダウンを使う為の特別な設定は不要ですが、必ず親となるli要素の「中」に入れるようにして下さい。

OKな例

    <li><a href="">親となるメニュー</a>

    <ul>

    <li><a href="">ドロップダウンのメニュー</a></li>

    <li><a href="">ドロップダウンのメニュー</a></li>

    </ul>

    </li>

NGな例

    <li><a href="">親となるメニュー</a></li>

    <ul>

    <li><a href="">ドロップダウンのメニュー</a></li>

    <li><a href="">ドロップダウンのメニュー</a></li>

    </ul>

### 右上のハンバーガーアイコンは

headerではなくhtmlの下の方にある「開閉ボタン（ハンバーガーアイコン）」という所から指定されています。
ハンバーガーアイコンのスタイルを変更したい場合は、style.cssから「menubar_hdr」でテキスト検索してみて下さい。

ここのブロックは、htmlの下の方にある<div id="menubar">で編集できます。
ヘッダーのメニューとは別のブロックになるので注意して下さい。