CodeGrid UI

Category

Tag

All Colors

Logo_3D

/src/assets2/scss/_components-www.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/_components-www.scss
  • www-item

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

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

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

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

//twitterの埋め込みコード など
<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>

howYouReceive

/src/assets2/scss/_components-www.scss
  • www-item
  • www-top-item

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

フロントエンドに特化した
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>

bookInfo

/src/assets2/scss/_components-www.scss
  • www-item
  • www-top-item

CodeGridが書籍になりました

書籍についての説明文や、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>

circulation

/src/assets2/scss/_components-www.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>
/src/assets2/scss/_components-www.scss
  • www-item
  • www-top-item
<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>

categoryIntro

/src/assets2/scss/_components-www.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>

quotes

/src/assets2/scss/_components-www.scss
  • www-item
  • www-top-item

CodeGrid関連ツイート

<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>&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-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 );
  }
} );

bannerHeader

/src/assets2/scss/_components-www.scss
  • www-item

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

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

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

form

/src/assets2/scss/_components-www.scss
  • www-item

団体購読のお申込み

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

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

(必須)
(必須)
(必須)
(必須)
<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>

flowExplanation

/src/assets2/scss/_components-www.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">
      <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>

faq

/src/assets2/scss/_components-www.scss
  • www-item

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

個人で購読される方は、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>
/src/assets2/scss/_components-www.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/_components-www.scss
  • www-item

Web制作者のためのGit入門

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

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

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

term

/src/assets2/scss/_components-www.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/_components-www.scss
  • www-item
Last Update: 20xx-08-01
<div class="CG2-lastUpdate">Last Update: 20xx-08-01</div>

imageContainer

/src/assets2/scss/_components-www.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>

comparisonTable

/src/assets2/scss/_components-www.scss
  • www-item
個人購読 団体購読
契約方法 1人ずつで契約する 複数人分で契約する
支払い方法 クレジットカード 銀行振込(請求書発行)、クレジットカードのどちらか
講読人数 1名 2名〜
領収書の発行 設定画面から発行 団体購読管理画面から発行
<div class="CG2-comparisonTable">
  <table border class="CG2-comparisonTable__table">
    <thead>
      <tr>
        <td></td>
        <th scope="col">個人購読</th>
        <th scope="col">団体購読</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row" nowrap>契約方法</th>
        <td nowrap>1人ずつで契約する</td>
        <td nowrap>複数人分で契約する</td>
      </tr>
      <tr>
        <th scope="row" nowrap>支払い方法</th>
        <td>クレジットカード</td>
        <td>銀行振込(請求書発行)、クレジットカードのどちらか</td>
      </tr>
      <tr>
        <th scope="row" nowrap>講読人数</th>
        <td>1名</td>
        <td>2名〜</td>
      </tr>
      <tr>
        <th scope="row" nowrap>領収書の発行</th>
        <td>設定画面から発行</td>
        <td>団体購読管理画面から発行</td>
      </tr>
    </tbody>
  </table>
</div>