<div class="CG2-articleNotice CG2-articleNotice--level1">
<div class="CG2-articleNotice__head">
<span class="CG2-icon-exclamation-triangle"></span>
多くが古い情報の可能性があり、現在は推奨されない記事です
</div>
</div>
<div class="CG2-articleNotice CG2-articleNotice--level2">
<div class="CG2-articleNotice__head">
<span class="CG2-icon-exclamation-circle"></span>
一部古い情報の可能性があります
</div>
</div>
<div class="CG2-articleNotice CG2-articleNotice--level3">
<div class="CG2-articleNotice__head">
古い記事ですが、現在も使える情報です
</div>
</div>
記事ページ用のレイアウト
サイドバーに .CG2-articleSeriesNav
利用する
<div class="CG2-narrowLayout">
<div class="CG2-narrowLayout__main">
目次など
</div>
<div class="CG2-narrowLayout__sub">
<div class="CG2-articleSeriesNav">
<div class="CG2-articleSeriesNav__inner">
<ul>
<li><a href="#">第1回「 仕様を知る 1 」</a></li>
<li><a href="#">第2回「 仕様を知る 2 」</a></li>
</ul>
</div>
</div>
</div>
<div class="CG2-narrowLayout__main">
本文領域
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum est vitae risus congue, quis cursus lectus mattis. Maecenas mattis tempus mauris ultrices viverra. Donec eget justo ante. Aliquam accumsan leo egestas venenatis faucibus. Aliquam sed massa hendrerit, suscipit ipsum vel, lobortis quam. Aliquam mauris elit, eleifend eu porta vel, sodales at augue. Praesent cursus, nulla sit amet suscipit fringilla, nibh velit efficitur ligula, a feugiat turpis massa ac nunc. Cras consequat nibh in nulla faucibus eleifend.
Ut mattis velit dui, sed tristique felis laoreet vitae. Donec placerat ante vel elit pellentesque, sit amet vulputate nisi consequat. Pellentesque efficitur euismod commodo. Vivamus ac maximus eros, sit amet porttitor libero. Praesent eu vehicula tortor. Vestibulum eu magna finibus, viverra diam nec, pulvinar velit. Praesent in mi sit amet nisi suscipit dictum. Proin sit amet diam tincidunt, tristique tortor ac, luctus est. Vivamus venenatis orci non lacinia ultricies. Duis posuere sit amet elit nec pretium. Suspendisse eget efficitur arcu. Proin porttitor turpis ipsum, ac venenatis odio fermentum ut.
</div>
</div>
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>