## app-item-articlelist

## seriesWeekHeader

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

- app-item
- app-item-articlelist

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

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

## seriesListHeader

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

- app-item
- app-item-articlelist

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

記事数 500 本

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

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

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

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

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

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

## compactNav

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

- app-item
- app-item-articlelist

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

- 最新順
- おすすめ順
- お気に入り
- 無料公開

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

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

## seriesHeader

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

- app-item
- app-item-articlelist

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

    <div class="CG2-seriesHeader">  <div class="CG2-seriesHeader__inner">    <div class="CG2-seriesHeader__category">      <div class="CG2-seriesHeader__categoryIcon">        <span class="CG2-icon-cat-architecture"></span>      </div>      <div class="CG2-seriesHeader__categoryName">カテゴリー名</div>    </div>    <div class="CG2-seriesHeader__main">      <div class="CG2-seriesHeader__mainInner">        <div class="CG2-seriesHeader__title">Vue.jsを使いこなす</div>        <div class="CG2-seriesHeader__length">          全<span class="CG2-seriesHeader__value">8</span>回        </div>      </div>    </div>    <div class="CG2-seriesHeader__utils">      <button class="CG2-transparentButton"><span class="CG2-icon-star"></span>このシリーズをお気に入りに登録</button>    </div>  </div>  <div class="CG2-seriesHeader__bg" style="background-image: url( './img/_01.jpg' )"></div></div>

## series

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

- app-item
- app-item-articlelist

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

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

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

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

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

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

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

## articleHeader

/src/assets2/scss/codegrid-ui.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( './img/_01.jpg' )"></div></div>