## Category

## Tag

## All Colors

## Page Header

/src/assets2/scss/_template.scss

- Template

- `CG2-pageHeaderPlacer`を併用すると高さを確保することができる、高さ確保が不要なら`CG2-pageHeaderPlacer`を利用しない
- 実際に利用するときには以下のコードから`style="position:relative;"`を取り除いて使う

## WWW用

    <div class="CG2-pageHeaderPlacer">
      <header class="CG2-pageHeader" style="position:relative;">
        <div class="CG2-pageHeader__inner">
          <div class="CG2-pageHeader__logo">
            <a href="#"><img src="../../../assets2/img/CG2-pageHeader/logo.svg" alt="CodeGrid" width="125" height="24"></a>
          </div>
          <div class="CG2-pageHeader__nav">
            <ul>
              <li><a href="#">料金</a></li>
              <li><a href="#">団体購読</a></li>
              <li><a href="#">よくある質問</a></li>
              <li><a href="#">書籍</a></li>
            </ul>
          </div>
          <div class="CG2-pageHeader__buttons">
            <ul>
              <li><a class="CG2-button CG2-button--primary CG2-button--thin" href="#">購読する</a></li>
              <li><a href="#">ログイン</a></li>
            </ul>
          </div>
          <div class="CG2-pageHeader__opener" data-drawer-toggle></div>
        </div>
      </header>
    </div>

## APP用

    <div class="CG2-pageHeaderPlacer">
      <header class="CG2-pageHeader" style="position:relative;">
        <div class="CG2-pageHeader__inner">
          <div class="CG2-pageHeader__logo">
            <a href="#"><img src="../../../assets2/img/CG2-pageHeader/logo.svg" alt="CodeGrid" width="125" height="24"></a>
          </div>
          <div class="CG2-pageHeader__appNav">
            <ul>
              <li><a href="#">最新記事一覧</a></li>
              <li><a href="#">お気に入り一覧</a></li>
            </ul>
          </div>
          <div class="CG2-pageHeader__search">
            <div class="CG2-pageHeader__searchInner">
              <form>
                <input type="search">
              </form>
            </div>
          </div>
          <div class="CG2-pageHeader__buttons">
            <ul>
              <li><a class="CG2-button CG2-button--primary CG2-button--thin" href="#">購読する</a></li>
              <li><a href="#">ログイン</a></li>
            </ul>
          </div>
          <div class="CG2-pageHeader__opener" data-drawer-toggle></div>
        </div>
      </header>
    </div>

## APP用 ログイン後

    <div class="CG2-pageHeaderPlacer">
      <header class="CG2-pageHeader" style="position:relative;">
        <div class="CG2-pageHeader__inner">
          <div class="CG2-pageHeader__logo">
            <img src="../../../assets2/img/CG2-pageHeader/logo.svg" alt="CodeGrid" width="125" height="24">
          </div>
          <div class="CG2-pageHeader__appNav">
            <ul>
              <li><a href="#">最新記事一覧</a></li>
              <li><a href="#">お気に入り一覧</a></li>
            </ul>
          </div>
          <div class="CG2-pageHeader__search">
            <div class="CG2-pageHeader__searchInner">
              <form>
                <input type="search">
              </form>
            </div>
          </div>
          <div class="CG2-pageHeader__user">
            <div class="CG2-pageHeader__userHeader">
              <div class="CG2-pageHeader__userName">oyamada.akihiro@email.com</div>
              <div class="CG2-pageHeader__userAvatar">
                <img src="http://www.gravatar.com/avatar/3d8d92b9ff9e708e3e4c247d5ab787ba.png?s=112" alt="" width="56" height="56">
              </div>
              <div class="CG2-pageHeader__userOpener"></div>
            </div>
            <div class="CG2-pageHeader__userMenu">
              <div class="CG2-pageHeader__userMenuInner">
                <ul>
                  <li><a class="CG2-button CG2-button--fullWidth CG2--alignCenter" href="#">設定</a></li>
                  <li><a class="CG2-button CG2-button--fullWidth CG2--alignCenter" href="#">ログアウト</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </header>
    </div>

## 導線無し（フォーム途中など）

    <div class="CG2-pageHeaderPlacer">
      <header class="CG2-pageHeader" style="position:relative;">
        <div class="CG2-pageHeader__inner">
          <div class="CG2-pageHeader__logo">
            <img src="../../../assets2/img/CG2-pageHeader/logo.svg" alt="CodeGrid" width="125" height="24">
          </div>
        </div>
      </header>
    </div>

## Page Footer

/src/assets2/scss/_template.scss

- Template

    <footer class="CG2-pageFooter">
      <div class="CG2-pageFooter__inner">
        <div class="CG2-pageFooter__wwwNav">
          <div class="CG2-pageFooter__logo">
            <img src="http://img.pxgrid.net/128x32" alt="CodeGrid" width="128" height="32">
          </div>
          <ul>
            <li><a href="#">CodeGridについて</a></li>
            <li><a href="#">料金</a></li>
            <li><a href="#">団体購読</a></li>
            <li><a href="#">よくある質問</a></li>
            <li><a href="#">書籍</a></li>
            <li><a href="#">購読する</a></li>
          </ul>
        </div>

        <div class="CG2-pageFooter__appNav">
          <div class="CG2-pageFooter__appNavHeader">
            <div class="CG2-pageFooter__appNavHeading">
              <a href="#">アプリトップ</a>
            </div>
            <div class="CG2-pageFooter__appNavSearch">
              <div class="CG2-pageFooter__appNavSearchInner">
                <form>
                  <input type="search">
                </form>
              </div>
            </div>
          </div>
          <div class="CG2-pageFooter__appNavList">
            <ul>
              <li><a href="#">最新記事一覧</a></li>
              <li><a href="#">おすすめ記事一覧</a></li>
              <li><a href="#">お気に入り登録記事一覧</a></li>
              <li><a href="#">無料公開記事一覧</a></li>
              <li><a href="#">シリーズ一覧</a></li>
              <li><a href="#">著者一覧</a></li>
            </ul>
          </div>
          <div class="CG2-pageFooter__appNavCategory">
            <ul>
              <li><a href="#"><span class="CG2-icon-cat-architecture"></span>設計</a></li>
              <li><a href="#"><span class="CG2-icon-cat-future"></span>未来・次世代</a></li>
              <li><a href="#"><span class="CG2-icon-cat-talk"></span>座談会</a></li>
              <li><a href="#"><span class="CG2-icon-cat-mastering"></span>実践</a></li>
              <li><a href="#"><span class="CG2-icon-cat-elementary"></span>入門</a></li>
              <li><a href="#"><span class="CG2-icon-cat-standards"></span>仕様解説</a></li>
              <li><a href="#"><span class="CG2-icon-cat-work-style"></span>仕事術</a></li>
              <li><a href="#"><span class="CG2-icon-cat-report"></span>レポート</a></li>
              <li><a href="#"><span class="CG2-icon-cat-design"></span>デザイン</a></li>
              <li><a href="#"><span class="CG2-icon-cat-discussion"></span>ディスカッション</a></li>
              <li><a href="#"><span class="CG2-icon-cat-interview"></span>インタビュー</a></li>
              <li><a href="#"><span class="CG2-icon-cat-survey"></span>アンケート</a></li>
            </ul>
          </div>
        </div>

        <div class="CG2-pageFooter__legalNav">
          <ul>
            <li><a href="#">公式Twitter</a></li>
            <li><a href="#">お問い合わせ</a></li>
            <li><a href="#">利用規約</a></li>
            <li><a href="#">プライバシーポリシー</a></li>
            <li><a href="#">特定商取引法に基づく表示</a></li>
          </ul>
          <div class="CG2-pageFooter__company"><a href="#">運営会社<img src="../../../assets2/img/CG2-pageFooter/pxg-logo.svg" alt="Pixel Grid" width="128" height="32"></a></div>
        </div>
      </div>
    <!-- /.CG2-pageFooter --></footer>

## 導線無し（フォーム途中など）

    <footer class="CG2-pageFooter CG2-pageFooter--simple">
      <div class="CG2-pageFooter__inner">
        <div class="CG2-pageFooter__legalNav">
          <div class="CG2-pageFooter__company">運営会社<img src="../../../assets2/img/CG2-pageFooter/pxg-logo.svg" alt="Pixel Grid" width="128" height="32"></div>
        </div>
      </div>
    <!-- /.CG2-pageFooter --></footer>

## Drawer

/src/assets2/scss/_template.scss

- Template

- スモールスクリーン時のみ有効
- CG2-pageHeader 内のトグルボタンで表示

oyamada.akihiro@email.com

- 購読する
- ログイン

    <div class="CG2-drawer">
      <div class="CG2-drawer__panel">
        <div class="CG2-drawer__panelViewport">
          <div class="CG2-drawer__panelBody">

            <div class="CG2-drawerBody">

              <div class="CG2-drawerBody__user">
                <div class="CG2-drawerBody__userAvatar">
                  <img src="http://www.gravatar.com/avatar/3d8d92b9ff9e708e3e4c247d5ab787ba.png?s=112" alt="" width="56" height="56">
                </div>
                <div class="CG2-drawerBody__userName">oyamada.akihiro@email.com</div>
              </div>

              <div class="CG2-drawerBody__nav">
                <ul>
                  <li><a href="#">アプリトップ</a></li>
                  <li><a href="#">最新記事一覧</a></li>
                  <li><a href="#">おすすめ記事一覧</a></li>
                  <li><a href="#">お気に入り登録記事一覧</a></li>
                  <li><a href="#">無料記事一覧</a></li>
                  <li><a href="#">シリーズ一覧</a></li>
                  <li><a href="#">著者一覧</a></li>
                </ul>
              </div>
              <div class="CG2-drawerBody__userNav">
                <ul>
                  <li><a class="CG2-button CG2-button--primary CG2-button--fullWidth" href="#">購読する</a></li>
                  <li><a class="CG2-button CG2-button--fullWidth" href="#">ログイン</a></li>
                </ul>
              </div>
              <div class="CG2-drawerBody__separator"></div>
              <div class="CG2-drawerBody__search">
                <div class="CG2-drawerBody__searchInner">
                  <form>
                    <input type="search">
                  </form>
                </div>
              </div>
              <div class="CG2-drawerBody__nav">
                <ul>
                  <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-elementary"></span>入門</a></li>
                  <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-practice"></span>実践</a></li>
                  <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-standards"></span>仕様解説</a></li>
                  <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-talk"></span>座談会</a></li>
                  <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-architecture"></span>設計</a></li>
                  <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-report"></span>レポート</a></li>
                  <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-future"></span>未来・次世代</a></li>
                  <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-workstyle"></span>仕事術</a></li>
                  <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-survey"></span>アンケート</a></li>
                  <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-design"></span>デザイン</a></li>
                  <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-interview"></span>インタビュー</a></li>
                  <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-discussion"></span>ディカッション</a></li>
                </ul>
              </div>
              <div class="CG2-drawerBody__separator"></div>
              <div class="CG2-drawerBody__nav">
                <ul>
                  <li><a href="#">CodeGridについて</a></li>
                  <li><a href="#">料金</a></li>
                  <li><a href="#">団体購読</a></li>
                  <li><a href="#">よくある質問</a></li>
                  <li><a href="#">書籍</a></li>
                  <li><a href="#">購読する</a></li>
                  <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-twitter"></span>公式Twitter</a></li>
                </ul>
              </div>
              <div class="CG2-drawerBody__separator"></div>
              <div class="CG2-drawerBody__nav">
                <ul>
                  <li class="CG2-drawerBody__navItem--plane"><a href="#">お問い合わせ</a></li>
                  <li class="CG2-drawerBody__navItem--plane"><a href="#">利用規約</a></li>
                  <li class="CG2-drawerBody__navItem--plane"><a href="#">プライバシーポリシー</a></li>
                  <li class="CG2-drawerBody__navItem--plane"><a href="#">特定商法に基づく表示</a></li>
                </ul>
              </div>

            </div>
          </div>

        </div>
        <div class="CG2-drawer__panelLeft" data-drawer-hide></div>
      </div>
      <div class="CG2-drawer__bg" data-drawer-close></div>
    </div>

## Container

/src/assets2/scss/_template.scss

- Template

コンテンツ配置/編集 領域
コンテンツ配置/編集 領域
コンテンツ配置/編集 領域

    <div class="CG2-container">
      <div class="CG2-container__inner">
        コンテンツ配置/編集 領域
      </div>
    </div>

    <div class="CG2-container">
      <div class="CG2-container__inner">
        コンテンツ配置/編集 領域
      </div>
    </div>

    <div class="CG2-container">
      <div class="CG2-container__inner">
        コンテンツ配置/編集 領域
      </div>
    </div>