CodeGridは、すでにいくつもの会社で団体購読いただき、好評を得ています。
<section class="CG2-customers">
<h1>団体購読も承っております</h1>
<p>CodeGridは、すでにいくつもの会社で団体購読いただき、好評を得ています。</p>
<div class="CG2-customers__logos">
<ul>
<li><img src="http://img.pxgrid.net/109x66" alt="" width="109" height="66"></li>
<li><img src="http://img.pxgrid.net/158x79" alt="" width="158" height="79"></li>
<li><img src="http://img.pxgrid.net/158x61" alt="" width="158" height="61"></li>
<li><img src="http://img.pxgrid.net/140x80" alt="" width="140" height="80"></li>
<li><img src="http://img.pxgrid.net/196x58" alt="" width="196" height="58"></li>
<li><img src="http://img.pxgrid.net/176x69" alt="" width="176" height="69"></li>
<li><img src="http://img.pxgrid.net/216x65" alt="" width="216" height="65"></li>
</ul>
</div>
</section>
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="http://img.pxgrid.net/80x80" alt="" width="40" height="40">
</div>
<div class="CG2-seriesList__authorName">中村 享介 | フロントエンド・エンジニア</div>
</div>
</a>
<a href="">
<div class="CG2-seriesList__author">
<div class="CG2-seriesList__authorPic">
<img src="http://img.pxgrid.net/80x80" alt="" width="40" height="40">
</div>
<div class="CG2-seriesList__authorName">小原 司 | UIデザイナー</div>
</div>
</a>
<a href="">
<div class="CG2-seriesList__author">
<div class="CG2-seriesList__authorPic">
<img src="http://img.pxgrid.net/80x80" alt="" width="40" height="40">
</div>
<div class="CG2-seriesList__authorName">丸山 陽子 | エディター</div>
</div>
</a>
</div>
</div>
<!-- 購読済、ログイン後、お気に入り、未読あり -->
<div class="CG2-seriesList__item">
<div class="CG2-seriesList__itemHeader">
<div class="CG2-seriesList__itemCategory">
<a href=""><span class="CG2-icon-cat-mastering"></span></a>
</div>
<div class="CG2-seriesList__itemTitle">
<div class="CG2-seriesList__itemTitleInner">
<a href="">
<span class="CG2-seriesList__itemTitleText">z-index再入門</span>
</a>
</div>
</div>
<div class="CG2-seriesList__itemUtil">
<ul>
<li><a href=""><span class="CG2-icon-list"></span></a></li>
<li>
<button type="button" aria-pressed="true" class="js-toggle-fav-series CG2-seriesList__itemUtilButton--favAdded">
<span aria-label="このシリーズのお気に入り解除" class="CG2-icon-star"></span>
</button>
</li>
</ul>
</div>
</div>
<div style="background-image: url('//cdn.codegrid.net/2014-mastering-css/main-blur.jpg')" class="CG2-seriesList__coverImage"></div>
<div class="CG2-seriesList__articles">
<div class="CG2-seriesList__article CG2-seriesList__article--unread">
<a href="">
<div class="CG2-seriesList__articleOrder">第3回</div>
<div class="CG2-seriesList__articleTitle">z-indexの困った使用例</div>
<div class="CG2-seriesList__articleDate">2014年05月29日</div>
</a>
</div>
<div class="CG2-seriesList__article">
<a href="">
<div class="CG2-seriesList__articleOrder">第2回</div>
<div class="CG2-seriesList__articleTitle">意図した順序に要素を重ねる</div>
<div class="CG2-seriesList__articleDate">2014年05月22日</div>
</a>
</div>
<div class="CG2-seriesList__article">
<a href="">
<div class="CG2-seriesList__articleOrder">第1回</div>
<div class="CG2-seriesList__articleTitle">z-indexの仕組み</div>
<div class="CG2-seriesList__articleDate">2014年05月15日</div>
</a>
</div>
</div>
<div class="CG2-seriesList__authors">
<a href="">
<div class="CG2-seriesList__author">
<div class="CG2-seriesList__authorPic">
<img src="http://img.pxgrid.net/80x80" alt="" width="40" height="40">
</div>
<div class="CG2-seriesList__authorName">坂巻 翔大郎 | フロントエンド・エンジニア</div>
</div>
</a>
</div>
</div>
<!-- 著者4人、お気に入り -->
<div class="CG2-seriesList__item">
<div class="CG2-seriesList__itemHeader">
<div class="CG2-seriesList__itemCategory">
<a href=""><span class="CG2-icon-cat-standards"></span></a>
</div>
<div class="CG2-seriesList__itemTitle">
<div class="CG2-seriesList__itemTitleInner">
<a href="">
<span class="CG2-seriesList__itemTitleText">今日から使えるCSS</span>
</a>
</div>
</div>
<div class="CG2-seriesList__itemUtil">
<ul>
<li><a href=""><span class="CG2-icon-list"></span></a></li>
<li>
<button type="button" aria-pressed="true" class="js-toggle-fav-series CG2-seriesList__itemUtilButton--favAdded">
<span aria-label="このシリーズのお気に入り解除" class="CG2-icon-star"></span>
</button>
</li>
</ul>
</div>
</div>
<div style="background-image: url('//cdn.codegrid.net/2016-useful-css/main-blur.jpg')" class="CG2-seriesList__coverImage"></div>
<div class="CG2-seriesList__articles">
<div class="CG2-seriesList__article">
<a href="">
<div class="CG2-seriesList__articleOrder">第4回</div>
<div class="CG2-seriesList__articleTitle">CSS Custom Properties</div>
<div class="CG2-seriesList__articleDate">2017年05月04日</div>
</a>
</div>
<div class="CG2-seriesList__article">
<a href="">
<div class="CG2-seriesList__articleOrder">第3回</div>
<div class="CG2-seriesList__articleTitle">position: sticky</div>
<div class="CG2-seriesList__articleDate">2017年04月27日</div>
</a>
</div>
<div class="CG2-seriesList__article">
<a href="">
<div class="CG2-seriesList__articleOrder">第2回</div>
<div class="CG2-seriesList__articleTitle">@supportsルール</div>
<div class="CG2-seriesList__articleDate">2017年02月16日</div>
</a>
</div>
</div>
<div class="CG2-seriesList__authors">
<div class="CG2-seriesList__authorPicList">
<ul>
<li><a href=""><img src="http://img.pxgrid.net/80x80" alt="坂巻 翔大郎" width="40" height="40"></a></li>
<li><a href=""><img src="http://img.pxgrid.net/80x80" alt="矢倉 眞隆" width="40" height="40"></a></li>
<li><a href=""><img src="http://img.pxgrid.net/80x80" alt="山田 敬美" width="40" height="40"></a></li>
<li><a href=""><img src="http://img.pxgrid.net/80x80" alt="小山田 晃浩" width="40" height="40"></a></li>
</ul>
</div>
</div>
</div>
<!-- 著者たくさん、未読あり -->
<div class="CG2-seriesList__item">
<div class="CG2-seriesList__itemHeader">
<div class="CG2-seriesList__itemCategory">
<a href=""><span class="CG2-icon-cat-interview"></span></a>
</div>
<div class="CG2-seriesList__itemTitle">
<div class="CG2-seriesList__itemTitleInner">
<a href="">
<span class="CG2-seriesList__itemTitleText">エンジニアに聞く、仕事の行方</span>
</a>
</div>
</div>
<div class="CG2-seriesList__itemUtil">
<ul>
<li><a href=""><span class="CG2-icon-list"></span></a></li>
<li>
<button type="button" aria-pressed="false" class="js-toggle-fav-series">
<span aria-label="このシリーズのお気に入り解除" class="CG2-icon-star"></span>
</button>
</li>
</ul>
</div>
</div>
<div style="background-image: url('//cdn.codegrid.net/future-works/main-blur.jpg')" class="CG2-seriesList__coverImage"></div>
<div class="CG2-seriesList__articles">
<div class="CG2-seriesList__article CG2-seriesList__article--unread">
<a href="">
<div class="CG2-seriesList__articleOrder">第13回</div>
<div class="CG2-seriesList__articleTitle">奥野 賢太郎 編</div>
<div class="CG2-seriesList__articleDate">2017年08月24日</div>
</a>
</div>
<div class="CG2-seriesList__article CG2-seriesList__article--unread">
<a href="">
<div class="CG2-seriesList__articleOrder">第12回</div>
<div class="CG2-seriesList__articleTitle">矢倉 眞隆 編</div>
<div class="CG2-seriesList__articleDate">2017年05月04日</div>
</a>
</div>
<div class="CG2-seriesList__article">
<a href="">
<div class="CG2-seriesList__articleOrder">第11回</div>
<div class="CG2-seriesList__articleTitle">森 大典 編</div>
<div class="CG2-seriesList__articleDate">2016年07月28日</div>
</a>
</div>
</div>
<div class="CG2-seriesList__authors">
<div class="CG2-seriesList__authorPicList">
<ul>
<li><a href=""><img src="http://img.pxgrid.net/80x80" alt="德田 和規" width="40" height="40"></a></li>
<li><a href=""><img src="http://img.pxgrid.net/80x80" alt="奥野 賢太郎" width="40" height="40"></a></li>
<li><a href=""><img src="http://img.pxgrid.net/80x80" alt="宇野 陽太" width="40" height="40"></a></li>
<li><a href=""><img src="http://img.pxgrid.net/80x80" alt="森 大典" width="40" height="40"></a></li>
<li><a href=""><img src="http://img.pxgrid.net/80x80" alt="坂巻 翔大郎" width="40" height="40"></a></li>
<li><a href=""><img src="http://img.pxgrid.net/80x80" alt="ピクセル グリオ" width="40" height="40"></a></li>
<li><a href=""><img src="http://img.pxgrid.net/80x80" alt="中村 享介" width="40" height="40"></a></li>
<li><a href=""><img src="http://img.pxgrid.net/80x80" alt="杉浦 有右嗣" width="40" height="40"></a></li>
<li><a href=""><img src="http://img.pxgrid.net/80x80" alt="矢倉 眞隆" width="40" height="40"></a></li>
<li><a href=""><img src="http://img.pxgrid.net/80x80" alt="中島 直博" width="40" height="40"></a></li>
<li><a href=""><img src="http://img.pxgrid.net/80x80" alt="大杉 充" width="40" height="40"></a></li>
<li><a href=""><img src="http://img.pxgrid.net/80x80" alt="小原 司" width="40" height="40"></a></li>
<li><a href=""><img src="http://img.pxgrid.net/80x80" alt="外村 奈津子" width="40" height="40"></a></li>
<li><a href=""><img src="http://img.pxgrid.net/80x80" alt="山田 敬美" width="40" height="40"></a></li>
<li><a href=""><img src="http://img.pxgrid.net/80x80" alt="高津戸 壮" width="40" height="40"></a></li>
<li><a href=""><img src="http://img.pxgrid.net/80x80" alt="丸山 陽子" width="40" height="40"></a></li>
<li><a href=""><img src="http://img.pxgrid.net/80x80" alt="山田 順久" width="40" height="40"></a></li>
<li><a href=""><img src="http://img.pxgrid.net/80x80" alt="小山田 晃浩" width="40" height="40"></a></li>
</ul>
</div>
</div>
</div>
<!-- more -->
<div class="CG2-seriesList__itemMore">
<a href="">more</a>
</div>
</div>
</div>
appトップの今週号や、各号のページで利用。
CG2-seriesList__item
にCG2-seriesList__item--fullWidth
が追加されただけで、その他は特に変わらない。
<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>
![]() |
||
---|---|---|
購読料 (税込金額) |
|
|
購読料 | 自動継続 | 随時購入 |
無料購読期間 |
|
|
<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>
<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>