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>
![]() |
||
---|---|---|
購読料 (税込金額) |
|
|
購読料 | 自動継続 | 随時購入 |
無料購読期間 |
|
|
<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>
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-logo3d">
<div class="CG2-logo3d__inner">
<div class="CG2-logo3d__overlayText">
フロントエンドに<br class="CG2--disableLargeScreen CG2--disableMiddleScreen">関わる人々のガイド
</div>
</div>
</div>
three.min.js (r72)、Logo3D.jsを読み込み、new CGUI.Logo3D( document.querySelector( '.CG2-logo3d__inner' )
する必要がある
CodeGridで執筆しているのは、ピクセルグリッドのフロントエンドエンジニアたち。書籍執筆や講演の実績を持つエンジニアも多数在籍しています。だから、配信される記事では実際にプロジェクトで使った現場の実感から、本当に実務に必要な知識をお届けします。また、CodeGridは専任の編集者が編集のうえで配信しますので、記事の正確さ読みやすさにも自信があります。
忙しいと追うのを忘れがちになる新しい技術情報。エンジニア同士の会話でついていけなかったなんてことはありませんか? CodeGridでは、最新トレンド技術もきちんと検証した上でしっかり解説します。もちろん「今さら聞けない」と思われがちな入門的な記事も配信。CodeGridを読んでいれば、基礎から最新トレンドまでフロントエンド界隈の情報をキャッチできます。
<div class="CG2-features">
<section class="CG2-features__item">
<h2 class="CG2-features__heading">執筆陣は現役のフロントエンドエンジニア</h2>
<div class="CG2-features__itemBody">
<p>CodeGridで執筆しているのは、ピクセルグリッドのフロントエンドエンジニアたち。書籍執筆や講演の実績を持つエンジニアも多数在籍しています。だから、配信される記事では実際にプロジェクトで使った現場の実感から、本当に実務に必要な知識をお届けします。また、CodeGridは専任の編集者が編集のうえで配信しますので、記事の正確さ読みやすさにも自信があります。</p>
</div>
</section>
<section class="CG2-features__item">
<h2 class="CG2-features__heading">基礎から最新トレンド技術まで</h2>
<div class="CG2-features__itemBody">
<p>忙しいと追うのを忘れがちになる新しい技術情報。エンジニア同士の会話でついていけなかったなんてことはありませんか? CodeGridでは、最新トレンド技術もきちんと検証した上でしっかり解説します。もちろん「今さら聞けない」と思われがちな入門的な記事も配信。CodeGridを読んでいれば、基礎から最新トレンドまでフロントエンド界隈の情報をキャッチできます。</p>
</div>
<div class="CG2-features__embeddedTweets">
//twitterの埋め込みコード など
</div>
</section>
</div>
フロントエンドに特化した
300本以上の技術記事が読めるWebアプリ。
Chromeアプリもご用意しています
iPhoneからアクセスする最良の方法。
毎週木曜日配信(月4回)。
最新記事が定期的に届くメールマガジン。
サンプルへ
<section class="CG2-howYouReceive">
<header class="CG2-howYouReceive__header">
<h2 class="CG2-howYouReceive__heading">CodeGridの配信形式は、<br class="CG2--disableLargeScreen CG2--disableMiddleScreen">Web・iOSアプリ × メールマガジン</h2>
</header>
<div class="CG2-howYouReceive__list">
<div class="CG2-howYouReceive__item">
<div class="CG2-howYouReceive__image">
<img src="http://img.pxgrid.net/320x180" alt="" width="320">
</div>
<div class="CG2-howYouReceive__text">
<p>フロントエンドに特化した<br>300本以上の技術記事が読めるWebアプリ。<br><a href="">Chromeアプリもご用意しています</a></p>
</div>
</div>
<div class="CG2-howYouReceive__item">
<div class="CG2-howYouReceive__image">
<img src="http://img.pxgrid.net/320x180" alt="" width="320">
</div>
<div class="CG2-howYouReceive__text">
<p>iPhoneからアクセスする最良の方法。</p>
<p><a href="" style="display:inline-block;overflow:hidden;background:url(//linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg), no-repeat;width:135px;height:40px;background-size:contain;"></a></p>
</div>
</div>
<div class="CG2-howYouReceive__item">
<div class="CG2-howYouReceive__image">
<img src="http://img.pxgrid.net/320x180" alt="" width="320">
</div>
<div class="CG2-howYouReceive__text">
<p>毎週木曜日配信(月4回)。<br>最新記事が定期的に届くメールマガジン。<br><a href="">サンプルへ</a></p>
</div>
</div>
</div>
</section>
書籍についての説明文や、Webで同じ内容が今すぐ読めるなどのアナウンスがはいります。書籍についての説明文や、Webで同じ内容が今すぐ読めるなどのアナウンスがはいります。書籍についての説明文や、Webで同じ内容が今すぐ読めるなどのアナウンスがはいります。
書籍について<section class="CG2-bookInfo">
<h2 class="CG2-bookInfo__heading">CodeGridが書籍になりました</h2>
<div class="CG2-bookInfo__body">
<div class="CG2-bookInfo__images">
<ul>
<li><img src="http://img.pxgrid.net/100x140" alt="" width="100 height="140""></li>
<li><img src="http://img.pxgrid.net/100x140" alt="" width="100 height="140""></li>
</ul>
</div>
<div class="CG2-bookInfo__text">
<p>書籍についての説明文や、Webで同じ内容が今すぐ読めるなどのアナウンスがはいります。書籍についての説明文や、Webで同じ内容が今すぐ読めるなどのアナウンスがはいります。書籍についての説明文や、Webで同じ内容が今すぐ読めるなどのアナウンスがはいります。</p>
<a class="CG2-button" href="#">書籍について</a>
</div>
</div>
</section>
<div class="CG2-circulation">
<div class="CG2-circulation__lastUpdate">(最新号 2015年5月21日発行)</div>
<div class="CG2-circulation__dataList">
<div class="CG2-circulation__data">
<div class="CG2-circulation__dataLabel">発行号数</div>
<div class="CG2-circulation__dataNumber">151</div>
<div class="CG2-circulation__dataUnit">号</div>
</div>
<div class="CG2-circulation__data">
<div class="CG2-circulation__dataLabel">特集</div>
<div class="CG2-circulation__dataNumber">70</div>
<div class="CG2-circulation__dataUnit">シリーズ</div>
</div>
<div class="CG2-circulation__data">
<div class="CG2-circulation__dataLabel">記事数</div>
<div class="CG2-circulation__dataNumber">321</div>
<div class="CG2-circulation__dataUnit">本</div>
</div>
</div>
</div>
<section class="CG2-featured">
<header class="CG2-featured__header">
<h2 class="CG2-featured__heading">人気の特集</h2>
<div class="CG2-featured__summary">多くの購読者に活用されるCodeGridのロングセラー</div>
</header>
<div class="CG2-seriesList">
CG2-seriesList を入れる
</div>
</section>
<div class="CG2-categoryIntro">
<ul>
<li><span class="CG2-icon-cat-elementary CG2-icon--colored"></span>入門</li>
<li><span class="CG2-icon-cat-mastering CG2-icon--colored"></span>実践</li>
<li><span class="CG2-icon-cat-standards CG2-icon--colored"></span>仕様解説</li>
<li><span class="CG2-icon-cat-talk CG2-icon--colored"></span>座談会</li>
<li><span class="CG2-icon-cat-architecture CG2-icon--colored"></span>設計</li>
<li><span class="CG2-icon-cat-report CG2-icon--colored"></span>レポート</li>
<li><span class="CG2-icon-cat-design CG2-icon--colored"></span>デザイン</li>
<li><span class="CG2-icon-cat-future CG2-icon--colored"></span>未来・次世代</li>
<li><span class="CG2-icon-cat-work-style CG2-icon--colored"></span>仕事術</li>
<li><span class="CG2-icon-cat-survey CG2-icon--colored"></span>アンケート</li>
<li><span class="CG2-icon-cat-interview CG2-icon--colored"></span>インタビュー</li>
<li><span class="CG2-icon-cat-discussion CG2-icon--colored"></span>ディスカッション</li>
</ul>
</div>
have made a caustics shader with three.js とりあえずコークティクスできた iphone でも見れるよ! https://t.co/dJMzth2PlB
— Akihiro Oyamada (@yomotsu) 2015, 7月 31
have made a caustics shader with three.js とりあえずコークティクスできた iphone でも見れるよ! https://t.co/dJMzth2PlB
— Akihiro Oyamada (@yomotsu) 2015, 7月 31
have made a caustics shader with three.js とりあえずコークティクスできた iphone でも見れるよ! https://t.co/dJMzth2PlB
— Akihiro Oyamada (@yomotsu) 2015, 7月 31
<section class="CG2-quotes">
<header class="CG2-quotes__header">
<h2 class="CG2-quotes__heading">CodeGrid関連ツイート</h2>
<div class="CG2-quotes__headerSub">
<a href="https://twitter.com/codegrid">@CodeGridで最新情報を配信しています <span class="CG2-icon-twitter"></span></a>
</div>
</header>
<div class="CG2-quotes__body">
<div class="CG2-quotes__list">
<ul>
<li>
<blockquote class="twitter-tweet" data-conversation="none" lang="ja"><p lang="ja" dir="ltr">have made a caustics shader with three.js とりあえずコークティクスできた iphone でも見れるよ! <a href="https://t.co/dJMzth2PlB">https://t.co/dJMzth2PlB</a></p>— Akihiro Oyamada (@yomotsu) <a href="https://twitter.com/yomotsu/status/627256992340574209">2015, 7月 31</a></blockquote>
</li>
<li>
<blockquote class="twitter-tweet" data-conversation="none" lang="ja"><p lang="ja" dir="ltr">have made a caustics shader with three.js とりあえずコークティクスできた iphone でも見れるよ! <a href="https://t.co/dJMzth2PlB">https://t.co/dJMzth2PlB</a></p>— Akihiro Oyamada (@yomotsu) <a href="https://twitter.com/yomotsu/status/627256992340574209">2015, 7月 31</a></blockquote>
</li>
<li>
<blockquote class="twitter-tweet" data-conversation="none" lang="ja"><p lang="ja" dir="ltr">have made a caustics shader with three.js とりあえずコークティクスできた iphone でも見れるよ! <a href="https://t.co/dJMzth2PlB">https://t.co/dJMzth2PlB</a></p>— Akihiro Oyamada (@yomotsu) <a href="https://twitter.com/yomotsu/status/627256992340574209">2015, 7月 31</a></blockquote>
</li>
</ul>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div class="CG2-quotes__timeline">
<a class="twitter-timeline" href="https://twitter.com/hashtag/codegrid" data-widget-id="628812249822408705">#codegrid のツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+\"://platform.twitter.com/widgets.js\";fjs.parentNode.insertBefore(js,fjs);}}(document,\"script\",\"twitter-wjs\");</script>
</div>
</div>
</section>
JSでtwitterのiframe内にstyleを挿入してmax-widthを打ち消す大きさを調整する必要がある
window.addEventListener( 'load', function () {
var i,l;
var css = [
'.EmbeddedTweet, .timeline {',
'box-sizing: border-box;',
'max-width: none !important;',
'width: 100% !important;',
'}',
'.sandboxroot.env-narrow p {',
'font-size: 12px;',
'}'
].join( '' );
var iframe = document.querySelectorAll( 'iframe[id^=twitter-widget-' );
for ( i = 0, l = iframe.length; i < l; i++ ) {
var doc = iframe[ i ].contentWindow.document;
var head = doc.querySelector( 'head' );
var style = doc.createElement( 'style' );
style.textContent = css;
head.appendChild( style );
}
} );
<div class="CG2-bannerHeader">
<div class="CG2-bannerHeader__inner">
<h1 class=".CG2-bannerHeader__heading">チームのフロントエンド開発力を<br>根底からアップしよう</h1>
<p>団体購読とは、購読管理者の方に複数の購読者を取りまとめていただき、毎月、購読者全員の購読料を一括した請求書を発行し、まとめてお支払いいただくシステムです。</p>
</div>
<div class="CG2-bannerHeader__bg" style="background-image: url( '/build/img/_01.jpg' )"></div>
</div>
<section class="CG2-form">
<form>
<div class="CG2-form__header">
<h2 class="CG2-form__heading">団体購読のお申込み</h2>
<p>購読者お一人につき、月額800円(税抜)<br>月の途中で購読者の登録・削除があった場合は日割り計算されます。</p>
</div>
<p class="CG2--alignCenter">購読者お一人につき、月額800円(税抜)<br>月の途中で購読者の登録・削除があった場合は日割り計算されます。</p>
<div class="CG2-form__table">
<table>
<col width="30%">
<col width="70%">
<tr>
<th>
<label>会社名・団体名</label>
<span class="CG2-form__required">(必須)</span>
</th>
<td>
<input type="text" placeholder="例)株式会社 ピクセルグリッド">
</td>
</tr>
<tr>
<th>
<label>管理者のメールアドレス</label>
<span class="CG2-form__required">(必須)</span>
</th>
<td>
<input type="text" placeholder="例)codegrid@pxgrid.com">
</td>
</tr>
<tr>
<th>
<label>お問い合わせ事項</label>
<span class="CG2-form__required">(必須)</span>
</th>
<td>
<select>
<option value="" class="CG2-form__placeholder">お問い合わせ事項、お問い合わせの内容をお選びください。</option>
<option>記事内容について</option>
<option>CodeGridの利用全般について</option>
<option>課金について</option>
<option>団体購読について</option>
<option>その他</option>
</select>
</td>
</tr>
<tr>
<th>
<label>お問い合わせ内容</label>
<span class="CG2-form__required">(必須)</span>
</th>
<td>
<textarea placeholder="記事内容についてのお問い合わせは、必ず該当記事のURLを明記してください。" cols="50" rows="6"></textarea>
</td>
</tr>
</table>
</div>
<div class="CG2-buttonContainer">
<ul>
<li class="CG2-buttonContainer__item--full">
<button class="CG2-button CG2-button--primary CG2-button--large" type="submit">送信</button>
</li>
</ul>
</div>
</form>
</section>
補足などがはいります。補足などがはいります。補足などがはいります。補足などがはいります。
補足などがはいります。補足などがはいります。補足などがはいります。補足などがはいります。
<div class="CG2-flowExplanation">
<section class="CG2-flowExplanation__item">
<div class="CG2-flowExplanation__image">
<img src="http://img.pxgrid.net/320x180" alt="" width="320" height="180">
</div>
<div class="CG2-flowExplanation__text">
<h3 class="CG2-flowExplanation__heading">お申込頂くと、管理者様へ団体管理画面へのリンクが送信されます</h3>
<p>補足などがはいります。補足などがはいります。補足などがはいります。補足などがはいります。</p>
</div>
</section>
<section class="CG2-flowExplanation__item">
<div class="CG2-flowExplanation__image">
<img src="http://img.pxgrid.net/320x180" alt="" width="320" height="180">
</div>
<div class="CG2-flowExplanation__text">
<h3 class="CG2-flowExplanation__heading">管理画面にて、パスワードの設定をお願いします</h3>
<p>補足などがはいります。補足などがはいります。補足などがはいります。補足などがはいります。</p>
</div>
</section>
</div>
個人で購読される方は、PayPalアカウント、もしくはWebMoneyのお支払いのみ受け付けております。団体で購読される方は、請求書払いで銀行振込ができます。
<div class="CG2-faq">
<h3 class="CG2-faq__question">
PayPalアカウントやWebMoneyのほかに、銀行振込など別の支払い方法はありますか?
</h3>
<div class="CG2-faq__answer">
<p>個人で購読される方は、PayPalアカウント、もしくはWebMoneyのお支払いのみ受け付けております。団体で購読される方は、請求書払いで銀行振込ができます。</p>
<aside class="CG2-faq-eg">
<h4 class="CG2-faq-eg__heading">未払い購読料の扱い(例)</h4>
<ul>
<li>前月未払い : 864円</li>
<li>今月請求 : 1,728円(前回未払い864円+今回購読料864円)</li>
</ul>
</aside>
</div>
</div>
<div class="CG2-additionalInfoLink">
<div class="CG2-additionalInfoLink__text">
団体購読では、請求書払いにも対応しています<span class="CG2-additionalInfoLink__sub">小さい文字</span>
</div>
<div class="CG2-additionalInfoLink__link"><a class="CG2-button" href="#">団体購読について</a></div>
</div>
本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。
<section class="CG2-publication">
<div class="CG2-publication__image">
<img src="http://img.pxgrid.net/206x290" alt="" width="206" height="290">
</div>
<div class="CG2-publication__body">
<div class="CG2-publication__header">
<h2 class="CG2-publication__heading">Web制作者のためのGit入門</h2>
</div>
<div class="CG2-publication__headingSub">
大杉 充 (著), 外村 和仁 (著), CodeGrid (編集) 2014/6/28
</div>
<p>本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。</p>
<div class="CG2-publication__buttonContainer">
<ul>
<li><a class="CG2-button" href="#">Amazonで購入</a></li>
</ul>
</div>
</div>
</section>
<div class="CG2-term">
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</div>
<div class="CG2-lastUpdate">Last Update: 20xx-08-01</div>
<div class="CG2-imageContainer">
<div class="CG2-imageContainer__image">
<img src="http://img.pxgrid.net/480x180" alt="" width="480" height="180">
</div>
</div>