## Blocks/www

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

## features

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

- www-item

# 執筆陣は現役のフロントエンドエンジニア

CodeGridで執筆しているのは、ピクセルグリッドのフロントエンドエンジニアたち。書籍執筆や講演の実績を持つエンジニアも多数在籍しています。だから、配信される記事では実際にプロジェクトで使った現場の実感から、本当に実務に必要な知識をお届けします。また、CodeGridは専任の編集者が編集のうえで配信しますので、記事の正確さ読みやすさにも自信があります。

# 基礎から最新トレンド技術まで

忙しいと追うのを忘れがちになる新しい技術情報。エンジニア同士の会話でついていけなかったなんてことはありませんか？　CodeGridでは、最新トレンド技術もきちんと検証した上でしっかり解説します。もちろん「今さら聞けない」と思われがちな入門的な記事も配信。CodeGridを読んでいれば、基礎から最新トレンドまでフロントエンド界隈の情報をキャッチできます。

//twitterの埋め込みコード など

    <div class="CG2-features">  <section class="CG2-features__item">    <h1>執筆陣は現役のフロントエンドエンジニア</h1>    <div class="CG2-features__itemBody">      <p>CodeGridで執筆しているのは、ピクセルグリッドのフロントエンドエンジニアたち。書籍執筆や講演の実績を持つエンジニアも多数在籍しています。だから、配信される記事では実際にプロジェクトで使った現場の実感から、本当に実務に必要な知識をお届けします。また、CodeGridは専任の編集者が編集のうえで配信しますので、記事の正確さ読みやすさにも自信があります。</p>    </div>  </section>  <section class="CG2-features__item">    <h1>基礎から最新トレンド技術まで</h1>    <div class="CG2-features__itemBody">      <p>忙しいと追うのを忘れがちになる新しい技術情報。エンジニア同士の会話でついていけなかったなんてことはありませんか？　CodeGridでは、最新トレンド技術もきちんと検証した上でしっかり解説します。もちろん「今さら聞けない」と思われがちな入門的な記事も配信。CodeGridを読んでいれば、基礎から最新トレンドまでフロントエンド界隈の情報をキャッチできます。</p>    </div>    <div class="CG2-features__embeddedTweets">      //twitterの埋め込みコード など    </div>  </section></div>

## 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 );

      }

    } );

## bannerHeader

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

- www-item

# チームのフロントエンド開発力を
根底からアップしよう

団体購読とは、購読管理者の方に複数の購読者を取りまとめていただき、毎月、購読者全員の購読料を一括した請求書を発行し、まとめてお支払いいただくシステムです。

    <div class="CG2-bannerHeader">  <div class="CG2-bannerHeader__inner">    <h1>チームのフロントエンド開発力を<br>根底からアップしよう</h1>    <p>団体購読とは、購読管理者の方に複数の購読者を取りまとめていただき、毎月、購読者全員の購読料を一括した請求書を発行し、まとめてお支払いいただくシステムです。</p>  </div>  <div class="CG2-bannerHeader__bg" style="background-image: url( '/build/img/_01.jpg' )"></div></div>

## form

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

- www-item

# 団体購読のお申込み

購読者お一人につき、月額800円（税抜）
月の途中で購読者の登録・削除があった場合は日割り計算されます。

購読者お一人につき、月額800円（税抜）
月の途中で購読者の登録・削除があった場合は日割り計算されます。

会社名・団体名 （必須） |
管理者のメールアドレス （必須） |

Powered by Google ドキュメント | 不正行為の報告 - 利用規約 - 追加規約
もし送信できない場合はこちらをお試しください

    <section class="CG2-form">  <form>    <div class="CG2-form__header">      <h1>団体購読のお申込み</h1>      <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>            会社名・団体名            <span class="CG2-form__required">（必須）</span>          </th>          <td>            <input type="text" placeholder="例）株式会社 ピクセルグリッド">          </td>        </tr>        <tr>          <th>            管理者のメールアドレス            <span class="CG2-form__required">（必須）</span>          </th>          <td>            <input type="text" placeholder="例）codegrid@pxgrid.com">          </td>        </tr>      </table>    </div>    <p><button class="CG2-button CG2-button--primary CG2-button--large">送信</button></p>    <div class="CG2-form__legal">      Powered by Google ドキュメント | 不正行為の報告 - 利用規約 - 追加規約    </div>    <div class="CG2-form__notice">      もし送信できない場合はこちらをお試しください    </div>  </form></section>

## flowExplanation

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

- www-item

# お申込頂くと、管理者様へ団体管理画面へのリンクが送信されます

補足などがはいります。補足などがはいります。補足などがはいります。補足などがはいります。

# 管理画面にて、パスワードの設定をお願いします

補足などがはいります。補足などがはいります。補足などがはいります。補足などがはいります。

    <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">      <h1>お申込頂くと、管理者様へ団体管理画面へのリンクが送信されます</h1>      <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">      <h1>管理画面にて、パスワードの設定をお願いします</h1>      <p>補足などがはいります。補足などがはいります。補足などがはいります。補足などがはいります。</p>    </div>  </section></div>

## faq

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

- www-item

PayPalアカウントやWebMoneyのほかに、銀行振込など別の支払い方法はありますか？

個人で購読される方は、PayPalアカウント、もしくはWebMoneyのお支払いのみ受け付けております。団体で購読される方は、請求書払いで銀行振込ができます。

# 未払い購読料の扱い（例）

- 前月未払い : 864円
- 今月請求 : 1,728円（前回未払い864円＋今回購読料864円）

    <div class="CG2-faq">  <div class="CG2-faq__question">    PayPalアカウントやWebMoneyのほかに、銀行振込など別の支払い方法はありますか？  </div>  <div class="CG2-faq__answer">    <p>個人で購読される方は、PayPalアカウント、もしくはWebMoneyのお支払いのみ受け付けております。団体で購読される方は、請求書払いで銀行振込ができます。</p>    <aside class="CG2-faq__eg">      <h1>未払い購読料の扱い（例）</h1>      <ul>        <li>前月未払い : 864円</li>        <li>今月請求 : 1,728円（前回未払い864円＋今回購読料864円）</li>      </ul>    </aside>  </div></div>

## additionalInfoLink

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

- www-item

団体購読では、請求書払いにも対応しています小さい文字
団体購読について

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

## publication

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

- www-item

# Web制作者のためのGit入門

大杉 充 (著), 外村 和仁 (著), CodeGrid (編集) 2014/6/28

本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。本の説明が入ります。

- Amazonで購入

    <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__heading">      <h1>Web制作者のためのGit入門</h1>    </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>

## term

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

- www-item

Coffee
  Black hot drink
Milk
  White cold drink

    <div class="CG2-term">  <dl>    <dt>Coffee</dt>    <dd>Black hot drink</dd>    <dt>Milk</dt>    <dd>White cold drink</dd>  </dl></div>

## lastUpdate

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

- www-item

Last Update: 20xx-08-01

    <div class="CG2-lastUpdate">Last Update: 20xx-08-01</div>

## imageContainer

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

- www-item

    <div class="CG2-imageContainer">  <div class="CG2-imageContainer__image">    <img src="http://img.pxgrid.net/480x180" alt="" width="480" height="180">  </div></div>