## Category

## Tag

## All Colors

## seriesWeekHeader

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

- app-item
- app-item-articlelist

## 購読済

設計
jQuery初心者のためのJavaScript設計トレーニング
全1回

    <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">jQuery初心者のためのJavaScript設計トレーニング</div>
            <div class="CG2-seriesHeader__length">
              全<span class="CG2-seriesHeader__value">1</span>回
            </div>
          </div>
        </div>
        <div class="CG2-seriesHeader__utils">
          <button id="js-toggle-fav-series" type="button" aria-pressed="false" class="CG2-transparentButton">
            <span aria-hidden="true" class="CG2-icon-star"></span>
            <span class="CG2-transparentButton__favText">このシリーズをお気に入りに登録</span>
          </button>
        </div>
      </div>
      <div style="background-image: url(//cdn.codegrid.net/2016-js-training-for-beginners/main-blur.jpg)" class="CG2-seriesHeader__bg"></div>
    </div>

## 購読済、お気に入り追加

`CG2-seriesHeader__utils`内のボタンが変化する。

デザイン
きちんと学ぶユーザーインターフェース
全4回

    <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">きちんと学ぶユーザーインターフェース</div>
            <div class="CG2-seriesHeader__length">
              全<span class="CG2-seriesHeader__value">4</span>回
            </div>
          </div>
        </div>
        <div class="CG2-seriesHeader__utils">
          <button id="js-toggle-fav-series" type="button" aria-pressed="true" class="CG2-transparentButton CG2-transparentButton--favAdded">
            <span aria-hidden="true" class="CG2-icon-star"></span>
            <span class="CG2-transparentButton__favText">このシリーズをお気に入りに登録</span>
          </button>
        </div>
      </div>
      <div style="background-image: url(//cdn.codegrid.net/2017-mastering-ui/main-blur.jpg)" class="CG2-seriesHeader__bg"></div>
    </div>

## 未購読・非ログイン

`CG2-seriesHeader__utils`がない。

未来・次世代
一歩先行くCSS
全2回

    <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">一歩先行くCSS</div>
            <div class="CG2-seriesHeader__length">
              全<span class="CG2-seriesHeader__value">2</span>回
            </div>
          </div>
        </div>
      </div>
      <div style="background-image: url(//cdn.codegrid.net/2016-future-css/main-blur.jpg)" class="CG2-seriesHeader__bg"></div>
    </div>

## series

/src/assets2/scss/_components-app.scss

- app-item
- app-item-articlelist

## 未購読・購読済、著者1人・2人

第2回 SVGデータの作成 1
2014年05月15日

Web媒体で使用するSVGデータの作成方法をAdobe Illustrator CCでのデータ作成、SVG書き出しを例に紹介します。まずは元データ作成時の環境設定、作成時の注意点などを解説します。

小原 司 | UIデザイナー
第1回 SVGコードの基本
2014年05月08日

この記事ではまずSVGのコードとしての基本と、さまざまな実装方法を概観してみましょう。それぞれの特徴を捉えられると、実装方法の選択が適切にできます。

小山田 晃浩 | フロントエンド・エンジニア
小原 司 | UIデザイナー

    <div class="CG2-series">
      <div class="CG2-series__item">
        <div class="CG2-series__itemHeader">
          <a href="">
            <div class="CG2-series__itemIcon">
              <div class="CG2-icon-lock"></div>
            </div>
            <div class="CG2-series__itemTitle">第2回 SVGデータの作成 1</div>
            <div class="CG2-series__itemPubdate">2014年05月15日</div>
          </a>
        </div>
        <div class="CG2-series__itemBody">
          <p>Web媒体で使用するSVGデータの作成方法をAdobe Illustrator CCでのデータ作成、SVG書き出しを例に紹介します。まずは元データ作成時の環境設定、作成時の注意点などを解説します。</p>
        </div>
        <div class="CG2-series__authors">
          <div class="CG2-series__author">
            <div class="CG2-series__authorPic">
              <a href=""><img src="http://img.pxgrid.net/80x80" alt="小原 司" width="40" height="40"></a>
            </div>
            <div class="CG2-series__authorName">小原 司 | UIデザイナー</div>
          </div>
        </div>
      </div>
      <div class="CG2-series__item">
        <div class="CG2-series__itemHeader">
          <a href="">
            <div class="CG2-series__itemTitle">第1回 SVGコードの基本</div>
            <div class="CG2-series__itemPubdate">2014年05月08日</div>
          </a>
        </div>
        <div class="CG2-series__itemBody">
          <p>この記事ではまずSVGのコードとしての基本と、さまざまな実装方法を概観してみましょう。それぞれの特徴を捉えられると、実装方法の選択が適切にできます。</p>
        </div>
        <div class="CG2-series__authors">
          <div class="CG2-series__author">
            <div class="CG2-series__authorPic">
              <a href=""><img src="http://img.pxgrid.net/80x80" alt="小山田 晃浩" width="40" height="40"></a>
            </div>
            <div class="CG2-series__authorName">小山田 晃浩 | フロントエンド・エンジニア</div>
          </div>
          <div class="CG2-series__author">
            <div class="CG2-series__authorPic">
              <a href=""><img src="http://img.pxgrid.net/80x80" alt="小原 司" width="40" height="40"></a>
            </div>
            <div class="CG2-series__authorName">小原 司 | UIデザイナー</div>
          </div>
        </div>
      </div>
    </div>

## 著者複数、未読

第1回 コミュニケーションツール
2013年10月10日

第1回はピクセルグリッドが日常の業務でのクライアントとのコミュニケーション方法やコミュニケーションツールがテーマです。

    <div class="CG2-series">
      <div class="CG2-series__item CG2-series__item--unread">
        <div class="CG2-series__itemHeader">
          <a href="">
            <div class="CG2-series__itemTitle">第1回 コミュニケーションツール</div>
            <div class="CG2-series__itemPubdate">2013年10月10日</div>
          </a>
        </div>
        <div class="CG2-series__itemBody">
          <p>第1回はピクセルグリッドが日常の業務でのクライアントとのコミュニケーション方法やコミュニケーションツールがテーマです。</p>
        </div>
        <div class="CG2-series__authors">
          <div class="CG2-series__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>
            </ul>
          </div>
        </div>
      </div>
    </div>

## articleHeader

/src/assets2/scss/_components-app.scss

- app-item
- app-item-articlelist

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

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

2015年 5月14日発行
坂巻 翔大郎
フロントエンド・エンジニア
坂巻 翔大郎

- 前回
- 次回

- このシリーズの記事一覧をみる

    <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">
              <a href="javascript:alert( 'シリーズ一覧へ' );">
                そこが知りたい、 Flexible Box
              </a>
            </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 class="CG2-articleHeader__authors">
              <div class="CG2-articleHeader__author">
                <a href="#">
                  <div class="CG2-articleHeader__authorImage">
                    <img src="http://img.pxgrid.net/48x48" alt="">
                  </div>
                  <div class="CG2-articleHeader__authorName">坂巻 翔大郎</div>
                  <div class="CG2-articleHeader__authorTitle">フロントエンド・エンジニア</div>
                </a>
              </div>
              <div class="CG2-articleHeader__author">
                <a href="#">
                  <div class="CG2-articleHeader__authorImage">
                    <img src="http://img.pxgrid.net/48x48" alt="">
                  </div>
                  <div class="CG2-articleHeader__authorName">坂巻 翔大郎</div>
                </a>
              </div>
            </div>

          </div>
        </div>

        <div class="CG2-articleHeader__pagenation">
          <ul>
            <li class="CG2-articleHeader__pagenationPrev"><a href="#">前回</a></li>
            <li class="CG2-articleHeader__pagenationNext"><a href="#">次回</a></li>
          </ul>
        </div>

        <div class="CG2-articleHeader__utils">
          <ul>
            <li><a href="#" class="CG2-transparentButton"><span class="CG2-icon-list"></span>このシリーズの記事一覧をみる</a></li>
            <li><button class="CG2-transparentButton"><span class="CG2-icon-star"></span>このシリーズをお気に入りに登録</button></li>
            <li><button class="CG2-transparentButton">未読にする</button></li>
          </ul>
        </div>

      </div>
      <div class="CG2-articleHeader__bg" style="background-image: url(//cdn.codegrid.net/2015-css-flexiblebox/main-blur.jpg)"></div>
    </div>

## 通常

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

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

2015年04月16日発行
坂巻 翔大郎
フロントエンド・エンジニア

- 前回
- 次回

- このシリーズの記事一覧をみる

    <div class="CG2-articleHeader">
      <div class="CG2-articleHeader__inner">
        <div class="CG2-articleHeader__category">
          <div class="CG2-articleHeader__categoryIcon">
            <span class="CG2-icon-cat-standards"></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年04月16日発行</div>
            <div class="CG2-articleHeader__authors">
              <div class="CG2-articleHeader__author">
                <a href="">
                  <div class="CG2-articleHeader__authorImage">
                    <img src="http://img.pxgrid.net/48x48" alt="坂巻 翔大郎">
                  </div>
                  <div class="CG2-articleHeader__authorName">坂巻 翔大郎</div>
                  <div class="CG2-articleHeader__authorTitle">フロントエンド・エンジニア</div>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="CG2-articleHeader__pagenation">
          <ul>
            <li class="CG2-articleHeader__pagenationPrev"><a href="">前回</a></li>
            <li class="CG2-articleHeader__pagenationNext"><a href="">次回</a></li>
          </ul>
        </div>
        <div class="CG2-articleHeader__utils">
          <ul>
            <li>
              <a href="" class="CG2-transparentButton"><span class="CG2-icon-list"></span>このシリーズの記事一覧をみる</a>
            </li>
            <li>
              <button id="js-toggle-fav-series" type="button" aria-pressed="false" class="CG2-transparentButton">
                <span aria-hidden="true" class="CG2-icon-star"></span>
                <span class="CG2-transparentButton__favText">このシリーズをお気に入りに登録</span>
              </button>
            </li>
            <li>
              <button id="js-unread" class="CG2-transparentButton">未読にする</button>
            </li>
          </ul>
        </div>
      </div>
      <div style="background-image: url(//cdn.codegrid.net/2015-css-flexiblebox/main-blur.jpg)" class="CG2-articleHeader__bg"></div>
    </div>

## 著者複数、前次回なし、お気に入り済、未読押下後

アンケート
ピクセルグリッド技術サーベイ 2015
第1回 JavaScriptトランスパイラ編

技術サーベイの第1回目は、 JavaScriptトランスパイラ編。最終的にJavaScriptとして書き出される3つの言語の使用経験を聞きました。どんな理由で使うのか、その将来性に迫ります。

2015年06月18日発行
中村 享介
高津戸 壮
小山田 晃浩
德田 和規
山田 順久
小原 司
山田 敬美
坂巻 翔大郎
中島 直博
宇野 陽太

- このシリーズの記事一覧をみる

    <div data-page-id="entry-main" class="CG2-articleHeader">
      <div class="CG2-articleHeader__inner">
        <div class="CG2-articleHeader__category">
          <div class="CG2-articleHeader__categoryIcon">
            <span class="CG2-icon-cat-survey"></span>
          </div>
          <div class="CG2-articleHeader__categoryName">アンケート</div>
        </div>
        <div class="CG2-articleHeader__main">
          <div class="CG2-articleHeader__mainInner">
            <div class="CG2-articleHeader__series">ピクセルグリッド技術サーベイ 2015</div>
            <div class="CG2-articleHeader__title">第1回 JavaScriptトランスパイラ編</div>
            <div class="CG2-articleHeader__abstract">
              <p>技術サーベイの第1回目は、 JavaScriptトランスパイラ編。最終的にJavaScriptとして書き出される3つの言語の使用経験を聞きました。どんな理由で使うのか、その将来性に迫ります。</p>
            </div>
            <div class="CG2-articleHeader__pubDate">2015年06月18日発行</div>
            <div class="CG2-articleHeader__authors">
              <div class="CG2-articleHeader__author">
                <a href="">
                  <div class="CG2-articleHeader__authorImage"><img src="http://img.pxgrid.net/48x48" alt="中村 享介"></div>
                  <div class="CG2-articleHeader__authorName">中村 享介</div>
                </a>
              </div>
              <div class="CG2-articleHeader__author">
                <a href="">
                  <div class="CG2-articleHeader__authorImage"><img src="http://img.pxgrid.net/48x48" alt="高津戸 壮"></div>
                  <div class="CG2-articleHeader__authorName">高津戸 壮</div>
                </a>
              </div>
              <div class="CG2-articleHeader__author">
                <a href="">
                  <div class="CG2-articleHeader__authorImage"><img src="http://img.pxgrid.net/48x48" alt="小山田 晃浩"></div>
                  <div class="CG2-articleHeader__authorName">小山田 晃浩</div>
                </a>
              </div>
              <div class="CG2-articleHeader__author">
                <a href="">
                  <div class="CG2-articleHeader__authorImage"><img src="http://img.pxgrid.net/48x48" alt="德田 和規"></div>
                  <div class="CG2-articleHeader__authorName">德田 和規</div>
                </a>
              </div>
              <div class="CG2-articleHeader__author">
                <a href="">
                  <div class="CG2-articleHeader__authorImage"><img src="http://img.pxgrid.net/48x48" alt="山田 順久"></div>
                  <div class="CG2-articleHeader__authorName">山田 順久</div>
                </a>
              </div>
              <div class="CG2-articleHeader__author">
                <a href="">
                  <div class="CG2-articleHeader__authorImage"><img src="http://img.pxgrid.net/48x48" alt="小原 司"></div>
                  <div class="CG2-articleHeader__authorName">小原 司</div>
                </a>
              </div>
              <div class="CG2-articleHeader__author">
                <a href="">
                  <div class="CG2-articleHeader__authorImage"><img src="http://img.pxgrid.net/48x48" alt="山田 敬美"></div>
                  <div class="CG2-articleHeader__authorName">山田 敬美</div>
                </a>
              </div>
              <div class="CG2-articleHeader__author">
                <a href="">
                  <div class="CG2-articleHeader__authorImage"><img src="http://img.pxgrid.net/48x48" alt="坂巻 翔大郎"></div>
                  <div class="CG2-articleHeader__authorName">坂巻 翔大郎</div>
                </a>
              </div>
              <div class="CG2-articleHeader__author">
                <a href="">
                  <div class="CG2-articleHeader__authorImage"><img src="http://img.pxgrid.net/48x48" alt="中島 直博"></div>
                  <div class="CG2-articleHeader__authorName">中島 直博</div>
                </a>
              </div>
              <div class="CG2-articleHeader__author">
                <a href="">
                  <div class="CG2-articleHeader__authorImage"><img src="http://img.pxgrid.net/48x48" alt="宇野 陽太"></div>
                  <div class="CG2-articleHeader__authorName">宇野 陽太</div>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="CG2-articleHeader__pagenation">
          <ul>
          </ul>
        </div>
        <div class="CG2-articleHeader__utils">
          <ul>
            <li>
              <a href="" class="CG2-transparentButton"><span class="CG2-icon-list"></span>このシリーズの記事一覧をみる</a>
            </li>
            <li>
              <button id="js-toggle-fav-series" type="button" aria-pressed="false" class="CG2-transparentButton CG2-transparentButton--favAdded">
                <span aria-hidden="true" class="CG2-icon-star"></span>
                <span class="CG2-transparentButton__favText">このシリーズのお気に入り解除</span>
              </button>
            </li>
            <li>
              <button id="js-unread" class="CG2-transparentButton" disabled>未読にする</button>
            </li>
          </ul>
        </div>
      </div>
      <div style="background-image: url(//cdn.codegrid.net/2015-tech-survey/main-blur.jpg)" class="CG2-articleHeader__bg"></div>
    </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>