## Blocks/app

## seriesWeekHeader

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

- app-item
- app-item-articlelist

前号 10 月 1 日発行
最新号 10 月 7 日発行
次号予告 10 月 14 日発行

    <div class="CG2-seriesWeekHeader">  <div class="CG2-seriesWeekHeader__inner">    <div class="CG2-seriesWeekHeader__prev">      <div class="CG2-seriesWeekHeader__prevInner">        <a href="#">          <span class="CG2-seriesWeekHeader__label">前号</span>          <span class="CG2-seriesWeekHeader__number">10</span>          <span class="CG2-seriesWeekHeader__text">月</span>          <span class="CG2-seriesWeekHeader__number">1</span>          <span class="CG2-seriesWeekHeader__text">日発行</span>        </a>      </div>    </div>    <div class="CG2-seriesWeekHeader__current">      <div class="CG2-seriesWeekHeader__currentInner">        <a href="#">          <span class="CG2-seriesWeekHeader__label">最新号</span>          <span class="CG2-seriesWeekHeader__number">10</span>          <span class="CG2-seriesWeekHeader__text">月</span>          <span class="CG2-seriesWeekHeader__number">7</span>          <span class="CG2-seriesWeekHeader__text">日発行</span>        </a>      </div>    </div>    <div class="CG2-seriesWeekHeader__next">      <div class="CG2-seriesWeekHeader__nextInner">        <a href="#">          <span class="CG2-seriesWeekHeader__label">次号予告</span>          <span class="CG2-seriesWeekHeader__number">10</span>          <span class="CG2-seriesWeekHeader__text">月</span>          <span class="CG2-seriesWeekHeader__number">14</span>          <span class="CG2-seriesWeekHeader__text">日発行</span>        </a>      </div>    </div>  </div></div>

## seriesListHeader

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

- app-item
- app-item-articlelist

内部で別コンポーネント CG2-compactNav を利用

記事数 500 本

    <div class="CG2-seriesListHeader">  <div class="CG2-seriesListHeader__articleLength">    <span class="CG2-seriesListHeader__label">記事数</span>    <span class="CG2-seriesListHeader__number">500</span>    <span class="CG2-seriesListHeader__unit">本</span>  </div>  <div class="CG2-seriesListHeader__nav">     <div class="CG2-compactNav">      <ul>        <li class="CG2-compactNav__item--current"><a href="#">最新順</a></li>        <li><a href="#">おすすめ順</a></li>        <li><a href="#">お気に入り</a></li>        <li><a href="#">無料公開</a></li>      </ul>      <div class="CG2-compactNav__navOpener"></div>    </div>   </div></div>

    <div class="CG2-seriesListHeader">  <div class="CG2-seriesListHeader__nav">     <div class="CG2-compactNav">      <ul>        <li class="CG2-compactNav__item--current"><a href="#">最新順</a></li>        <li><a href="#">おすすめ順</a></li>        <li><a href="#">お気に入り</a></li>        <li><a href="#">無料公開</a></li>      </ul>      <div class="CG2-compactNav__navOpener"></div>    </div>   </div></div>

タブ切り替え（表示toggle）の挙動の付与 （JSとの連携、以下で挙動確認可能）

- `data-cg2-tab-button`を明示する
- コンテンツ部は`[data-cg2-tab-content]`でグループ化した`[data-cg2-tab-pane]`を用意する

項目Aのコンテンツ
項目Bのコンテンツ

    <div class="CG2-seriesListHeader">  <div class="CG2-seriesListHeader__nav">     <div class="CG2-compactNav">      <ul>        <li class="CG2-compactNav__item--current"><a href="#itemA" data-cg2-tab-button>項目A</a></li>        <li><a href="#itemB" data-cg2-tab-button>項目B</a></li>      </ul>      <div class="CG2-compactNav__navOpener"></div>    </div>   </div></div>  <div data-cg2-tab-content>   <div id="itemA" data-cg2-tab-pane="current">    項目Aのコンテンツ  </div>   <div id="itemB" data-cg2-tab-pane>    項目Bのコンテンツ  </div> </div>

## compactNav

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

- app-item
- app-item-articlelist

別コンポーネント CG2-seriesListHeader 内で利用。利用方法は CG2-seriesListHeader を参照

    <div class="CG2-compactNav">  <ul>    <li class="CG2-compactNav__item--current"><a href="#">最新順</a></li>    <li><a href="#">おすすめ順</a></li>    <li><a href="#">お気に入り</a></li>    <li><a href="#">無料公開</a></li>  </ul>  <div class="CG2-compactNav__navOpener"></div></div>

## seriesHeader

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

- app-item
- app-item-articlelist

カテゴリー名
Vue.jsを使いこなす
全8回

    <div class="CG2-seriesHeader">  <div class="CG2-seriesHeader__inner">    <div class="CG2-seriesHeader__category">      <div class="CG2-seriesHeader__categoryIcon">        <span class="CG2-icon-cat-architecture"></span>      </div>      <div class="CG2-seriesHeader__categoryName">カテゴリー名</div>    </div>    <div class="CG2-seriesHeader__main">      <div class="CG2-seriesHeader__mainInner">        <div class="CG2-seriesHeader__title">Vue.jsを使いこなす</div>        <div class="CG2-seriesHeader__length">          全<span class="CG2-seriesHeader__value">8</span>回        </div>      </div>    </div>  </div>  <div class="CG2-seriesHeader__bg CG2-seriesHeader__bg--blurry" style="background-image: url( '/build/img/_01.jpg' )"></div></div>

## series

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

- app-item
- app-item-articlelist

- 未読時は`CG2-series__item--unread`を追加する
- 有料記事のアイコンは`<span class="CG2-icon-lock"></span>`を利用する。このとき`CG2-icon--colored`は不要

第1回 Vue.jsとは
2015/04/23

双方向データバインディングに特化したVue.jsは、シンプルで学習コストも低いといわれます。第1回目はVue.jsがフレームワークとして、どんな強みをもっているのか、その特徴をコードから概観します。

高津戸 壮 | フロントエンド・エンジニア
第1回 Vue.jsとは
2015/04/23

双方向データバインディングに特化したVue.jsは、シンプルで学習コストも低いといわれます。第1回目はVue.jsがフレームワークとして、どんな強みをもっているのか、その特徴をコードから概観します。

高津戸 壮 | フロントエンド・エンジニア
...
...

     <div class="CG2-series">  <div class="CG2-series__item">    <div class="CG2-series__itemHeader">      <a href="#">        <div class="CG2-series__itemIcon">          <span class="CG2-icon-unlock CG2-icon--colored"></span>        </div>        <div class="CG2-series__itemTitle">第1回 Vue.jsとは</div>        <div class="CG2-series__itemPubdate">2015/04/23</div>      </a>    </div>    <div class="CG2-series__itemBody">      <p>双方向データバインディングに特化したVue.jsは、シンプルで学習コストも低いといわれます。第1回目はVue.jsがフレームワークとして、どんな強みをもっているのか、その特徴をコードから概観します。</p>    </div>    <div class="CG2-series__authors">      <div class="CG2-series__author">        <div class="CG2-series__authorPic">          <img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">        </div>        <div class="CG2-series__authorName">高津戸 壮 | フロントエンド・エンジニア</div>      </div>    </div>  </div>   <div class="CG2-series__item CG2-series__item--unread">    <div class="CG2-series__itemHeader">      <a href="#">        <div class="CG2-series__itemIcon">          <span class="CG2-icon-unlock CG2-icon--colored"></span>        </div>        <div class="CG2-series__itemTitle">第1回 Vue.jsとは</div>        <div class="CG2-series__itemPubdate">2015/04/23</div>      </a>    </div>    <div class="CG2-series__itemBody">      <p>双方向データバインディングに特化したVue.jsは、シンプルで学習コストも低いといわれます。第1回目はVue.jsがフレームワークとして、どんな強みをもっているのか、その特徴をコードから概観します。</p>    </div>    <div class="CG2-series__authors">      <div class="CG2-series__author">        <div class="CG2-series__authorPic">          <img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">        </div>        <div class="CG2-series__authorName">高津戸 壮 | フロントエンド・エンジニア</div>      </div>    </div>  </div>   <div class="CG2-series__item">    ...  </div>   <div class="CG2-series__item">    ...  </div> </div>

## categoryHeader

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

- app-item

# 未来・次世代

カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。

    <div class="CG2-categoryHeader">  <div class="CG2-categoryHeader__inner">    <div class="CG2-categoryHeader__icon">      <span class="CG2-icon-cat-future CG2-icon--colored"></span>    </div>    <div class="CG2-categoryHeader__text">      <h1>未来・次世代</h1>      <p>カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。</p>    </div>  </div></div>

## articleHeader

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

- app-item
- app-item-articlelist

入門
そこが知りたい、 Flexible Box
第2回 仕様を知る 2

フレックスアイテムにflex-growやflex-shrinkを設定すると、フレックスコンテナの範囲内で伸びたり、縮んだりします。このときひとつひとつのアイテムの長さがどのように決まるのか解説します。

2015年 5月14日発行

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

    <div class="CG2-articleHeader">  <div class="CG2-articleHeader__inner">    <div class="CG2-articleHeader__category">      <div class="CG2-articleHeader__categoryIcon">        <span class="CG2-icon-cat-elementary"></span>      </div>      <div class="CG2-articleHeader__categoryName">入門</div>    </div>     <div class="CG2-articleHeader__main">      <div class="CG2-articleHeader__mainInner">        <div class="CG2-articleHeader__series">そこが知りたい、 Flexible Box</div>        <div class="CG2-articleHeader__title">第2回 仕様を知る 2</div>        <div class="CG2-articleHeader__abstract">          <p>フレックスアイテムにflex-growやflex-shrinkを設定すると、フレックスコンテナの範囲内で伸びたり、縮んだりします。このときひとつひとつのアイテムの長さがどのように決まるのか解説します。</p>        </div>        <div class="CG2-articleHeader__pubDate">2015年 5月14日発行</div>      </div>    </div>     <div class="CG2-articleHeader__pagenation">      <ul>        <li class="CG2-articleHeader__pagenationPrev"><a href="#">第1回 仕様を知る 1</a></li>        <li class="CG2-articleHeader__pagenationNext"><a href="#">第3回 Flexboxを実践する 1</a></li>      </ul>    </div>   </div>  <div class="CG2-articleHeader__bg CG2-articleHeader__bg--blurry" style="background-image: url( '/build/img/_01.jpg' )"></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>

## profile

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

- app-item

バイオグラフィー自体がメインのコンテンツ用

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

- Twitter
- Website

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

    <div class="CG2-profile">  <div class="CG2-profile__image">    <img src="http://img.pxgrid.net/120x120" alt="">  </div>  <div class="CG2-profile__main">    <div class="CG2-profile__header">      <div class="CG2-profile__name">ピクセル グリオ</div>      <div class="CG2-profile__title">フロントエンジニア</div>      <div class="CG2-profile__links">      <ul>        <li><a href="#">Twitter</a></li>        <li><a href="#">Website</a></li>      </ul>    </div>    </div>    <div class="CG2-profile__text">      <p>株式会社ピクセルグリッドの社員。2010年4月にTwitterに登録したがあまり活躍していない。</p>    </div>  </div></div>

## 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>

## authorList

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

- app-item

中村 享介
代表取締役, フロントエンド・エンジニア
記事数24
中村 享介
フロントエンド・エンジニア
記事数24
...
...
...

    <div class="CG2-authorList">  <div class="CG2-authorList__inner">     <div class="CG2-authorList__item">      <a href="#">        <div class="CG2-authorList__image"><img src="http://img.pxgrid.net/80x80" alt="" width="80" height="80"></div>        <div class="CG2-authorList__name">中村 享介</div>        <div class="CG2-authorList__title">代表取締役, フロントエンド・エンジニア</div>        <div class="CG2-authorList__numOfPosts">記事数24</div>      </a>    </div>     <div class="CG2-authorList__item">      <a href="#">        <div class="CG2-authorList__image"><img src="http://img.pxgrid.net/80x80" alt="" width="80" height="80"></div>        <div class="CG2-authorList__name">中村 享介</div>        <div class="CG2-authorList__title">フロントエンド・エンジニア</div>        <div class="CG2-authorList__numOfPosts">記事数24</div>      </a>    </div>     <div class="CG2-authorList__item">...</div>    <div class="CG2-authorList__item">...</div>    <div class="CG2-authorList__item">...</div>   </div></div>

## searchFailed

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

- app-item

CG2-searchOption の CG2-searchLayout__result 内で利用する 未使用につき、不要の可能性あり

結果が見つかりませんでした

    <div class="CG2-searchFailed">  <div class="CG2-searchFailed__text">結果が見つかりませんでした</div>  <div class="CG2-searchFailed__search">    <input>  </div></div>

## settings

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

- app-item

設定

ログインメールアドレス | oyamada@pxgrid.com

メールマガジンを受信するメールアドレス
購読情報

決済方法 | PayPal

退会
退会理由を教えて下さい（1000文字以内）

    <div class="CG2-settings">  <div class="CG2-settings__inner">    <div class="CG2-settings__col">      <div class="CG2-settings__heading">設定</div>      <div class="CG2-settings__field">        <div class="CG2-settings__fieldHGroup">          <table>            <tr>              <th>ログインメールアドレス</th>              <td>oyamada@pxgrid.com</td>            </tr>          </table>        </div>      </div>      <div class="CG2-settings__buttonContainer">        <button class="CG2-button CG2-button--setting">ログアウト</button>      </div>      <div class="CG2-settings__field">        <div class="CG2-settings__fieldVGroup">          <div class="CG2-settings__fieldHeader">メールマガジンを受信するメールアドレス</div>          <div class="CG2-settings__fieldData"><input type="email" value="oyamada@pxgrid.com"></div>        </div>      </div>      <div class="CG2-settings__buttonContainer">        <button class="CG2-button CG2-button--setting">変更</button>      </div>    </div>    <div class="CG2-settings__col">      <div class="CG2-settings__heading">購読情報</div>      <div class="CG2-settings__field">        <div class="CG2-settings__fieldHGroup">          <table>            <tr>              <th>決済方法</th>              <td>PayPal</td>            </tr>          </table>        </div>      </div>      <div class="CG2-settings__heading">退会</div>      <div class="CG2-settings__field">        <div class="CG2-settings__fieldVGroup">          <div class="CG2-settings__fieldHeader">退会理由を教えて下さい（1000文字以内）</div>          <div class="CG2-settings__fieldData"><textarea maxlength="1000"></textarea></div>        </div>      </div>      <div class="CG2-settings__buttonContainer">        <button class="CG2-button CG2-button--setting">CodeGridを退会し、購読を停止する</button>      </div>    </div>  </div></div>

## formProgress

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

- app-item
- app-form

1. 1. ログイン方法について
2. 2. 決済方法選択
3. 3. 登録完了

    <div class="CG2-formProgress">  <ol>    <li>1. ログイン方法について</li>    <li class="CG2-formProgress__item--current">2. 決済方法選択</li>    <li>3. 登録完了</li>  </ol></div>

## signupFrom

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

- app-item
- app-form

購読料は月額800円（税抜）
PayPal払いなら30日間無料

支払い処理中にエラーが発生しました

お手数ですがもう一度手続きをおこなってください。

利用規約に同意する

- 再度支払い手続きをおこなう

※CodeGridの購読にはGoogleアカウントが必要です。Googleアカウント作成

- PayPalで支払う

- WebMoney 1ヶ月分
- WebMoney 1年分

※CodeGridの購読にはGoogleアカウントが必要です。Googleアカウント作成

再度エラーになる場合は以下よりお問い合わせください。

    <div class="CG2-signupFrom">   <div class="CG2-signupFrom__lead">    購読料は月額800円（税抜）    <div class="CG2-signupFrom__leadSub">      PayPal払いなら30日間無料    </div>  </div>   <div class="CG2-signupFrom__information">    <p>支払い処理中にエラーが発生しました</p>  </div>   <div class="CG2-signupFrom__text">    <p>お手数ですがもう一度手続きをおこなってください。</p>  </div>   <div class="CG2-signupFrom__check">    <label><input type="checkbox">利用規約に同意する</label>  </div>   <div class="CG2-signupFrom__buttonContainer">    <ul>      <li><a class="CG2-button CG2-button--primary" href="#">再度支払い手続きをおこなう</a></li>    </ul>    <div class="CG2-signupFrom__buttonContainerText">      <p>※CodeGridの購読にはGoogleアカウントが必要です。　<a href="#">Googleアカウント作成</a></p>    </div>  </div>   <div class="CG2-signupFrom__buttonContainer CG2-signupFrom__buttonContainer--fullWidth">    <ul>      <li><a class="CG2-button CG2-button--primary" href="#">PayPalで支払う</a></li>    </ul>    <ul>      <li><a class="CG2-button CG2-button--primary" href="#">WebMoney 1ヶ月分</a></li>      <li><a class="CG2-button CG2-button--primary" href="#">WebMoney 1年分</a></li>    </ul>    <div class="CG2-signupFrom__buttonContainerText">      <p>※CodeGridの購読にはGoogleアカウントが必要です。　<a href="#">Googleアカウント作成</a></p>    </div>  </div>   <div class="CG2-signupFrom__annotation">    <p>再度エラーになる場合は以下よりお問い合わせください。</p>  </div></div>