CodeGrid UI

Category

Tag

All Colors

customers

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

団体購読も承っております

CodeGridは、すでにいくつもの会社で団体購読いただき、好評を得ています。

<section class="CG2-customers">
  <h1>団体購読も承っております</h1>
  <p>CodeGridは、すでにいくつもの会社で団体購読いただき、好評を得ています。</p>
  <div class="CG2-customers__logos">
    <ul>
      <li><img src="http://img.pxgrid.net/109x66" alt="" width="109" height="66"></li>
      <li><img src="http://img.pxgrid.net/158x79" alt="" width="158" height="79"></li>
      <li><img src="http://img.pxgrid.net/158x61" alt="" width="158" height="61"></li>
      <li><img src="http://img.pxgrid.net/140x80" alt="" width="140" height="80"></li>
      <li><img src="http://img.pxgrid.net/196x58" alt="" width="196" height="58"></li>
      <li><img src="http://img.pxgrid.net/176x69" alt="" width="176" height="69"></li>
      <li><img src="http://img.pxgrid.net/216x65" alt="" width="216" height="65"></li>
    </ul>
  </div>
</section>

seriesList

/src/assets2/scss/_components.scss
  • app-item
  • app-item-articlelist
  • www-item
  • 未読記事にはCG2-seriesList__article--unread追加する
  • 有料時のカギアイコンは<span class="CG2-icon-lock"></span>を使う。CG2-icon--coloredは付与しない

通常

<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-architecture"></span></a>
        </div>
        <div class="CG2-seriesList__itemTitle">
          <a href="javascript:alert( 'シリーズ一覧へ' );">
            <div class="CG2-seriesList__itemTitleText">Web Fonts 自由自在</div>
          </a>
        </div>
        <div class="CG2-seriesList__itemUtil">
          <ul>
            <li><a href="#"><span class="CG2-icon-list"></span></a></li>
            <li><button class="CG2-seriesList__itemUtilButton--favAdded" onclick="javascript:alert('added to fav list');"><span class="CG2-icon-star"></span></button></li>
          </ul>
        </div>
      </div>
      <div class="CG2-seriesList__coverImage CG2-seriesList__coverImage--blurry" style="background-image: url( '/build/img/_01.jpg' )"></div>
      <div class="CG2-seriesList__articles">
        <div class="CG2-seriesList__article CG2-seriesList__article--unread">
          <a href="#">
            <div class="CG2-seriesList__articleIcon">
              <span class="CG2-icon-unlock CG2-icon--colored"></span>
            </div>
            <div class="CG2-seriesList__articleOrder">第3回</div>
            <div class="CG2-seriesList__articleTitle">アイコンの配置テクニック</div>
            <div class="CG2-seriesList__articleDate">4/16</div>
          </a>
        </div>
        <div class="CG2-seriesList__article">
          <a href="#">
            <div class="CG2-seriesList__articleIcon">
              <span class="CG2-icon-unlock CG2-icon--colored"></span>
            </div>
            <div class="CG2-seriesList__articleOrder">第2回</div>
            <div class="CG2-seriesList__articleTitle">gulpで生成を自動化</div>
            <div class="CG2-seriesList__articleDate">4/9</div>
          </a>
        </div>
        <div class="CG2-seriesList__article">
          <a href="#">
            <div class="CG2-seriesList__articleIcon">
              <span class="CG2-icon-unlock CG2-icon--colored"></span>
            </div>
            <div class="CG2-seriesList__articleOrder">第1回</div>
            <div class="CG2-seriesList__articleTitle">Webアプリの利用</div>
            <div class="CG2-seriesList__articleDate">4/2</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/40x40" 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/40x40" 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/40x40" alt="" width="40" height="40">
            </div>
            <div class="CG2-seriesList__authorName">高津戸 壮 | フロントエンド・エンジニア</div>
          </div>
        </a>
      </div>
    </div>

    <!-- .CG2-seriesList__item 繰り返し -->

    <div class="CG2-seriesList__itemMore"><a href="#">more</a></div>

  </div>
</div>

full width

<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-architecture"></span>実践</a>
        </div>
        <div class="CG2-seriesList__itemTitle">Web Fonts 自由自在</div>
        <div class="CG2-seriesList__itemUtil">
          <ul>
            <li><a href="#"><span class="CG2-icon-list"></span></a></li>
            <li><button class="CG2-seriesList__itemUtilButton--favAdded" onclick="javascript:alert('added to fav list');"><span class="CG2-icon-star"></span></button></li>
          </ul>
        </div>
      </div>
      <div class="CG2-seriesList__coverImage CG2-seriesList__coverImage--blurry" style="background-image: url( '/build/img/_01.jpg' )"></div>
      <div class="CG2-seriesList__articles">
        <div class="CG2-seriesList__article">
          <a href="#">
            <div class="CG2-seriesList__articleIcon">
              <span class="CG2-icon-unlock CG2-icon--colored"></span>
            </div>
            <div class="CG2-seriesList__articleOrder">第3回</div>
            <div class="CG2-seriesList__articleTitle">アイコンの配置テクニック</div>
            <div class="CG2-seriesList__articleDate">4/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/40x40" 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/40x40" 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/40x40" alt="" width="40" height="40">
            </div>
            <div class="CG2-seriesList__authorName">高津戸 壮 | フロントエンド・エンジニア</div>
          </div>
        </a>
      </div>
    </div>

    <!-- .CG2-seriesList__item.CG2-seriesList__item--fullWidth 繰り返し -->

    <div class="CG2-seriesList__itemMore"><a href="#">more</a></div>

  </div>
</div>

paymentTable

/src/assets2/scss/_components.scss
  • app-item
  • app-form
  • www-item
PayPal WebMoney
購読料
(税込金額)
  • 月額
    800
    (税込864円)
  • 月払い
    800
    (税込864円)
  • 年払い
    9,600
    (税込10,368円)
購読料 自動継続 随時購入
無料購読期間
  • 無料購読期間 30
  • 無料購読期間 なし
<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>

paymentLine

/src/assets2/scss/_components.scss
  • app-item
  • www-item
月額 800 (税込み864円)
<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>

Logo_3D

/src/assets2/scss/_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/_www.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/_www.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/_www.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/_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>

pickedup

/src/assets2/scss/_www.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/_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>

customerQuotes

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

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/_www.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/_www.scss
  • www-item

団体購読のお申込み

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

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

(必須)
(必須)
(必須)
(必須)
<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>
            <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>
            </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/_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">
      <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/_www.scss
  • www-item
PayPalアカウントやWebMoneyのほかに、銀行振込など別の支払い方法はありますか?

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

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

imageContainer

/src/assets2/scss/_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>