<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>
<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
内のボタンが変化する。
<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
がない。
<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>
Web媒体で使用するSVGデータの作成方法をAdobe Illustrator CCでのデータ作成、SVG書き出しを例に紹介します。まずは元データ作成時の環境設定、作成時の注意点などを解説します。
この記事ではまずSVGのコードとしての基本と、さまざまな実装方法を概観してみましょう。それぞれの特徴を捉えられると、実装方法の選択が適切にできます。
<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="__dummy__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="__dummy__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="__dummy__80x80" alt="長坂 菫" width="40" height="40"></a>
</div>
<div class="CG2-series__authorName">長坂 菫 | UIデザイナー</div>
</div>
</div>
</div>
</div>
第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="__dummy__80x80" alt="佐川 沙織" width="40" height="40"></a></li>
<li><a href=""><img src="__dummy__80x80" alt="河田 理香" width="40" height="40"></a></li>
<li><a href=""><img src="__dummy__80x80" alt="尾上 友美" width="40" height="40"></a></li>
<li><a href=""><img src="__dummy__80x80" alt="新田 道雄" width="40" height="40"></a></li>
<li><a href=""><img src="__dummy__80x80" alt="ピクセル グリオ" width="40" height="40"></a></li>
<li><a href=""><img src="__dummy__80x80" alt="安田 麻由" width="40" height="40"></a></li>
<li><a href=""><img src="__dummy__80x80" alt="野間 夏子" width="40" height="40"></a></li>
<li><a href=""><img src="__dummy__80x80" alt="神戸 克巳" width="40" height="40"></a></li>
</ul>
</div>
</div>
</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="__dummy__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="__dummy__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>
フレックスアイテムに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-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="__dummy__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>
技術サーベイの第1回目は、 JavaScriptトランスパイラ編。最終的にJavaScriptとして書き出される3つの言語の使用経験を聞きました。どんな理由で使うのか、その将来性に迫ります。
<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="__dummy__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="__dummy__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="__dummy__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="__dummy__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="__dummy__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="__dummy__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="__dummy__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="__dummy__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="__dummy__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="__dummy__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>
CG2-seriesList__articleOrder
の前にCG2-seriesList__articleIcon
が追加CG2-seriesList__article
にCG2-seriesList__article--unread
が追加js-toggle-fav-series
にCG2-seriesList__itemUtilButton--favAdded
が追加CG2-seriesList__authors
に著者分のCG2-seriesList__author
が入る(<a>
でくるまれる)CG2-seriesList__authors
の中身がCG2-seriesList__authorPicList
に置き換わるCG2-seriesList__itemMore
がくる<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="__dummy__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="__dummy__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="__dummy__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="__dummy__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="__dummy__80x80" alt="佐川 沙織" width="40" height="40"></a></li>
<li><a href=""><img src="__dummy__80x80" alt="影山 和子" width="40" height="40"></a></li>
<li><a href=""><img src="__dummy__80x80" alt="玉田 義之" width="40" height="40"></a></li>
<li><a href=""><img src="__dummy__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="__dummy__80x80" alt="佐川 沙織" width="40" height="40"></a></li>
<li><a href=""><img src="__dummy__80x80" alt="河田 理香" width="40" height="40"></a></li>
<li><a href=""><img src="__dummy__80x80" alt="尾上 友美" width="40" height="40"></a></li>
<li><a href=""><img src="__dummy__80x80" alt="新田 道雄" width="40" height="40"></a></li>
<li><a href=""><img src="__dummy__80x80" alt="ピクセル グリオ" width="40" height="40"></a></li>
<li><a href=""><img src="__dummy__80x80" alt="安田 麻由" width="40" height="40"></a></li>
<li><a href=""><img src="__dummy__80x80" alt="野間 夏子" width="40" height="40"></a></li>
<li><a href=""><img src="__dummy__80x80" alt="神戸 克巳" width="40" height="40"></a></li>
<li><a href=""><img src="__summy__80x80" alt="杉原 幸次郎" width="40" height="40"></a></li>
<li><a href=""><img src="__summy__80x80" alt="田代 隆男" width="40" height="40"></a></li>
<li><a href=""><img src="__summy__80x80" alt="新田 春子" width="40" height="40"></a></li>
<li><a href=""><img src="__summy__80x80" alt="中野 富子" width="40" height="40"></a></li>
<li><a href=""><img src="__summy__80x80" alt="玉田 義之" width="40" height="40"></a></li>
<li><a href=""><img src="__summy__80x80" alt="柳川 健治" width="40" height="40"></a></li>
<li><a href=""><img src="__summy__80x80" alt="長坂 菫" width="40" height="40"></a></li>
<li><a href=""><img src="__summy__80x80" alt="坪田 健之" width="40" height="40"></a></li>
<li><a href=""><img src="__summy__80x80" alt="仲村 孝二" width="40" height="40"></a></li>
<li><a href=""><img src="__summy__80x80" alt="橋本 孝治" width="40" height="40"></a></li>
<li><a href=""><img src="__summy__80x80" alt="大澤 直子" width="40" height="40"></a></li>
<li><a href=""><img src="__summy__80x80" alt="山口 弘一" width="40" height="40"></a></li>
<li><a href=""><img src="__summy__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
が追加されただけで、その他は特に変わらない。
<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="__dummy__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="__dummy__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="__dummy__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="__dummy__80x80" alt="佐川 沙織" width="40" height="40"></a></li>
<li><a href=""><img src="__dummy__80x80" alt="河田 理香" width="40" height="40"></a></li>
<li><a href=""><img src="__dummy__80x80" alt="尾上 友美" width="40" height="40"></a></li>
<li><a href=""><img src="__dummy__80x80" alt="新田 道雄" width="40" height="40"></a></li>
<li><a href=""><img src="__dummy__80x80" alt="ピクセル グリオ" width="40" height="40"></a></li>
<li><a href=""><img src="__dummy__80x80" alt="安田 麻由" width="40" height="40"></a></li>
<li><a href=""><img src="__dummy__80x80" alt="野間 夏子" width="40" height="40"></a></li>
<li><a href=""><img src="__dummy__80x80" alt="神戸 克巳" width="40" height="40"></a></li>
<li><a href=""><img src="__summy__80x80" alt="杉原 幸次郎" width="40" height="40"></a></li>
<li><a href=""><img src="__summy__80x80" alt="田代 隆男" width="40" height="40"></a></li>
<li><a href=""><img src="__summy__80x80" alt="新田 春子" width="40" height="40"></a></li>
<li><a href=""><img src="__summy__80x80" alt="中野 富子" width="40" height="40"></a></li>
<li><a href=""><img src="__summy__80x80" alt="玉田 義之" width="40" height="40"></a></li>
<li><a href=""><img src="__summy__80x80" alt="柳川 健治" width="40" height="40"></a></li>
<li><a href=""><img src="__summy__80x80" alt="長坂 菫" width="40" height="40"></a></li>
<li><a href=""><img src="__summy__80x80" alt="坪田 健之" width="40" height="40"></a></li>
<li><a href=""><img src="__summy__80x80" alt="仲村 孝二" width="40" height="40"></a></li>
<li><a href=""><img src="__summy__80x80" alt="橋本 孝治" width="40" height="40"></a></li>
<li><a href=""><img src="__summy__80x80" alt="大澤 直子" width="40" height="40"></a></li>
<li><a href=""><img src="__summy__80x80" alt="山口 弘一" width="40" height="40"></a></li>
<li><a href=""><img src="__summy__80x80" alt="影山 和子" width="40" height="40"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>