CG2-pageHeaderPlacer
を併用すると高さを確保することができる、高さ確保が不要ならCG2-pageHeaderPlacer
を利用しないstyle="position:relative;"
を取り除いて使う<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>
<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>
<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>
<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-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>
<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>
<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>