## Category

## Tag

## All Colors

## customers

/src/assets2/scss/_components-shared.scss

- app-item
- www-item

## 通常（見出し、テキスト、ロゴ、ボタン）

customersについているstyle属性は外すこと。

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

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

団体購読について

    <section class="CG2-customers" style="background-color: #eee">
      <h2 class="CG2-customers__heading">団体購読も承っております</h2>
      <p class="CG2-customers__text">CodeGridは、すでにいくつもの会社で団体購読いただき、好評を得ています。</p>
      <div class="CG2-customers__logos">
        <ul>
          <li><img src="http://img.pxgrid.net/58x30" width="58" height="30"></li>
          <li><img src="http://img.pxgrid.net/211x25" width="211" height="25"></li>
          <li><img src="http://img.pxgrid.net/208x30" width="208" height="30"></li>
          <li><img src="http://img.pxgrid.net/101x30" width="101" height="30"></li>
          <li><img src="http://img.pxgrid.net/210x35" width="210" height="35"></li>
          <li><img src="http://img.pxgrid.net/116x25" width="116" height="25"></li>
          <li><img src="http://img.pxgrid.net/123x35" width="123" height="35"></li>
          <li><img src="http://img.pxgrid.net/151x40" width="151" height="40"></li>
          <li><img src="http://img.pxgrid.net/111x35" width="111" height="35"></li>
          <li><img src="http://img.pxgrid.net/152x35" width="152" height="35"></li>
        </ul>
      </div>
      <div class="CG2-customers__button">
        <a class="CG2-button CG2-button--primary" href="">団体購読について</a>
      </div>
    </section>

## コンパクト（テキスト・ロゴのみ）

customersについているstyle属性は外すこと。

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

    <section class="CG2-customers" style="background-color: #eee">
      <p class="CG2-customers__text">CodeGridは、すでにいくつもの会社で団体購読いただき、好評を得ています。</p>
      <div class="CG2-customers__logos">
        <ul>
          <li><img src="http://img.pxgrid.net/58x30" width="58" height="30"></li>
          <li><img src="http://img.pxgrid.net/211x25" width="211" height="25"></li>
          <li><img src="http://img.pxgrid.net/208x30" width="208" height="30"></li>
          <li><img src="http://img.pxgrid.net/101x30" width="101" height="30"></li>
          <li><img src="http://img.pxgrid.net/210x35" width="210" height="35"></li>
          <li><img src="http://img.pxgrid.net/116x25" width="116" height="25"></li>
          <li><img src="http://img.pxgrid.net/123x35" width="123" height="35"></li>
          <li><img src="http://img.pxgrid.net/151x40" width="151" height="40"></li>
          <li><img src="http://img.pxgrid.net/111x35" width="111" height="35"></li>
          <li><img src="http://img.pxgrid.net/152x35" width="152" height="35"></li>
        </ul>
      </div>
    </section>

## paymentTable

/src/assets2/scss/_components-shared.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-shared.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>

## seriesList

/src/assets2/scss/_components-shared.scss

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

## 通常

- 未購読・非ログイン状態の場合、公開されてない記事には`CG2-seriesList__articleOrder`の前に`CG2-seriesList__articleIcon`が追加
- 未読の場合、`CG2-seriesList__article`に`CG2-seriesList__article--unread`が追加
- お気に入りに追加した場合、`js-toggle-fav-series`に`CG2-seriesList__itemUtilButton--favAdded`が追加
- 著者が3人までの場合、`CG2-seriesList__authors`に著者分の`CG2-seriesList__author`が入る（`<a>`でくるまれる）
- 著者が4人以上の場合、`CG2-seriesList__authors`の中身が`CG2-seriesList__authorPicList`に置き換わる
- appのトップでは、リストの最後には`CG2-seriesList__itemMore`がくる

Webの文字の読みやすさ

第3回
読みやすさのために
2014年07月17日
第2回
日本語の「読みやすさ」
2014年07月10日
第1回
あらためて、Webって？
2014年07月03日
中村 享介 | フロントエンド・エンジニア
小原 司 | UIデザイナー
丸山 陽子 | エディター
z-index再入門

第3回
z-indexの困った使用例
2014年05月29日
第2回
意図した順序に要素を重ねる
2014年05月22日
第1回
z-indexの仕組み
2014年05月15日
坂巻 翔大郎 | フロントエンド・エンジニア
今日から使えるCSS

第4回
CSS Custom Properties
2017年05月04日
第3回
position: sticky
2017年04月27日
第2回
@supportsルール
2017年02月16日

エンジニアに聞く、仕事の行方

第13回
奥野 賢太郎 編
2017年08月24日
第12回
矢倉 眞隆 編
2017年05月04日
第11回
森 大典 編
2016年07月28日

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-talk"></span></a>
            </div>
            <div class="CG2-seriesList__itemTitle">
              <div class="CG2-seriesList__itemTitleInner">
                <a href="">
                  <span class="CG2-seriesList__itemTitleText">Webの文字の読みやすさ</span>
                </a>
              </div>
            </div>
            <div class="CG2-seriesList__itemUtil">
              <ul>
                <li><a href=""><span class="CG2-icon-list"></span></a></li>
              </ul>
            </div>
          </div>
          <div style="background-image: url('//cdn.codegrid.net/2014-readable-text-design/main-blur.jpg')" class="CG2-seriesList__coverImage"></div>
          <div class="CG2-seriesList__articles">
            <div class="CG2-seriesList__article">
              <a href="">
                <div class="CG2-seriesList__articleIcon">
                  <div class="CG2-icon-lock"></div>
                </div>
                <div class="CG2-seriesList__articleOrder">第3回</div>
                <div class="CG2-seriesList__articleTitle">読みやすさのために</div>
                <div class="CG2-seriesList__articleDate">2014年07月17日</div>
              </a>
            </div>
            <div class="CG2-seriesList__article">
              <a href="">
                <div class="CG2-seriesList__articleIcon">
                  <div class="CG2-icon-lock"></div>
                </div>
                <div class="CG2-seriesList__articleOrder">第2回</div>
                <div class="CG2-seriesList__articleTitle">日本語の「読みやすさ」</div>
                <div class="CG2-seriesList__articleDate">2014年07月10日</div>
              </a>
            </div>
            <div class="CG2-seriesList__article">
              <a href="">
                <div class="CG2-seriesList__articleOrder">第1回</div>
                <div class="CG2-seriesList__articleTitle">あらためて、Webって？</div>
                <div class="CG2-seriesList__articleDate">2014年07月03日</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/80x80" 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/80x80" alt="" width="40" height="40">
                </div>
                <div class="CG2-seriesList__authorName">小原 司 | UIデザイナー</div>
              </div>
            </a>
            <a href="">
              <div class="CG2-seriesList__author">
                <div class="CG2-seriesList__authorPic">
                  <img src="http://img.pxgrid.net/80x80" alt="" width="40" height="40">
                </div>
                <div class="CG2-seriesList__authorName">丸山 陽子 | エディター</div>
              </div>
            </a>
          </div>
        </div>

        <!-- 購読済、ログイン後、お気に入り、未読あり -->

        <div class="CG2-seriesList__item">
          <div class="CG2-seriesList__itemHeader">
            <div class="CG2-seriesList__itemCategory">
              <a href=""><span class="CG2-icon-cat-mastering"></span></a>
            </div>
            <div class="CG2-seriesList__itemTitle">
              <div class="CG2-seriesList__itemTitleInner">
                <a href="">
                  <span class="CG2-seriesList__itemTitleText">z-index再入門</span>
                </a>
              </div>
            </div>
            <div class="CG2-seriesList__itemUtil">
              <ul>
                <li><a href=""><span class="CG2-icon-list"></span></a></li>
                <li>
                  <button type="button" aria-pressed="true" class="js-toggle-fav-series CG2-seriesList__itemUtilButton--favAdded">
                    <span aria-label="このシリーズのお気に入り解除" class="CG2-icon-star"></span>
                  </button>
                </li>
              </ul>
            </div>
          </div>
          <div style="background-image: url('//cdn.codegrid.net/2014-mastering-css/main-blur.jpg')" class="CG2-seriesList__coverImage"></div>
          <div class="CG2-seriesList__articles">
            <div class="CG2-seriesList__article CG2-seriesList__article--unread">
              <a href="">
                <div class="CG2-seriesList__articleOrder">第3回</div>
                <div class="CG2-seriesList__articleTitle">z-indexの困った使用例</div>
                <div class="CG2-seriesList__articleDate">2014年05月29日</div>
              </a>
            </div>
            <div class="CG2-seriesList__article">
              <a href="">
                <div class="CG2-seriesList__articleOrder">第2回</div>
                <div class="CG2-seriesList__articleTitle">意図した順序に要素を重ねる</div>
                <div class="CG2-seriesList__articleDate">2014年05月22日</div>
              </a>
            </div>
            <div class="CG2-seriesList__article">
              <a href="">
                <div class="CG2-seriesList__articleOrder">第1回</div>
                <div class="CG2-seriesList__articleTitle">z-indexの仕組み</div>
                <div class="CG2-seriesList__articleDate">2014年05月15日</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/80x80" alt="" width="40" height="40">
                </div>
                <div class="CG2-seriesList__authorName">坂巻 翔大郎 | フロントエンド・エンジニア</div>
              </div>
            </a>
          </div>
        </div>

        <!-- 著者4人、お気に入り -->

        <div class="CG2-seriesList__item">
          <div class="CG2-seriesList__itemHeader">
            <div class="CG2-seriesList__itemCategory">
              <a href=""><span class="CG2-icon-cat-standards"></span></a>
            </div>
            <div class="CG2-seriesList__itemTitle">
              <div class="CG2-seriesList__itemTitleInner">
                <a href="">
                  <span class="CG2-seriesList__itemTitleText">今日から使えるCSS</span>
                </a>
              </div>
            </div>
            <div class="CG2-seriesList__itemUtil">
              <ul>
                <li><a href=""><span class="CG2-icon-list"></span></a></li>
                <li>
                  <button type="button" aria-pressed="true" class="js-toggle-fav-series CG2-seriesList__itemUtilButton--favAdded">
                    <span aria-label="このシリーズのお気に入り解除" class="CG2-icon-star"></span>
                  </button>
                </li>
              </ul>
            </div>
          </div>
          <div style="background-image: url('//cdn.codegrid.net/2016-useful-css/main-blur.jpg')" class="CG2-seriesList__coverImage"></div>
          <div class="CG2-seriesList__articles">
            <div class="CG2-seriesList__article">
              <a href="">
                <div class="CG2-seriesList__articleOrder">第4回</div>
                <div class="CG2-seriesList__articleTitle">CSS Custom Properties</div>
                <div class="CG2-seriesList__articleDate">2017年05月04日</div>
              </a>
            </div>
            <div class="CG2-seriesList__article">
              <a href="">
                <div class="CG2-seriesList__articleOrder">第3回</div>
                <div class="CG2-seriesList__articleTitle">position: sticky</div>
                <div class="CG2-seriesList__articleDate">2017年04月27日</div>
              </a>
            </div>
            <div class="CG2-seriesList__article">
              <a href="">
                <div class="CG2-seriesList__articleOrder">第2回</div>
                <div class="CG2-seriesList__articleTitle">@supportsルール</div>
                <div class="CG2-seriesList__articleDate">2017年02月16日</div>
              </a>
            </div>
          </div>
          <div class="CG2-seriesList__authors">
            <div class="CG2-seriesList__authorPicList">
              <ul>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="坂巻 翔大郎" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="矢倉 眞隆" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="山田 敬美" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="小山田 晃浩" width="40" height="40"></a></li>
              </ul>
            </div>
          </div>
        </div>

        <!-- 著者たくさん、未読あり -->

        <div class="CG2-seriesList__item">
          <div class="CG2-seriesList__itemHeader">
            <div class="CG2-seriesList__itemCategory">
              <a href=""><span class="CG2-icon-cat-interview"></span></a>
            </div>
            <div class="CG2-seriesList__itemTitle">
              <div class="CG2-seriesList__itemTitleInner">
                <a href="">
                  <span class="CG2-seriesList__itemTitleText">エンジニアに聞く、仕事の行方</span>
                </a>
              </div>
            </div>
            <div class="CG2-seriesList__itemUtil">
              <ul>
                <li><a href=""><span class="CG2-icon-list"></span></a></li>
                <li>
                  <button type="button" aria-pressed="false" class="js-toggle-fav-series">
                    <span aria-label="このシリーズのお気に入り解除" class="CG2-icon-star"></span>
                  </button>
                </li>
              </ul>
            </div>
          </div>
          <div style="background-image: url('//cdn.codegrid.net/future-works/main-blur.jpg')" class="CG2-seriesList__coverImage"></div>
          <div class="CG2-seriesList__articles">
            <div class="CG2-seriesList__article CG2-seriesList__article--unread">
              <a href="">
                <div class="CG2-seriesList__articleOrder">第13回</div>
                <div class="CG2-seriesList__articleTitle">奥野 賢太郎 編</div>
                <div class="CG2-seriesList__articleDate">2017年08月24日</div>
              </a>
            </div>
            <div class="CG2-seriesList__article CG2-seriesList__article--unread">
              <a href="">
                <div class="CG2-seriesList__articleOrder">第12回</div>
                <div class="CG2-seriesList__articleTitle">矢倉 眞隆 編</div>
                <div class="CG2-seriesList__articleDate">2017年05月04日</div>
              </a>
            </div>
            <div class="CG2-seriesList__article">
              <a href="">
                <div class="CG2-seriesList__articleOrder">第11回</div>
                <div class="CG2-seriesList__articleTitle">森 大典 編</div>
                <div class="CG2-seriesList__articleDate">2016年07月28日</div>
              </a>
            </div>
          </div>
          <div class="CG2-seriesList__authors">
            <div class="CG2-seriesList__authorPicList">
              <ul>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="德田 和規" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="奥野 賢太郎" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="宇野 陽太" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="森 大典" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="坂巻 翔大郎" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="ピクセル グリオ" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="中村 享介" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="杉浦 有右嗣" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="矢倉 眞隆" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="中島 直博" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="大杉 充" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="小原 司" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="外村 奈津子" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="山田 敬美" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="高津戸 壮" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="丸山 陽子" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="山田 順久" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="小山田 晃浩" width="40" height="40"></a></li>
              </ul>
            </div>
          </div>
        </div>

        <!-- more -->

        <div class="CG2-seriesList__itemMore">
          <a href="">more</a>
        </div>

      </div>
    </div>

## 全幅

appトップの今週号や、各号のページで利用。

`CG2-seriesList__item`に`CG2-seriesList__item--fullWidth`が追加されただけで、その他は特に変わらない。

Chrome DevToolsをモバイル開発で使いこなす

第2回
モバイルWebアプリ開発に活用
2017年06月01日
矢倉 眞隆 | フロントエンド・エンジニア
今日から使えるCSS

第2回
@supportsルール
2017年02月16日
坂巻 翔大郎 | フロントエンド・エンジニア
矢倉 眞隆 | フロントエンド・エンジニア
ピクセルグリッドの開発環境サーベイ 2017

第1回
エディタとおすすめツール編
2017年03月02日

    <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-mastering"></span></a>
            </div>
            <div class="CG2-seriesList__itemTitle">
              <div class="CG2-seriesList__itemTitleInner">
                <a href="">
                  <span class="CG2-seriesList__itemTitleText">Chrome DevToolsをモバイル開発で使いこなす</span>
                </a>
              </div>
            </div>
            <div class="CG2-seriesList__itemUtil">
              <ul>
                <li><a href=""><span class="CG2-icon-list"></span></a></li>
              </ul>
            </div>
          </div>
          <div style="background-image: url('//cdn.codegrid.net/2017-chrome-devtools/main-blur.jpg')" class="CG2-seriesList__coverImage"></div>
          <div class="CG2-seriesList__articles">
            <div class="CG2-seriesList__article">
              <a href="">
                <div class="CG2-seriesList__articleIcon">
                  <div class="CG2-icon-lock"></div>
                </div>
                <div class="CG2-seriesList__articleOrder">第2回</div>
                <div class="CG2-seriesList__articleTitle">モバイルWebアプリ開発に活用</div>
                <div class="CG2-seriesList__articleDate">2017年06月01日</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/80x80" alt="" width="40" height="40">
                </div>
                <div class="CG2-seriesList__authorName">矢倉 眞隆 | フロントエンド・エンジニア</div>
              </div>
            </a>
          </div>
        </div>

        <!-- 購読済、お気に入り -->

        <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-standards"></span></a>
            </div>
            <div class="CG2-seriesList__itemTitle">
              <div class="CG2-seriesList__itemTitleInner">
                <a href="">
                  <span class="CG2-seriesList__itemTitleText">今日から使えるCSS</span>
                </a>
              </div>
            </div>
            <div class="CG2-seriesList__itemUtil">
              <ul>
                <li><a href=""><span class="CG2-icon-list"></span></a></li>
                <li>
                  <button type="button" aria-pressed="false" class="js-toggle-fav-series CG2-seriesList__itemUtilButton--favAdded">
                    <span aria-label="このシリーズのお気に入り解除" class="CG2-icon-star"></span>
                  </button>
                </li>
              </ul>
            </div>
          </div>
          <div style="background-image: url('//cdn.codegrid.net/2016-useful-css/main-blur.jpg')" class="CG2-seriesList__coverImage"></div>
          <div class="CG2-seriesList__articles">
            <div class="CG2-seriesList__article">
              <a href="">
                <div class="CG2-seriesList__articleOrder">第2回</div>
                <div class="CG2-seriesList__articleTitle">@supportsルール</div>
                <div class="CG2-seriesList__articleDate">2017年02月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/80x80" 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/80x80" alt="" width="40" height="40">
                </div>
                <div class="CG2-seriesList__authorName">矢倉 眞隆 | フロントエンド・エンジニア</div>
              </div>
            </a>
          </div>
        </div>

        <!-- 著者たくさん、未読あり -->

        <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-survey"></span></a>
            </div>
            <div class="CG2-seriesList__itemTitle">
              <div class="CG2-seriesList__itemTitleInner">
                <a href="">
                  <span class="CG2-seriesList__itemTitleText">ピクセルグリッドの開発環境サーベイ 2017</span>
                </a>
              </div>
            </div>
            <div class="CG2-seriesList__itemUtil">
              <ul>
                <li><a href=""><span class="CG2-icon-list"></span></a></li>
                <li>
                  <button type="button" aria-pressed="false" class="js-toggle-fav-series">
                    <span aria-label="このシリーズのお気に入り解除" class="CG2-icon-star"></span>
                  </button>
                </li>
              </ul>
            </div>
          </div>
          <div style="background-image: url('//cdn.codegrid.net/2017-tool-survey/main-blur.jpg')" class="CG2-seriesList__coverImage"></div>
          <div class="CG2-seriesList__articles">
            <div class="CG2-seriesList__article CG2-seriesList__article--unread">
              <a href="">
                <div class="CG2-seriesList__articleOrder">第1回</div>
                <div class="CG2-seriesList__articleTitle">エディタとおすすめツール編</div>
                <div class="CG2-seriesList__articleDate">2017年03月02日</div>
              </a>
            </div>
          </div>
          <div class="CG2-seriesList__authors">
            <div class="CG2-seriesList__authorPicList">
              <ul>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="森 大典" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="杉浦 有右嗣" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="中村 享介" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="高津戸 壮" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="小山田 晃浩" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="德田 和規" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="山田 順久" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="小原 司" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="山田 敬美" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="坂巻 翔大郎" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="丸山 陽子" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="宇野 陽太" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="大杉 充" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="中島 直博" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="矢倉 眞隆" width="40" height="40"></a></li>
                <li><a href=""><img src="http://img.pxgrid.net/80x80" alt="奥野 賢太郎" width="40" height="40"></a></li>
              </ul>
            </div>
          </div>
        </div>

      </div>
    </div>