HTMLテンプレート「white base」のHTML構造

旅館・飲食店向けの無料HTMLテンプレート「white base」の各パーツごとのHTML構造について説明します。
テンプレートのデモページはこちら↓↓
base.syofuso.com

skeletonのグリッド・システム
ヘッダーナビゲーション

skeletonのグリッド・システム

「White base」ではCSSフレームワークskeletonのグリッド・システムを使っています。
skeletonではコンテンツ幅960pxの12カラムのグリッドとなっています。

<!-- .container is main centered wrapperコンテンツ960px -->
<div class="container">

  <!-- columns should be the immediate child of a .row -->
  <div class="row">
　　　<!-- 1カラム -->
    <div class="one column">One</div>
　　　<!-- 11カラム -->
    <div class="eleven columns">Eleven</div>
  </div>

  <!-- just use a number and class 'column' or 'columns' -->
  <div class="row">
　　　<!-- 2カラム -->
    <div class="two columns">Two</div>
　　　<!-- 10カラム -->
    <div class="ten columns">Ten</div>
  </div>

  <!-- there are a few shorthand columns widths as well -->
  <div class="row">
　　<!--12カラムのうち 1/3 -->
    <div class="one-third column">1/3</div>
   <!--12カラムのうち 2/3 -->
    <div class="two-thirds column">2/3</div>
  </div>
  <div class="row">
    <div class="one-half column">1/2</div>
    <div class="one-half column">1/2</div>
  </div>
</div>

Skeleton: Responsive CSS Boilerplate

ヘッダーナビゲーション

ヘッダーナビゲーションのHTML構造は図式化すると以下のようになっています。
f:id:syofuso:20160913170954j:plain

 <!-- ヘッダー -->
    <header id="top-head">
      <div class="container">
        <div class="row">
          <div class="four columns">
            <div id="mobile-head">
              <h1 id="title">
                <a href="index.html">
                  <!-- タイトルロゴ画像 -->
                  <img src="images/logo.png" alt="" >
                </a>
              </h1>
              <div id="nav-toggle">
                <div>
                  <span></span>
                  <span></span>
                  <span></span>
                </div>
              </div>
              <!--#navToggle END-->
            </div>
          </div>
          <div class="five columns">
            <nav id="global_navi">
              <ul>
                <li>
                  <a href="about.html">コンセプト</a>
                </li>
                <li>
                  <a href="room.html">お部屋</a>
                </li>
                <li>
                  <a href="cuisine.html">お料理</a>
                </li>
                <li>
                  <a href="facility.html">施設案内</a>
                </li>
                <li>
                  <a href="access.html">アクセス</a>
                </li>
                <li>
                  <a href="contact.html">お問い合わせ</a>
                </li>
              </ul>
            </nav>
          </div>
          <div class="three columns">
            <a href="contact.html" class="header_contact">ご予約</a>
                <a class="top-number" href="tel:0123-45-6789">
                  <i class="fa fa-phone-square"></i>0123-45-6789
                </a>
            </div>
          </div>
        </div>
    </header>
    <!-- /ヘッダー -->

ヘッダーに縦書きナビゲーション、右上に予約ボタン・電話番号を配置、スクロール固定、スマホのハンバーガーメニューを実現するためにちょっとややこしい構造になっています。
#global_naviを囲むfive columnsはナビゲーションの項目数に応じて.rowのなかで合計12カラムになるように調整してください。
タイトルロゴ部分のカラムが狭いとタブレットで見た時にロゴが小さくなるので調整が難しいのですが・・・

カスタマイズ次第で様々なデザインができます。
ヘッダーのカスタマイズ例としてサンプルページを作ってみました。ナビゲーションの項目数が多い時におすすめです。
f:id:syofuso:20160913172539j:plain
カスタマイズデモページ1