## Blocks/shared

## customers

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

- app-item
- www-item

# 団体購読も承っております

CodeGridは、すでにいくつもの会社で団体購読いただき、好評を得ています。

    <section class="CG2-customers">  <h1>団体購読も承っております</h1>  <p>CodeGridは、すでにいくつもの会社で団体購読いただき、好評を得ています。</p>  <div class="CG2-customers__logos">    <ul>      <li><img src="http://img.pxgrid.net/109x66" alt="" width="109" height="66"></li>      <li><img src="http://img.pxgrid.net/158x79" alt="" width="158" height="79"></li>      <li><img src="http://img.pxgrid.net/158x61" alt="" width="158" height="61"></li>      <li><img src="http://img.pxgrid.net/140x80" alt="" width="140" height="80"></li>      <li><img src="http://img.pxgrid.net/196x58" alt="" width="196" height="58"></li>      <li><img src="http://img.pxgrid.net/176x69" alt="" width="176" height="69"></li>      <li><img src="http://img.pxgrid.net/216x65" alt="" width="216" height="65"></li>    </ul>  </div></section>

## seriesList

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

- app-item
- app-item-articlelist
- www-item

- 未読記事には`CG2-seriesList__article--unread`追加する
- 有料時のカギアイコンは`<span class="CG2-icon-lock"></span>`を使う。`CG2-icon--colored`は付与しない

## 通常

Web Fonts 自由自在
第3回
アイコンの配置テクニック
4/16
第2回
gulpで生成を自動化
4/9
第1回
Webアプリの利用
4/2
高津戸 壮 | フロントエンド・エンジニア
高津戸 壮 | フロントエンド・エンジニア
高津戸 壮 | フロントエンド・エンジニア
more

    <div class="CG2-seriesList">  <div class="CG2-seriesList__inner">     <div class="CG2-seriesList__item">      <div class="CG2-seriesList__itemHeader">        <div class="CG2-seriesList__itemCategory">          <a href="#"><span class="CG2-icon-cat-architecture"></span></a>        </div>        <div class="CG2-seriesList__itemTitle">          <a href="javascript:alert( 'シリーズ一覧へ' );">            <div class="CG2-seriesList__itemTitleText">Web Fonts 自由自在</div>          </a>        </div>        <div class="CG2-seriesList__itemUtil">          <a href="#"><div class="CG2-toolButton"></div></a>        </div>      </div>      <div class="CG2-seriesList__coverImage CG2-seriesList__coverImage--blurry" style="background-image: url( '/build/img/_01.jpg' )"></div>      <div class="CG2-seriesList__articles">        <div class="CG2-seriesList__article CG2-seriesList__article--unread">          <a href="#">            <div class="CG2-seriesList__articleIcon">              <span class="CG2-icon-unlock CG2-icon--colored"></span>            </div>            <div class="CG2-seriesList__articleOrder">第3回</div>            <div class="CG2-seriesList__articleTitle">アイコンの配置テクニック</div>            <div class="CG2-seriesList__articleDate">4/16</div>          </a>        </div>        <div class="CG2-seriesList__article">          <a href="#">            <div class="CG2-seriesList__articleIcon">              <span class="CG2-icon-unlock CG2-icon--colored"></span>            </div>            <div class="CG2-seriesList__articleOrder">第2回</div>            <div class="CG2-seriesList__articleTitle">gulpで生成を自動化</div>            <div class="CG2-seriesList__articleDate">4/9</div>          </a>        </div>        <div class="CG2-seriesList__article">          <a href="#">            <div class="CG2-seriesList__articleIcon">              <span class="CG2-icon-unlock CG2-icon--colored"></span>            </div>            <div class="CG2-seriesList__articleOrder">第1回</div>            <div class="CG2-seriesList__articleTitle">Webアプリの利用</div>            <div class="CG2-seriesList__articleDate">4/2</div>          </a>        </div>      </div>      <div class="CG2-seriesList__authors">        <a href="#">          <div class="CG2-seriesList__author">            <div class="CG2-seriesList__authorPic">              <img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">            </div>            <div class="CG2-seriesList__authorName">高津戸 壮 | フロントエンド・エンジニア</div>          </div>        </a>        <a href="#">          <div class="CG2-seriesList__author">            <div class="CG2-seriesList__authorPic">              <img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">            </div>            <div class="CG2-seriesList__authorName">高津戸 壮 | フロントエンド・エンジニア</div>          </div>        </a>        <a href="#">          <div class="CG2-seriesList__author">            <div class="CG2-seriesList__authorPic">              <img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">            </div>            <div class="CG2-seriesList__authorName">高津戸 壮 | フロントエンド・エンジニア</div>          </div>        </a>      </div>    </div>     <!-- .CG2-seriesList__item 繰り返し -->     <div class="CG2-seriesList__itemMore"><a href="#">more</a></div>   </div></div>

## full width

実践
Web Fonts 自由自在
第3回
アイコンの配置テクニック
4/16
高津戸 壮 | フロントエンド・エンジニア
高津戸 壮 | フロントエンド・エンジニア
高津戸 壮 | フロントエンド・エンジニア
more

    <div class="CG2-seriesList">  <div class="CG2-seriesList__inner">     <div class="CG2-seriesList__item CG2-seriesList__item--fullWidth">      <div class="CG2-seriesList__itemHeader">        <div class="CG2-seriesList__itemCategory">          <a href="#"><span class="CG2-icon-cat-architecture"></span>実践</a>        </div>        <div class="CG2-seriesList__itemTitle">Web Fonts 自由自在</div>        <div class="CG2-seriesList__itemUtil">          <a href="#"><div class="CG2-toolButton"></div></a>        </div>      </div>      <div class="CG2-seriesList__coverImage CG2-seriesList__coverImage--blurry" style="background-image: url( '/build/img/_01.jpg' )"></div>      <div class="CG2-seriesList__articles">        <div class="CG2-seriesList__article">          <a href="#">            <div class="CG2-seriesList__articleIcon">              <span class="CG2-icon-unlock CG2-icon--colored"></span>            </div>            <div class="CG2-seriesList__articleOrder">第3回</div>            <div class="CG2-seriesList__articleTitle">アイコンの配置テクニック</div>            <div class="CG2-seriesList__articleDate">4/16</div>          </a>        </div>      </div>      <div class="CG2-seriesList__authors">        <a href="#">          <div class="CG2-seriesList__author">            <div class="CG2-seriesList__authorPic">              <img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">            </div>            <div class="CG2-seriesList__authorName">高津戸 壮 | フロントエンド・エンジニア</div>          </div>        </a>        <a href="#">          <div class="CG2-seriesList__author">            <div class="CG2-seriesList__authorPic">              <img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">            </div>            <div class="CG2-seriesList__authorName">高津戸 壮 | フロントエンド・エンジニア</div>          </div>        </a>        <a href="#">          <div class="CG2-seriesList__author">            <div class="CG2-seriesList__authorPic">              <img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">            </div>            <div class="CG2-seriesList__authorName">高津戸 壮 | フロントエンド・エンジニア</div>          </div>        </a>      </div>    </div>     <!-- .CG2-seriesList__item.CG2-seriesList__item--fullWidth 繰り返し -->     <div class="CG2-seriesList__itemMore"><a href="#">more</a></div>   </div></div>

## paymentTable

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

- app-item
- app-form
- www-item

購読料 （税込金額） | 月額 800 円 （税込864円） | 月払い 800 円 （税込864円） 年払い 9,600 円 （税込10,368円）
購読料 | 自動継続 | 随時購入
無料購読期間 | 無料購読期間 30 日 | 無料購読期間 なし

    <div class="CG2-paymentTable">  <table>    <thead>      <tr>        <th></th>        <th><img src="/build/assets2/img/logos/paypal.svg" alt="PayPal" width="100" height="25"></th>        <th><img src="/build/assets2/img/logos/webmoney.svg" alt="WebMoney" width="120" height="30"></th>      </tr>    </thead>    <tbody>      <tr>        <th>購読料<br><span class="CG2-paymentTable__annotation">（税込金額）</span></th>        <td>          <div class="CG2-paymentTable__priceList">            <ul>              <li>                <div class="CG2-paymentTable__priceLabel">月額</div>                <div class="CG2-paymentTable__priceValue">800</div>                <div class="CG2-paymentTable__priceUnit">円</div>                <div class="CG2-paymentTable__priceAnnotation">（税込864円）</div>              </li>            </ul>          </div>        </td>        <td>          <div class="CG2-paymentTable__priceList">            <ul>              <li>                <div class="CG2-paymentTable__priceLabel">月払い</div>                <div class="CG2-paymentTable__priceValue">800</div>                <div class="CG2-paymentTable__priceUnit">円</div>                <div class="CG2-paymentTable__priceAnnotation">（税込864円）</div>              </li>              <li>                <div class="CG2-paymentTable__priceLabel">年払い</div>                <div class="CG2-paymentTable__priceValue">9,600</div>                <div class="CG2-paymentTable__priceUnit">円</div>                <div class="CG2-paymentTable__priceAnnotation">（税込10,368円）</div>              </li>            </ul>          </div>        </td>      </tr>      <tr>        <th>購読料</th>        <td>自動継続</td>        <td>随時購入</td>      </tr>      <tr>        <th>無料購読期間</th>        <td>          <div class="CG2-paymentTable__valueList">            <ul>              <li>                <span class="CG2-paymentTable__valueText CG2--disableLargeScreen">無料購読期間</span>                <span class="CG2-paymentTable__value">30</span>                <span class="CG2-paymentTable__valueUnit">日</span>              </li>            </ul>          </div>        </td>        <td>          <div class="CG2-paymentTable__valueList">            <ul>              <li>                <span class="CG2-paymentTable__valueText CG2--disableLargeScreen">無料購読期間</span>                <span class="CG2-paymentTable__valueText">なし</span>              </li>            </ul>          </div>        </td>      </tr>    </tbody>  </table></div>

## paymentLine

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

- app-item
- www-item

月額 800 円 （税込み864円）

    <div class="CG2-paymentLine">  <span class="CG2-paymentLine__label">月額</span>  <span class="CG2-paymentLine__value">800</span>  <span class="CG2-paymentLine__unit">円</span>  <span class="CG2-paymentLine__extra">（税込み864円）</span></div>