<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' )
する必要がある
フロントエンドに特化した
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 );
}
} );