## Category

## Tag

## All Colors

## customers

/src/assets2/scss/_components.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/_components.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">
              <ul>
                <li><a href="#"><span class="CG2-icon-list"></span></a></li>
                <li><button class="CG2-seriesList__itemUtilButton--favAdded" onclick="javascript:alert('added to fav list');"><span class="CG2-icon-star"></span></button></li>
              </ul>
            </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">
              <ul>
                <li><a href="#"><span class="CG2-icon-list"></span></a></li>
                <li><button class="CG2-seriesList__itemUtilButton--favAdded" onclick="javascript:alert('added to fav list');"><span class="CG2-icon-star"></span></button></li>
              </ul>
            </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/_components.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.png" alt="WebMoney" width="156" 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/_components.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>