/src/assets2/scss/_components-app.scss
<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>
/src/assets2/scss/_components-app.scss
内部で別コンポーネント 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>
compactNav
/src/assets2/scss/_components-app.scss
別コンポーネント 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>
/src/assets2/scss/_components-app.scss
購読済
<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>
series
/src/assets2/scss/_components-app.scss
未購読・購読済、著者1人・2人
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="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回はピクセルグリッドが日常の業務でのクライアントとのコミュニケーション方法やコミュニケーションツールがテーマです。
<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>
/src/assets2/scss/_components-app.scss
<div class="CG2-categoryHeader">
<div class="CG2-categoryHeader__inner">
<div class="CG2-categoryHeader__icon">
<span class="CG2-icon-cat-future CG2-icon--colored"></span>
</div>
<div class="CG2-categoryHeader__text">
<h1>未来・次世代</h1>
<p>カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。</p>
</div>
</div>
</div>
articleHeader
/src/assets2/scss/_components-app.scss
第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>
inAppNotificationBar
/src/assets2/scss/_components-app.scss
アプリケーション内のメッセージを表示させたいときに使用。
メッセージのみ
<div class="CG2-inAppNotificationBar CG2-inAppNotificationBar--level2">
<div class="CG2-inAppNotificationBar__message">
ログアウトしました
</div>
</div>
メッセージとアクション
リンクなどの動線を入れたい場合は、CG2-inAppNotificationBar--withAction
を付与する。
<div class="CG2-inAppNotificationBar CG2-inAppNotificationBar--withAction">
<div class="CG2-inAppNotificationBar__message">
<span class="CG2-icon-exclamation-circle"></span>
現在、未購読状態です
</div>
<div class="CG2-inAppNotificationBar__action">
<a class="CG2-transparentButton" href="#">設定へ</a>
</div>
</div>
カラーバリエーション
<div class="CG2-inAppNotificationBar">
<div class="CG2-inAppNotificationBar__message">
レベルなし
</div>
</div>
<div class="CG2-inAppNotificationBar CG2-inAppNotificationBar--level1">
<div class="CG2-inAppNotificationBar__message">
レベル1
</div>
</div>
<div class="CG2-inAppNotificationBar CG2-inAppNotificationBar--level2">
<div class="CG2-inAppNotificationBar__message">
レベル2
</div>
</div>
<div class="CG2-inAppNotificationBar CG2-inAppNotificationBar--level3">
<div class="CG2-inAppNotificationBar__message">
レベル3
</div>
</div>
articleSeriesNav
/src/assets2/scss/_components-app.scss
記事ページ .CG2-narrowLayout
のサイドバー内で利用する
<div class="CG2-articleSeriesNav">
<div class="CG2-articleSeriesNav__inner">
<ul>
<li><a href="#">第1回「 仕様を知る 1 」</a></li>
<li class="CG2-articleSeriesNav__item--current"><a href="#">第2回「 仕様を知る 2 」</a></li>
<li><a href="#">第3回「 Flexboxを実践する 1 」</a></li>
<li><a href="#">第4回「 Flexboxを実践する 2 」</a></li>
<li><a href="#">5こまではいる、長いと切れる長いと切れる長いと切れる</a></li>
</ul>
<ul>
<li><a href="#">6こ目は次のUL</a></li>
<li><a href="#">7こ目</a></li>
<li><a href="#">8こ目</a></li>
<li><a href="#">9こ目</a></li>
<li><a href="#">10こ目</a></li>
</ul>
</div>
</div>
article
/src/assets2/scss/_components-app.scss
記事本文、markdownから変換されることを前提
h2みだし
テキストリンクてきすとcode
テキストてきすとテキストてきすと
h3みだし
テキストリンクてきすとcode
テキストてきすとテキストてきすと
h4みだし
テキストリンクてきすとcode
テキストてきすとテキストてきすと
- リストりすと
- リストりすと
見出しセル |
見出しセル |
見出しセル |
データセル |
データセル |
データセル |
データセル |
データセル |
データセル |
見出しセル |
データセル |
データセル |
見出しセル |
データセル |
データセル |
<article class="CG2-article">
<h2>h2みだし</h2>
<p>テキスト<a href="#">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>
<h3>h3みだし</h3>
<p>テキスト<a href="#">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>
<h4>h4みだし</h4>
<p>テキスト<a href="#">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>
<ul>
<li>リストりすと</li>
<li>リストりすと</li>
</ul>
<ol>
<li>リストりすと</li>
<li>リストりすと</li>
</ol>
<table>
<tbody>
<tr>
<th>見出しセル</th>
<th>見出しセル</th>
<th>見出しセル</th>
</tr>
<tr>
<td>データセル</td>
<td>データセル</td>
<td>データセル</td>
</tr>
<tr>
<td>データセル</td>
<td>データセル</td>
<td>データセル</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<th>見出しセル</th>
<td>データセル</td>
<td>データセル</td>
</tr>
<tr>
<th>見出しセル</th>
<td>データセル</td>
<td>データセル</td>
</tr>
</tbody>
</table>
</article>
articlePagination
/src/assets2/scss/_components-app.scss
<div class="CG2-articlePagination">
<ul>
<li class="CG2-articlePagination__prev"><a href="#">第1回 仕様を知る 1</a></li>
<li class="CG2-articlePagination__next"><a href="#">第3回 Flexboxを実践する 1</a></li>
</ul>
</div>
articleUtil
/src/assets2/scss/_components-app.scss
<div class="CG2-articleUtil">
<div class="CG2-articleUtil__socialItems">
<div class="CG2-articleUtil__socialItem CG2-articleUtil__socialItem--twitter">
<a href="https://twitter.com/share" data-lang="en" data-url="" data-text="シリーズ - タイトル" data-hashtags="codegrid" class="twitter-share-button">Tweet</a>
</div>
<div class="CG2-articleUtil__socialItem CG2-articleUtil__socialItem--facebook">
<iframe src="//www.facebook.com/plugins/like.php?href=&send=false&layout=standard&show_faces=true&font&colorscheme=light&action=like&height=68" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:68px;" allowTransparency="true"></iframe>
</div>
</div>
<script src="https://platform.twitter.com/widgets.js" async></script>
</div>
livecode
/src/assets2/scss/_components-app.scss
ソースコードを埋め込むことができる
<div class="flex">
<div class="flexitem-1">Item1</div>
<div class="flexitem-2">Item2</div>
<div class="flex__item-3">Item3</div>
</div>
<section class="CG2-livecode">
<header class="CG2-livecode__header">
<div class="CG2-livecode__label">
index.html
</div>
<div class="CG2-livecode__nav">
<ul>
<li><a href="#">
<span class="CG2-icon-tool"></span> 全文選択
</a></li>
<li><a href="#">
<span class="CG2-icon-tool"></span> 新規タブで開く
</a></li>
</ul>
</div>
</header>
<div class="CG2-livecode__body">
<pre class="language-markup line-numbers"><code><div class="flex">
<div class="flex__item-1">Item1</div>
<div class="flex__item-2">Item2</div>
<div class="flex__item-3">Item3</div>
</div></code></pre>
</div>
</section>
iframe埋め込み
作ったデモをiframeで埋め込める。
以下の追加クラスで、高さの指定が可能。
- CG2-livecode__frame--small
- CG2-livecode__frame--large
なお、iPhoneの場合はiframeが伸びる仕様を回避するため、高さが固定される。
<section class="CG2-livecode">
<h1>埋め込みデモのタイトル</h1>
<header class="CG2-livecode__header">
<div class="CG2-livecode__nav">
<ul>
<li><a href="#">
ソースコード:flex-basis/2
</a></li>
<li><a href="#">
<span class="CG2-icon-tool"></span> 新規タブで開く
</a></li>
</ul>
</div>
</header>
<div class="CG2-livecode__body">
<iframe src="https://s3-ap-northeast-1.amazonaws.com/codegrid/2015-css-flexiblebox/demo/2/flex-basis/1/index.html"></iframe>
</div>
</section>
profile
/src/assets2/scss/_components-app.scss
バイオグラフィー自体がメインのコンテンツ用
株式会社ピクセルグリッドの社員。2010年4月にTwitterに登録したがあまり活躍していない。
<div class="CG2-profile">
<div class="CG2-profile__image">
<img src="http://img.pxgrid.net/120x120" alt="">
</div>
<div class="CG2-profile__main">
<div class="CG2-profile__header">
<div class="CG2-profile__name">ピクセル グリオ</div>
<div class="CG2-profile__title">フロントエンジニア</div>
<div class="CG2-profile__links">
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Website</a></li>
</ul>
</div>
</div>
<div class="CG2-profile__text">
<p>株式会社ピクセルグリッドの社員。2010年4月にTwitterに登録したがあまり活躍していない。</p>
</div>
</div>
</div>
profileSimple
/src/assets2/scss/_components-app.scss
記事ページの下部等、バイオグラフィー自体がメインではないコンテンツ用
株式会社ピクセルグリッドの社員。2010年4月にTwitterに登録したがあまり活躍していない。
<div class="CG2-profileSimple">
<div class="CG2-profileSimple__image">
<img src="http://img.pxgrid.net/120x120" alt="">
</div>
<div class="CG2-profileSimple__main">
<div class="CG2-profileSimple__header">
<div class="CG2-profileSimple__name">ピクセル グリオ</div>
<div class="CG2-profileSimple__title">フロントエンジニア</div>
</div>
<div class="CG2-profileSimple__text">
<p>株式会社ピクセルグリッドの社員。2010年4月にTwitterに登録したがあまり活躍していない。</p>
</div>
</div>
</div>
authorList
/src/assets2/scss/_components-app.scss
<div class="CG2-authorList">
<div class="CG2-authorList__inner">
<div class="CG2-authorList__item">
<a href="#">
<div class="CG2-authorList__image"><img src="http://img.pxgrid.net/96x96" alt="" width="48" height="48"></div>
<div class="CG2-authorList__name">中村 享介</div>
<div class="CG2-authorList__title">代表取締役, フロントエンド・エンジニア</div>
<div class="CG2-authorList__numOfPosts">記事数24</div>
</a>
</div>
<div class="CG2-authorList__item">
<a href="#">
<div class="CG2-authorList__image"><img src="http://img.pxgrid.net/96x96" alt="" width="48" height="48"></div>
<div class="CG2-authorList__name">中村 享介</div>
<div class="CG2-authorList__title">フロントエンド・エンジニア</div>
<div class="CG2-authorList__numOfPosts">記事数24</div>
</a>
</div>
<div class="CG2-authorList__item">
<a href="#">
<div class="CG2-authorList__image"><img src="http://img.pxgrid.net/96x96" alt="" width="48" height="48"></div>
<div class="CG2-authorList__name">中村 享介</div>
<div class="CG2-authorList__title">フロントエンド・エンジニア</div>
<div class="CG2-authorList__numOfPosts">記事数24</div>
</a>
</div>
<div class="CG2-authorList__item">
<a href="#">
<div class="CG2-authorList__image"><img src="http://img.pxgrid.net/96x96" alt="" width="48" height="48"></div>
<div class="CG2-authorList__name">中村 享介</div>
<div class="CG2-authorList__title">フロントエンド・エンジニア</div>
<div class="CG2-authorList__numOfPosts">記事数24</div>
</a>
</div>
<div class="CG2-authorList__item">
<a href="#">
<div class="CG2-authorList__image"><img src="http://img.pxgrid.net/96x96" alt="" width="48" height="48"></div>
<div class="CG2-authorList__name">中村 享介</div>
<div class="CG2-authorList__title">フロントエンド・エンジニア</div>
<div class="CG2-authorList__numOfPosts">記事数24</div>
</a>
</div>
</div>
</div>
searchFailed
/src/assets2/scss/_components-app.scss
CG2-searchOption の CG2-searchLayout__result 内で利用する
未使用につき、不要の可能性あり
<div class="CG2-searchFailed">
<div class="CG2-searchFailed__text">結果が見つかりませんでした</div>
<div class="CG2-searchFailed__search">
<input>
</div>
</div>
settings
/src/assets2/scss/_components-app.scss
設定
Googleアカウント |
oyamada@pxgrid.com |
購読情報
購読情報
購読情報
決済方法 |
WebMoney |
有効期限 |
201X年12月31日 |
退会
<div class="CG2-settings">
<div class="CG2-settings__inner">
<div class="CG2-settings__col">
<div class="CG2-settings__heading">設定</div>
<div class="CG2-settings__field">
<div class="CG2-settings__fieldHGroup">
<table>
<tr>
<th>Googleアカウント</th>
<td>oyamada@pxgrid.com</td>
</tr>
</table>
</div>
</div>
<div class="CG2-settings__buttonContainer">
<ul>
<li>
<a class="CG2-button CG2-button--setting" href="">ログアウト</a>
</li>
</ul>
</div>
<form>
<div class="CG2-settings__field">
<div class="CG2-settings__fieldVGroup">
<div class="CG2-settings__fieldHeader">メールマガジンを受信するメールアドレス</div>
<div class="CG2-settings__fieldData">
<input type="email" value="oyamada@pxgrid.com">
</div>
</div>
</div>
<div class="CG2-settings__buttonContainer">
<ul>
<li>
<button type="button" class="CG2-button CG2-button--setting">変更</button>
</li>
</ul>
</div>
</form>
</div>
<div class="CG2-settings__col">
<div class="CG2-settings__heading">購読情報</div>
<div class="CG2-settings__field">
<div class="CG2-settings__fieldHGroup">
<table>
<tr>
<td>現在、購読の手続きはされていません。</td>
</tr>
</table>
</div>
</div>
<div class="CG2-settings__buttonContainer">
<ul>
<li>
<a class="CG2-button CG2-button--setting">購読の手続きを開始する</a>
</li>
</ul>
</div>
<div class="CG2-settings__heading">購読情報</div>
<div class="CG2-settings__field">
<div class="CG2-settings__fieldHGroup">
<table>
<tr>
<th>無料購読期間</th>
<td>残り30日</td>
</tr>
</table>
</div>
</div>
<div class="CG2-settings__field">
<div class="CG2-settings__fieldHGroup">
<table>
<tr>
<th>決済方法</th>
<td>PAY.JP</td>
</tr>
<tr>
<th>カード情報</th>
<td>XXXX</td>
</tr>
</table>
</div>
</div>
<div class="CG2-settings__buttonContainer">
<ul>
<li>
<a class="CG2-button CG2-button--setting">カード情報の更新</a>
</li>
</ul>
</div>
<div class="CG2-settings__heading">購読情報</div>
<div class="CG2-settings__field">
<div class="CG2-settings__fieldHGroup">
<table>
<tr>
<th>決済方法</th>
<td>WebMoney</td>
</tr>
<tr>
<th>有効期限</th>
<td>201X年12月31日</td>
</tr>
</table>
</div>
</div>
<div class="CG2-settings__buttonContainer">
<ul>
<li>
<a class="CG2-button CG2-button--setting">1ヶ月延長</a>
</li>
<li>
<a class="CG2-button CG2-button--setting">1年延長</a>
</li>
</ul>
</div>
<div class="CG2-settings__heading">退会</div>
<form>
<div class="CG2-settings__field">
<div class="CG2-settings__fieldVGroup">
<div class="CG2-settings__fieldHeader">退会理由を教えて下さい(1000文字以内)</div>
<div class="CG2-settings__fieldData"><textarea maxlength="1000"></textarea></div>
</div>
</div>
<div class="CG2-settings__buttonContainer">
<button type="button" class="CG2-button CG2-button--setting">CodeGridを退会し、購読を停止する</button>
</div>
</form>
</div>
</div>
</div>
/src/assets2/scss/_components-app.scss
<div class="CG2-formProgress">
<ol>
<li>1. ログイン方法について</li>
<li class="CG2-formProgress__item--current">2. 決済方法選択</li>
<li>3. 登録完了</li>
</ol>
</div>
signupFrom
/src/assets2/scss/_components-app.scss
購読料は月額800円(税抜)
PayPal払いなら30日間無料
再度エラーになる場合は以下よりお問い合わせください。
<div class="CG2-signupFrom">
<div class="CG2-signupFrom__lead">
購読料は月額800円(税抜)
<div class="CG2-signupFrom__leadSub">
PayPal払いなら30日間無料
</div>
</div>
<div class="CG2-signupFrom__information">
<p>支払い処理中にエラーが発生しました</p>
</div>
<div class="CG2-signupFrom__text">
<p>お手数ですがもう一度手続きをおこなってください。</p>
</div>
<div class="CG2-signupFrom__check">
<label><input type="checkbox">利用規約に同意する</label>
</div>
<div class="CG2-signupFrom__buttonContainer">
<ul>
<li><a class="CG2-button CG2-button--primary" href="#">再度支払い手続きをおこなう</a></li>
</ul>
<div class="CG2-signupFrom__buttonContainerText">
<p>※CodeGridの購読にはGoogleアカウントが必要です。 <a href="#">Googleアカウント作成</a></p>
</div>
</div>
<div class="CG2-signupFrom__buttonContainer CG2-signupFrom__buttonContainer--fullWidth">
<ul>
<li><a class="CG2-button CG2-button--primary" href="#">PayPalで支払う</a></li>
</ul>
<ul>
<li><a class="CG2-button CG2-button--primary" href="#">WebMoney 1ヶ月分</a></li>
<li><a class="CG2-button CG2-button--primary" href="#">WebMoney 1年分</a></li>
</ul>
<div class="CG2-signupFrom__buttonContainerText">
<p>※CodeGridの購読にはGoogleアカウントが必要です。 <a href="#">Googleアカウント作成</a></p>
</div>
</div>
<div class="CG2-signupFrom__annotation">
<p>再度エラーになる場合は以下よりお問い合わせください。</p>
</div>
</div>
customers
/src/assets2/scss/_components-shared.scss
通常(見出し、テキスト、ロゴ、ボタン)
customersについているstyle属性は外すこと。
団体購読も承っております
CodeGridは、すでにいくつもの会社で団体購読いただき、好評を得ています。
<section class="CG2-customers" style="background-color: #eee">
<h2 class="CG2-customers__heading">団体購読も承っております</h2>
<p class="CG2-customers__text">CodeGridは、すでにいくつもの会社で団体購読いただき、好評を得ています。</p>
<div class="CG2-customers__logos">
<ul>
<li><img src="http://img.pxgrid.net/58x30" width="58" height="30"></li>
<li><img src="http://img.pxgrid.net/211x25" width="211" height="25"></li>
<li><img src="http://img.pxgrid.net/208x30" width="208" height="30"></li>
<li><img src="http://img.pxgrid.net/101x30" width="101" height="30"></li>
<li><img src="http://img.pxgrid.net/210x35" width="210" height="35"></li>
<li><img src="http://img.pxgrid.net/116x25" width="116" height="25"></li>
<li><img src="http://img.pxgrid.net/123x35" width="123" height="35"></li>
<li><img src="http://img.pxgrid.net/151x40" width="151" height="40"></li>
<li><img src="http://img.pxgrid.net/111x35" width="111" height="35"></li>
<li><img src="http://img.pxgrid.net/152x35" width="152" height="35"></li>
</ul>
</div>
<div class="CG2-customers__button">
<a class="CG2-button CG2-button--primary" href="">団体購読について</a>
</div>
</section>
コンパクト(テキスト・ロゴのみ)
customersについているstyle属性は外すこと。
CodeGridは、すでにいくつもの会社で団体購読いただき、好評を得ています。
<section class="CG2-customers" style="background-color: #eee">
<p class="CG2-customers__text">CodeGridは、すでにいくつもの会社で団体購読いただき、好評を得ています。</p>
<div class="CG2-customers__logos">
<ul>
<li><img src="http://img.pxgrid.net/58x30" width="58" height="30"></li>
<li><img src="http://img.pxgrid.net/211x25" width="211" height="25"></li>
<li><img src="http://img.pxgrid.net/208x30" width="208" height="30"></li>
<li><img src="http://img.pxgrid.net/101x30" width="101" height="30"></li>
<li><img src="http://img.pxgrid.net/210x35" width="210" height="35"></li>
<li><img src="http://img.pxgrid.net/116x25" width="116" height="25"></li>
<li><img src="http://img.pxgrid.net/123x35" width="123" height="35"></li>
<li><img src="http://img.pxgrid.net/151x40" width="151" height="40"></li>
<li><img src="http://img.pxgrid.net/111x35" width="111" height="35"></li>
<li><img src="http://img.pxgrid.net/152x35" width="152" height="35"></li>
</ul>
</div>
</section>
paymentTable
/src/assets2/scss/_components-shared.scss
|
 |
 |
購読料 (税込金額) |
|
-
月払い
800
円
(税込864円)
-
年払い
9,600
円
(税込10,368円)
|
購読料 |
自動継続 |
随時購入 |
無料購読期間 |
|
|
<div class="CG2-paymentTable">
<table>
<thead>
<tr>
<th></th>
<th><img src="/build/assets2/img/logos/paypal.svg" alt="PayPal" width="100" height="25"></th>
<th><img src="/build/assets2/img/logos/webmoney.png" alt="WebMoney" width="156" height="30"></th>
</tr>
</thead>
<tbody>
<tr>
<th>購読料<br><span class="CG2-paymentTable__annotation">(税込金額)</span></th>
<td>
<div class="CG2-paymentTable__priceList">
<ul>
<li>
<div class="CG2-paymentTable__priceLabel">月額</div>
<div class="CG2-paymentTable__priceValue">800</div>
<div class="CG2-paymentTable__priceUnit">円</div>
<div class="CG2-paymentTable__priceAnnotation">(税込864円)</div>
</li>
</ul>
</div>
</td>
<td>
<div class="CG2-paymentTable__priceList">
<ul>
<li>
<div class="CG2-paymentTable__priceLabel">月払い</div>
<div class="CG2-paymentTable__priceValue">800</div>
<div class="CG2-paymentTable__priceUnit">円</div>
<div class="CG2-paymentTable__priceAnnotation">(税込864円)</div>
</li>
<li>
<div class="CG2-paymentTable__priceLabel">年払い</div>
<div class="CG2-paymentTable__priceValue">9,600</div>
<div class="CG2-paymentTable__priceUnit">円</div>
<div class="CG2-paymentTable__priceAnnotation">(税込10,368円)</div>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<th>購読料</th>
<td>自動継続</td>
<td>随時購入</td>
</tr>
<tr>
<th>無料購読期間</th>
<td>
<div class="CG2-paymentTable__valueList">
<ul>
<li>
<span class="CG2-paymentTable__valueText CG2--disableLargeScreen">無料購読期間</span>
<span class="CG2-paymentTable__value">30</span>
<span class="CG2-paymentTable__valueUnit">日</span>
</li>
</ul>
</div>
</td>
<td>
<div class="CG2-paymentTable__valueList">
<ul>
<li>
<span class="CG2-paymentTable__valueText CG2--disableLargeScreen">無料購読期間</span>
<span class="CG2-paymentTable__valueText">なし</span>
</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
paymentLine
/src/assets2/scss/_components-shared.scss
<div class="CG2-paymentLine">
<span class="CG2-paymentLine__label">月額</span>
<span class="CG2-paymentLine__value">800</span>
<span class="CG2-paymentLine__unit">円</span>
<span class="CG2-paymentLine__extra">(税込み864円)</span>
</div>
seriesList
/src/assets2/scss/_components-shared.scss
通常
- 未購読・非ログイン状態の場合、公開されてない記事には
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
がくる
<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>
<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>
<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="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>