## Template

## Page Header

/src/assets2/scss/codegrid-ui.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__search">        <div class="CG2-pageHeader__searchInner">          <input>        </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">        <a href="#"><img src="../../../assets2/img/CG2-pageHeader/logo.svg" alt="CodeGrid" width="125" height="24"></a>      </div>      <div class="CG2-pageHeader__search">        <div class="CG2-pageHeader__searchInner">          <input>        </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">          <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 class="CG2-pageHeader__opener" data-drawer-toggle></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/codegrid-ui.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">            <input>          </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-elementary"></span>入門</a></li>          <li><a href="#"><span class="CG2-icon-cat-practice"></span>実践</a></li>          <li><a href="#"><span class="CG2-icon-cat-standards"></span>仕様解説</a></li>          <li><a href="#"><span class="CG2-icon-cat-talk"></span>座談会</a></li>          <li><a href="#"><span class="CG2-icon-cat-architecture"></span>設計</a></li>          <li><a href="#"><span class="CG2-icon-cat-report"></span>レポート</a></li>          <li><a href="#"><span class="CG2-icon-cat-future"></span>未来・次世代</a></li>          <li><a href="#"><span class="CG2-icon-cat-workstyle"></span>仕事術</a></li>          <li><a href="#"><span class="CG2-icon-cat-survey"></span>アンケート</a></li>          <li><a href="#"><span class="CG2-icon-cat-design"></span>デザイン</a></li>          <li><a href="#"><span class="CG2-icon-cat-interview"></span>インタビュー</a></li>          <li><a href="#"><span class="CG2-icon-cat-discussion"></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/codegrid-ui.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">              <input>            </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/codegrid-ui.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>