## app-item-article

## narrowLayout

/src/assets2/scss/codegrid-ui.scss

- app-item-article

記事ページ用のレイアウト サイドバーに `.CG2-articleSeriesNav` 利用する

目次など

- 第1回「 仕様を知る 1 」
- 第2回「 仕様を知る 2 」

本文領域 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 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>

## articleBeforeLogin

/src/assets2/scss/codegrid-ui.scss

- app-item-article

この記事を読むには
購読の手続きが必要です

- 購読の手続きへ
- 購読済みの方はログイン

    <div class="CG2-articleBeforeLogin">  <div class="CG2-articleBeforeLogin__lead">この記事を読むには<br>購読の手続きが必要です</div>  <div class="CG2-articleBeforeLogin__sub"></div>  <div class="CG2-articleBeforeLogin__buttonContainer">    <ul>      <li><a class="CG2-button CG2-button--primary" href="#">購読の手続きへ</a></li>      <li><a class="CG2-button" href="#">購読済みの方はログイン</a></li>    </ul>  </div></div>

## articleTOC

/src/assets2/scss/codegrid-ui.scss

- app-item-article

# 目次

- はじめに
- flex-growとflex-shrink
- 利用可能な余白を計算する
- まとめ

    <section class="CG2-articleTOC">  <header class="CG2-articleTOC__header">    <h1>目次</h1>  </header>  <div class="CG2-articleTOC__body">    <div class="CG2-articleTOC__list">      <ul>        <li><a href="#">はじめに</a></li>        <li><a href="#">flex-growとflex-shrink</a></li>        <li><a href="#">利用可能な余白を計算する</a></li>        <li><a href="#">まとめ</a></li>      </ul>    </div>    <div class="CG2-articleTOC__util">      <ul>        <li><button class="CG2-button CG2-button--action"><span class="CG2-icon-star"></span> お気に入りに登録</button></li>        <li><button class="CG2-button">未読にする</button></li>      </ul>    </div>  </div></section>

## articleSeriesNav

/src/assets2/scss/codegrid-ui.scss

- app-item
- app-item-article

記事ページ `.CG2-narrowLayout` のサイドバー内で利用する

- 第1回「 仕様を知る 1 」
- 第2回「 仕様を知る 2 」
- 第3回「 Flexboxを実践する 1 」
- 第4回「 Flexboxを実践する 2 」
- ５こまではいる、長いと切れる長いと切れる長いと切れる

- ６こ目は次のUL
- ７こ目
- ８こ目
- ９こ目
- １０こ目

    <div class="CG2-articleSeriesNav">  <div class="CG2-articleSeriesNav__inner">    <ul>      <li><a href="#">第1回「 仕様を知る 1 」</a></li>      <li class="CG2-articleSeriesNav__item--current"><a href="#">第2回「 仕様を知る 2 」</a></li>      <li><a href="#">第3回「 Flexboxを実践する 1 」</a></li>      <li><a href="#">第4回「 Flexboxを実践する 2 」</a></li>      <li><a href="#">５こまではいる、長いと切れる長いと切れる長いと切れる</a></li>    </ul>    <ul>      <li><a href="#">６こ目は次のUL</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>

## article

/src/assets2/scss/codegrid-ui.scss

- app-item
- app-item-article

記事本文、markdownから変換されることを前提

## h2みだし

テキストリンクてきすと`code`テキストてきすとテキストてきすと

### h3みだし

テキストリンクてきすと`code`テキストてきすとテキストてきすと

#### h4みだし

テキストリンクてきすと`code`テキストてきすとテキストてきすと

- リストりすと
- リストりすと

1. リストりすと
2. リストりすと

見出しセル | 見出しセル | 見出しセル
--- | --- | ---
データセル | データセル | データセル
データセル | データセル | データセル

見出しセル | データセル | データセル
見出しセル | データセル | データセル

# *注：Autoprefixer

Autoprefixerに関しては、次の記事を参照してください。
「ビルドツールアラカルト」シリーズ

    <article class="CG2-article">   <h2>h2みだし</h2>   <p>テキスト<a href="#">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>   <h3>h3みだし</h3>   <p>テキスト<a href="#">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>   <h4>h4みだし</h4>   <p>テキスト<a href="#">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>   <ul>    <li>リストりすと</li>    <li>リストりすと</li>  </ul>   <ol>    <li>リストりすと</li>    <li>リストりすと</li>  </ol>   <table>    <tbody>      <tr>        <th>見出しセル</th>        <th>見出しセル</th>        <th>見出しセル</th>      </tr>      <tr>        <td>データセル</td>        <td>データセル</td>        <td>データセル</td>      </tr>      <tr>        <td>データセル</td>        <td>データセル</td>        <td>データセル</td>      </tr>    </tbody></table>    <table>      <tbody><tr>        <th>見出しセル</th>        <td>データセル</td>        <td>データセル</td>      </tr>      <tr>        <th>見出しセル</th>        <td>データセル</td>        <td>データセル</td>      </tr>    </tbody>  </table>   <aside>    <h1>*注：Autoprefixer</h1>    <p>Autoprefixerに関しては、次の記事を参照してください。<br><a href="#">「ビルドツールアラカルト」</a>シリーズ</p>  </aside> </article>

## articlePagination

/src/assets2/scss/codegrid-ui.scss

- app-item
- app-item-article

- 第1回 仕様を知る 1
- 第3回 Flexboxを実践する 1

    <div class="CG2-articlePagination">  <ul>    <li class="CG2-articlePagination__prev"><a href="#">第1回 仕様を知る 1</a></li>    <li class="CG2-articlePagination__next"><a href="#">第3回 Flexboxを実践する 1</a></li>  </ul></div>

## articleUtil

/src/assets2/scss/codegrid-ui.scss

- app-item
- app-item-article

    <div class="CG2-articleUtil">  <ul>    <li><button class="CG2-button CG2-button--action" data-socialitems-append><span class="CG2-icon-facebook"></span><span class="CG2-icon-twitter"></span><span class="CG2-icon-gplus"></span> シェアする</button></li>    <li><button class="CG2-button CG2-button--action"><span class="CG2-icon-star"></span> お気に入りに登録</button></li>  </ul>  <div class="CG2-articleUtil__socialItems"></div>  <script src="https://platform.twitter.com/widgets.js" async></script> </div>

## livecode

/src/assets2/scss/codegrid-ui.scss

- app-item
- app-item-article

ソースコードを埋め込むことができる

index.html

    <div class="flex">
      <div class="flexitem-1">Item1</div>
      <div class="flexitem-2">Item2</div>
      <div class="flex__item-3">Item3</div>
    </div>

    <section class="CG2-livecode">  <header class="CG2-livecode__header">    <div class="CG2-livecode__label">      index.html    </div>    <div class="CG2-livecode__nav">      <ul>        <li><a href="#">          <span class="CG2-icon-tool"></span> 全文選択        </a></li>        <li><a href="#">          <span class="CG2-icon-tool"></span> 新規タブで開く        </a></li>      </ul>    </div>  </header>  <div class="CG2-livecode__body">    <pre class="language-markup line-numbers"><code>&lt;div class="flex"&gt;  &lt;div class="flex__item-1"&gt;Item1&lt;/div&gt;  &lt;div class="flex__item-2"&gt;Item2&lt;/div&gt;  &lt;div class="flex__item-3"&gt;Item3&lt;/div&gt;&lt;/div&gt;</code></pre>  </div></section>

動く demo として、iframe を埋め込むことができる

iframeには、

- CG2-livecode__frame--small
- CG2-livecode__frame--large

を追加クラスとして明示することも可能。その場合それぞれ、iframeの高さが190px、590pxとなる。

# 埋め込みデモのタイトル

    <section class="CG2-livecode">  <h1>埋め込みデモのタイトル</h1>  <header class="CG2-livecode__header">    <div class="CG2-livecode__nav">      <ul>        <li><a href="#">          ソースコード：flex-basis/2        </a></li>        <li><a href="#">          <span class="CG2-icon-tool"></span> 新規タブで開く        </a></li>      </ul>    </div>  </header>  <div class="CG2-livecode__body">    <iframe src="https://s3-ap-northeast-1.amazonaws.com/codegrid/2015-css-flexiblebox/demo/2/flex-basis/1/index.html"></iframe>  </div></section>

## profileSimple

/src/assets2/scss/codegrid-ui.scss

- app-item
- app-item-article

記事ページの下部等、バイオグラフィー自体がメインではないコンテンツ用

ピクセル グリオ
フロントエンジニア

株式会社ピクセルグリッドの社員。2010年4月にTwitterに登録したがあまり活躍していない。

    <div class="CG2-profileSimple">  <div class="CG2-profileSimple__image">    <img src="http://img.pxgrid.net/120x120" alt="">  </div>  <div class="CG2-profileSimple__main">    <div class="CG2-profileSimple__header">      <div class="CG2-profileSimple__name">ピクセル グリオ</div>      <div class="CG2-profileSimple__title">フロントエンジニア</div>    </div>    <div class="CG2-profileSimple__text">      <p>株式会社ピクセルグリッドの社員。2010年4月にTwitterに登録したがあまり活躍していない。</p>    </div>  </div></div>