<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>
内部で別コンポーネント CG2-compactNav を利用
<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]
を用意する<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>
別コンポーネント 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>
CG2-seriesList__article--unread
追加する<span class="CG2-icon-lock"></span>
を使う。CG2-icon--colored
は付与しない<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>
<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>
<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>
CG2-series__item--unread
を追加する<span class="CG2-icon-lock"></span>
を利用する。このときCG2-icon--colored
は不要双方向データバインディングに特化したVue.jsは、シンプルで学習コストも低いといわれます。第1回目はVue.jsがフレームワークとして、どんな強みをもっているのか、その特徴をコードから概観します。
双方向データバインディングに特化した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>
フレックスアイテムにflex-growやflex-shrinkを設定すると、フレックスコンテナの範囲内で伸びたり、縮んだりします。このときひとつひとつのアイテムの長さがどのように決まるのか解説します。
<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>