## www-top-item

## Logo_3D

/src/assets2/scss/codegrid-ui.scss

- www-item
- www-top-item

フロントエンドに
関わる人々のガイド

    <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' )`する必要がある

## howYouReceive

/src/assets2/scss/codegrid-ui.scss

- www-item
- www-top-item

# CodeGridの配信形式は、Webアプリ × メールマガジン

フロントエンドに特化した
300本以上の技術記事が読めるWebアプリ。
Chromeアプリもご用意しています

毎週木曜日配信（月4回）。
最新記事が定期的に届くメールマガジン。
サンプルへ

    <section class="CG2-howYouReceive">  <header class="CG2-howYouReceive__header">    <h1>CodeGridの配信形式は、Webアプリ × メールマガジン</h1>  </header>  <div class="CG2-howYouReceive__list">    <div class="CG2-howYouReceive__item">      <div class="CG2-howYouReceive__image">        <img src="http://img.pxgrid.net/480x180" alt="" width="480" height="180">      </div>      <p>フロントエンドに特化した<br>300本以上の技術記事が読めるWebアプリ。<br><a href="#">Chromeアプリもご用意しています</a></p>    </div>    <div class="CG2-howYouReceive__item">      <div class="CG2-howYouReceive__image">        <img src="http://img.pxgrid.net/480x180" alt="" width="480" height="180">      </div>      <p>毎週木曜日配信（月4回）。<br>最新記事が定期的に届くメールマガジン。<br><a href="#">サンプルへ</a></p>    </div>  </div></section>

## bookInfo

/src/assets2/scss/codegrid-ui.scss

- www-item
- www-top-item

# CodeGridが書籍になりました

書籍についての説明文や、Webで同じ内容が今すぐ読めるなどのアナウンスがはいります。書籍についての説明文や、Webで同じ内容が今すぐ読めるなどのアナウンスがはいります。書籍についての説明文や、Webで同じ内容が今すぐ読めるなどのアナウンスがはいります。

書籍について

    <section class="CG2-bookInfo">  <h1>CodeGridが書籍になりました</h1>  <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>

## circulation

/src/assets2/scss/codegrid-ui.scss

- www-item
- www-top-item

（最新号 2015年5月21日発行）
発行号数
151
号
特集
70
シリーズ
記事数
321
本

    <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>

## pickedup

/src/assets2/scss/codegrid-ui.scss

- www-item
- www-top-item

# 人気の特集

多くの会員の皆様がお気に入りに登録した記事
CG2-seriesList を入れる

    <section class="CG2-pickedup">  <header class="CG2-pickedup__header">    <h1 class="CG2-pickedup__headerHeading">人気の特集</h1>    <div class="CG2-pickedup__headerSummary">多くの会員の皆様がお気に入りに登録した記事</div>  </header>   <div class="CG2-seriesList">    CG2-seriesList を入れる  </div> </section>

## categoryIntro

/src/assets2/scss/codegrid-ui.scss

- www-item
- www-top-item

- 入門
- 実践
- 仕様解説
- 座談会
- 設計
- レポート
- デザイン
- 未来・次世代
- 仕事術
- アンケート
- インタビュー
- ディスカッション

    <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>

## customerQuotes

/src/assets2/scss/codegrid-ui.scss

- www-item
- www-top-item

# CodeGrid関連ツィート

@CodeGridで最新情報を配信しています

- > 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

#codegrid のツイート

    <section class="CG2-customerQuotes">  <header class="CG2-customerQuotes__header">    <h1>CodeGrid関連ツィート</h1>    <div class="CG2-customerQuotes__headerSub">      <a href="https://twitter.com/codegrid">@CodeGridで最新情報を配信しています <span class="CG2-icon-twitter"></span></a>    </div>  </header>  <div class="CG2-customerQuotes__body">    <div class="CG2-customerQuotes__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>&mdash; 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>&mdash; 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>&mdash; 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-customerQuotes__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|0, l = iframe.length|0; i < l; i = ( i + 1 )|0 ) {

        var doc  = iframe[ i ].contentWindow.document;
        var head  = doc.querySelector( 'head' );
        var style = doc.createElement( 'style' );
        style.innerText = css;
        head.appendChild( style );

      }

    } );