CodeGrid UI

Category

Tag

All Colors

seriesWeekHeader

/src/assets2/scss/_components.scss
  • app-item
  • app-item-articlelist
<div class="CG2-seriesWeekHeader">
  <div class="CG2-seriesWeekHeader__inner">
    <div class="CG2-seriesWeekHeader__prev">
      <div class="CG2-seriesWeekHeader__prevInner">
        <a href="#">
          <span class="CG2-seriesWeekHeader__label">前号</span>
          <span class="CG2-seriesWeekHeader__number">10</span>
          <span class="CG2-seriesWeekHeader__text"></span>
          <span class="CG2-seriesWeekHeader__number">1</span>
          <span class="CG2-seriesWeekHeader__text">日発行</span>
        </a>
      </div>
    </div>
    <div class="CG2-seriesWeekHeader__current">
      <div class="CG2-seriesWeekHeader__currentInner">
        <a href="#">
          <span class="CG2-seriesWeekHeader__label">最新号</span>
          <span class="CG2-seriesWeekHeader__number">10</span>
          <span class="CG2-seriesWeekHeader__text"></span>
          <span class="CG2-seriesWeekHeader__number">7</span>
          <span class="CG2-seriesWeekHeader__text">日発行</span>
        </a>
      </div>
    </div>
    <div class="CG2-seriesWeekHeader__next">
      <div class="CG2-seriesWeekHeader__nextInner">
        <a href="#">
          <span class="CG2-seriesWeekHeader__label">次号予告</span>
          <span class="CG2-seriesWeekHeader__number">10</span>
          <span class="CG2-seriesWeekHeader__text"></span>
          <span class="CG2-seriesWeekHeader__number">14</span>
          <span class="CG2-seriesWeekHeader__text">日発行</span>
        </a>
      </div>
    </div>
  </div>
</div>

seriesListHeader

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

内部で別コンポーネント CG2-compactNav を利用

<div class="CG2-seriesListHeader">
  <div class="CG2-seriesListHeader__articleLength">
    <span class="CG2-seriesListHeader__label">記事数</span>
    <span class="CG2-seriesListHeader__number">500</span>
    <span class="CG2-seriesListHeader__unit"></span>
  </div>
  <div class="CG2-seriesListHeader__nav">

    <div class="CG2-compactNav">
      <ul>
        <li class="CG2-compactNav__item--current"><a href="#">最新順</a></li>
        <li><a href="#">おすすめ順</a></li>
        <li><a href="#">お気に入り</a></li>
        <li><a href="#">無料公開</a></li>
      </ul>
      <div class="CG2-compactNav__navOpener"></div>
    </div>

  </div>
</div>
<div class="CG2-seriesListHeader">
  <div class="CG2-seriesListHeader__nav">

    <div class="CG2-compactNav">
      <ul>
        <li class="CG2-compactNav__item--current"><a href="#">最新順</a></li>
        <li><a href="#">おすすめ順</a></li>
        <li><a href="#">お気に入り</a></li>
        <li><a href="#">無料公開</a></li>
      </ul>
      <div class="CG2-compactNav__navOpener"></div>
    </div>

  </div>
</div>

タブ切り替え(表示toggle)の挙動の付与 (JSとの連携、以下で挙動確認可能)

  • data-cg2-tab-buttonを明示する
  • コンテンツ部は[data-cg2-tab-content]でグループ化した[data-cg2-tab-pane]を用意する
項目Aのコンテンツ
項目Bのコンテンツ
<div class="CG2-seriesListHeader">
  <div class="CG2-seriesListHeader__nav">

    <div class="CG2-compactNav">
      <ul>
        <li class="CG2-compactNav__item--current"><a href="#itemA" data-cg2-tab-button>項目A</a></li>
        <li><a href="#itemB" data-cg2-tab-button>項目B</a></li>
      </ul>
      <div class="CG2-compactNav__navOpener"></div>
    </div>

  </div>
</div>


<div data-cg2-tab-content>

  <div id="itemA" data-cg2-tab-pane="current">
    項目Aのコンテンツ
  </div>

  <div id="itemB" data-cg2-tab-pane>
    項目Bのコンテンツ
  </div>

</div>

compactNav

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

別コンポーネント CG2-seriesListHeader 内で利用。利用方法は CG2-seriesListHeader を参照

<div class="CG2-compactNav">
  <ul>
    <li class="CG2-compactNav__item--current"><a href="#">最新順</a></li>
    <li><a href="#">おすすめ順</a></li>
    <li><a href="#">お気に入り</a></li>
    <li><a href="#">無料公開</a></li>
  </ul>
  <div class="CG2-compactNav__navOpener"></div>
</div>

seriesHeader

/src/assets2/scss/_components.scss
  • app-item
  • app-item-articlelist
カテゴリー名
Vue.jsを使いこなす
8
<div class="CG2-seriesHeader">
  <div class="CG2-seriesHeader__inner">
    <div class="CG2-seriesHeader__category">
      <div class="CG2-seriesHeader__categoryIcon">
        <span class="CG2-icon-cat-architecture"></span>
      </div>
      <div class="CG2-seriesHeader__categoryName">カテゴリー名</div>
    </div>
    <div class="CG2-seriesHeader__main">
      <div class="CG2-seriesHeader__mainInner">
        <div class="CG2-seriesHeader__title">Vue.jsを使いこなす</div>
        <div class="CG2-seriesHeader__length"><span class="CG2-seriesHeader__value">8</span></div>
      </div>
    </div>
    <div class="CG2-seriesHeader__utils">
      <button class="CG2-transparentButton"><span class="CG2-icon-star"></span>このシリーズをお気に入りに登録</button>
    </div>
  </div>
  <div class="CG2-seriesHeader__bg" style="background-image: url( './img/_01.jpg' )"></div>
</div>

series

/src/assets2/scss/_components.scss
  • app-item
  • app-item-articlelist
  • 未読時はCG2-series__item--unreadを追加する
  • 有料記事のアイコンは<span class="CG2-icon-lock"></span>を利用する。このときCG2-icon--coloredは不要

双方向データバインディングに特化したVue.jsは、シンプルで学習コストも低いといわれます。第1回目はVue.jsがフレームワークとして、どんな強みをもっているのか、その特徴をコードから概観します。

高津戸 壮 | フロントエンド・エンジニア

双方向データバインディングに特化したVue.jsは、シンプルで学習コストも低いといわれます。第1回目はVue.jsがフレームワークとして、どんな強みをもっているのか、その特徴をコードから概観します。

高津戸 壮 | フロントエンド・エンジニア
...
...

<div class="CG2-series">
  <div class="CG2-series__item">
    <div class="CG2-series__itemHeader">
      <a href="#">
        <div class="CG2-series__itemIcon">
          <span class="CG2-icon-unlock CG2-icon--colored"></span>
        </div>
        <div class="CG2-series__itemTitle">第1回 Vue.jsとは</div>
        <div class="CG2-series__itemPubdate">2015/04/23</div>
      </a>
    </div>
    <div class="CG2-series__itemBody">
      <p>双方向データバインディングに特化したVue.jsは、シンプルで学習コストも低いといわれます。第1回目はVue.jsがフレームワークとして、どんな強みをもっているのか、その特徴をコードから概観します。</p>
    </div>
    <div class="CG2-series__authors">
      <div class="CG2-series__author">
        <div class="CG2-series__authorPic">
          <img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">
        </div>
        <div class="CG2-series__authorName">高津戸 壮 | フロントエンド・エンジニア</div>
      </div>
    </div>
  </div>

  <div class="CG2-series__item CG2-series__item--unread">
    <div class="CG2-series__itemHeader">
      <a href="#">
        <div class="CG2-series__itemIcon">
          <span class="CG2-icon-unlock CG2-icon--colored"></span>
        </div>
        <div class="CG2-series__itemTitle">第1回 Vue.jsとは</div>
        <div class="CG2-series__itemPubdate">2015/04/23</div>
      </a>
    </div>
    <div class="CG2-series__itemBody">
      <p>双方向データバインディングに特化したVue.jsは、シンプルで学習コストも低いといわれます。第1回目はVue.jsがフレームワークとして、どんな強みをもっているのか、その特徴をコードから概観します。</p>
    </div>
    <div class="CG2-series__authors">
      <div class="CG2-series__author">
        <div class="CG2-series__authorPic">
          <img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">
        </div>
        <div class="CG2-series__authorName">高津戸 壮 | フロントエンド・エンジニア</div>
      </div>
    </div>
  </div>

  <div class="CG2-series__item">
    ...
  </div>

  <div class="CG2-series__item">
    ...
  </div>

</div>

categoryHeader

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

未来・次世代

カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。

<div class="CG2-categoryHeader">
  <div class="CG2-categoryHeader__inner">
    <div class="CG2-categoryHeader__icon">
      <span class="CG2-icon-cat-future CG2-icon--colored"></span>
    </div>
    <div class="CG2-categoryHeader__text">
      <h1>未来・次世代</h1>
      <p>カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。</p>
    </div>
  </div>
</div>

articleHeader

/src/assets2/scss/_components.scss
  • app-item
  • app-item-articlelist
入門
第2回 仕様を知る 2

フレックスアイテムにflex-growやflex-shrinkを設定すると、フレックスコンテナの範囲内で伸びたり、縮んだりします。このときひとつひとつのアイテムの長さがどのように決まるのか解説します。

2015年 5月14日発行
<div class="CG2-articleHeader">
  <div class="CG2-articleHeader__inner">
    <div class="CG2-articleHeader__category">
      <div class="CG2-articleHeader__categoryIcon">
        <span class="CG2-icon-cat-elementary"></span>
      </div>
      <div class="CG2-articleHeader__categoryName">入門</div>
    </div>

    <div class="CG2-articleHeader__main">
      <div class="CG2-articleHeader__mainInner">
        <div class="CG2-articleHeader__series">
          <a href="javascript:alert( 'シリーズ一覧へ' );">
            そこが知りたい、 Flexible Box
          </a>
        </div>
        <div class="CG2-articleHeader__title">第2回 仕様を知る 2</div>
        <div class="CG2-articleHeader__abstract">
          <p>フレックスアイテムにflex-growやflex-shrinkを設定すると、フレックスコンテナの範囲内で伸びたり、縮んだりします。このときひとつひとつのアイテムの長さがどのように決まるのか解説します。</p>
        </div>
        <div class="CG2-articleHeader__pubDate">2015年 5月14日発行</div>

        <div class="CG2-articleHeader__authors">
          <div class="CG2-articleHeader__author">
            <a href="#">
              <div class="CG2-articleHeader__authorImage">
                <img src="http://img.pxgrid.net/48x48" alt="">
              </div>
              <div class="CG2-articleHeader__authorName">坂巻 翔大郎</div>
              <div class="CG2-articleHeader__authorTitle">フロントエンド・エンジニア</div>
            </a>
          </div>
          <div class="CG2-articleHeader__author">
            <a href="#">
              <div class="CG2-articleHeader__authorImage">
                <img src="http://img.pxgrid.net/48x48" alt="">
              </div>
              <div class="CG2-articleHeader__authorName">坂巻 翔大郎</div>
            </a>
          </div>
        </div>

      </div>
    </div>

    <div class="CG2-articleHeader__pagenation">
      <ul>
        <li class="CG2-articleHeader__pagenationPrev"><a href="#">前回</a></li>
        <li class="CG2-articleHeader__pagenationNext"><a href="#">次回</a></li>
      </ul>
    </div>

    <div class="CG2-articleHeader__utils">
      <ul>
        <li><a href="#" class="CG2-transparentButton"><span class="CG2-icon-list"></span>このシリーズの記事一覧をみる</a></li>
        <li><button class="CG2-transparentButton"><span class="CG2-icon-star"></span>このシリーズをお気に入りに登録</button></li>
        <li><button class="CG2-transparentButton">未読にする</button></li>
      </ul>
    </div>

  </div>
  <div class="CG2-articleHeader__bg" style="background-image: url( './img/_01.jpg' )"></div>
</div>

articleBeforeLogin

/src/assets2/scss/_components.scss
  • app-item-article
この記事を読むには
購読の手続きが必要です
<div class="CG2-articleBeforeLogin">
  <div class="CG2-articleBeforeLogin__lead">この記事を読むには<br>購読の手続きが必要です</div>
  <div class="CG2-articleBeforeLogin__sub"></div>
  <div class="CG2-articleBeforeLogin__buttonContainer">
    <ul>
      <li><a class="CG2-button CG2-button--primary" href="#">購読の手続きへ</a></li>
      <li><a class="CG2-button" href="#">購読済みの方はログイン</a></li>
    </ul>
  </div>
</div>

articleTOC

/src/assets2/scss/_components.scss
  • app-item-article
<section class="CG2-articleTOC">
  <header class="CG2-articleTOC__header">
    <h1>目次</h1>
  </header>
  <div class="CG2-articleTOC__body">
    <div class="CG2-articleTOC__list">
      <ul>
        <li><a href="#">はじめに</a></li>
        <li><a href="#">flex-growとflex-shrink</a></li>
        <li><a href="#">利用可能な余白を計算する</a></li>
        <li><a href="#">まとめ</a></li>
      </ul>
    </div>
  </div>
</section>

articleSeriesNav

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

記事ページ .CG2-narrowLayout のサイドバー内で利用する

<div class="CG2-articleSeriesNav">
  <div class="CG2-articleSeriesNav__inner">
    <ul>
      <li><a href="#">第1回「 仕様を知る 1 」</a></li>
      <li class="CG2-articleSeriesNav__item--current"><a href="#">第2回「 仕様を知る 2 」</a></li>
      <li><a href="#">第3回「 Flexboxを実践する 1 」</a></li>
      <li><a href="#">第4回「 Flexboxを実践する 2 」</a></li>
      <li><a href="#">5こまではいる、長いと切れる長いと切れる長いと切れる</a></li>
    </ul>
    <ul>
      <li><a href="#">6こ目は次のUL</a></li>
      <li><a href="#">7こ目</a></li>
      <li><a href="#">8こ目</a></li>
      <li><a href="#">9こ目</a></li>
      <li><a href="#">10こ目</a></li>
    </ul>
  </div>
</div>

article

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

記事本文、markdownから変換されることを前提

h2みだし

テキストリンクてきすとcodeテキストてきすとテキストてきすと

h3みだし

テキストリンクてきすとcodeテキストてきすとテキストてきすと

h4みだし

テキストリンクてきすとcodeテキストてきすとテキストてきすと

  • リストりすと
  • リストりすと
  1. リストりすと
  2. リストりすと
見出しセル 見出しセル 見出しセル
データセル データセル データセル
データセル データセル データセル
見出しセル データセル データセル
見出しセル データセル データセル

コラムタイトル

テキストリンクてきすとcodeテキストてきすとテキストてきすと

テキストリンクてきすとcodeテキストてきすとテキストてきすと

<article class="CG2-article">

  <h2>h2みだし</h2>

  <p>テキスト<a href="#">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>

  <h3>h3みだし</h3>

  <p>テキスト<a href="#">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>

  <h4>h4みだし</h4>

  <p>テキスト<a href="#">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>

  <ul>
    <li>リストりすと</li>
    <li>リストりすと</li>
  </ul>

  <ol>
    <li>リストりすと</li>
    <li>リストりすと</li>
  </ol>

  <table>
    <tbody>
      <tr>
        <th>見出しセル</th>
        <th>見出しセル</th>
        <th>見出しセル</th>
      </tr>
      <tr>
        <td>データセル</td>
        <td>データセル</td>
        <td>データセル</td>
      </tr>
      <tr>
        <td>データセル</td>
        <td>データセル</td>
        <td>データセル</td>
      </tr>
    </tbody></table>
    <table>
      <tbody><tr>
        <th>見出しセル</th>
        <td>データセル</td>
        <td>データセル</td>
      </tr>
      <tr>
        <th>見出しセル</th>
        <td>データセル</td>
        <td>データセル</td>
      </tr>
    </tbody>
  </table>

  <aside>
    <h1>*注:Autoprefixer</h1>
    <p>Autoprefixerに関しては、次の記事を参照してください。<br><a href="#">「ビルドツールアラカルト」</a>シリーズ</p>
  </aside>

  <div class="Column">
    <h1>コラムタイトル</h1>
    <p>テキスト<a href="#">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>
    <p><img src="http://img.pxgrid.net/1000x200"></p>
    <p>テキスト<a href="#">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>
  </div>

</article>

articlePagination

/src/assets2/scss/_components.scss
  • app-item
  • app-item-article
<div class="CG2-articlePagination">
  <ul>
    <li class="CG2-articlePagination__prev"><a href="#">第1回 仕様を知る 1</a></li>
    <li class="CG2-articlePagination__next"><a href="#">第3回 Flexboxを実践する 1</a></li>
  </ul>
</div>

articleUtil

/src/assets2/scss/_components.scss
  • app-item
  • app-item-article
<div class="CG2-articleUtil">
  <ul>
    <li><button class="CG2-button CG2-button--action" data-socialitems-append><span class="CG2-icon-facebook"></span><span class="CG2-icon-twitter"></span><span class="CG2-icon-gplus"></span> シェアする</button></li>
    <li><button class="CG2-button CG2-button--action"><span class="CG2-icon-star"></span> お気に入りに登録</button></li>
  </ul>
  <div class="CG2-articleUtil__socialItems"></div>
  <script src="https://platform.twitter.com/widgets.js" async></script>
</div>

livecode

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

ソースコードを埋め込むことができる

index.html
<div class="flex">
  <div class="flexitem-1">Item1</div>
  <div class="flexitem-2">Item2</div>
  <div class="flex__item-3">Item3</div>
</div>
<section class="CG2-livecode">
  <header class="CG2-livecode__header">
    <div class="CG2-livecode__label">
      index.html
    </div>
    <div class="CG2-livecode__nav">
      <ul>
        <li><a href="#">
          <span class="CG2-icon-tool"></span> 全文選択
        </a></li>
        <li><a href="#">
          <span class="CG2-icon-tool"></span> 新規タブで開く
        </a></li>
      </ul>
    </div>
  </header>
  <div class="CG2-livecode__body">
    <pre class="language-markup line-numbers"><code>&lt;div class="flex"&gt;
  &lt;div class="flex__item-1"&gt;Item1&lt;/div&gt;
  &lt;div class="flex__item-2"&gt;Item2&lt;/div&gt;
  &lt;div class="flex__item-3"&gt;Item3&lt;/div&gt;
&lt;/div&gt;</code></pre>
  </div>
</section>

動く demo として、iframe を埋め込むことができる

iframeには、

  • CG2-livecode__frame--small
  • CG2-livecode__frame--large

を追加クラスとして明示することも可能。その場合それぞれ、iframeの高さが190px、590pxとなる。

<section class="CG2-livecode">
  <h1>埋め込みデモのタイトル</h1>
  <header class="CG2-livecode__header">
    <div class="CG2-livecode__nav">
      <ul>
        <li><a href="#">
          ソースコード:flex-basis/2
        </a></li>
        <li><a href="#">
          <span class="CG2-icon-tool"></span> 新規タブで開く
        </a></li>
      </ul>
    </div>
  </header>
  <div class="CG2-livecode__body">
    <iframe src="https://s3-ap-northeast-1.amazonaws.com/codegrid/2015-css-flexiblebox/demo/2/flex-basis/1/index.html"></iframe>
  </div>
</section>

profile

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

バイオグラフィー自体がメインのコンテンツ用

ピクセル グリオ
フロントエンジニア

株式会社ピクセルグリッドの社員。2010年4月にTwitterに登録したがあまり活躍していない。

<div class="CG2-profile">
  <div class="CG2-profile__image">
    <img src="http://img.pxgrid.net/120x120" alt="">
  </div>
  <div class="CG2-profile__main">
    <div class="CG2-profile__header">
      <div class="CG2-profile__name">ピクセル グリオ</div>
      <div class="CG2-profile__title">フロントエンジニア</div>
      <div class="CG2-profile__links">
      <ul>
        <li><a href="#">Twitter</a></li>
        <li><a href="#">Website</a></li>
      </ul>
    </div>
    </div>
    <div class="CG2-profile__text">
      <p>株式会社ピクセルグリッドの社員。2010年4月にTwitterに登録したがあまり活躍していない。</p>
    </div>
  </div>
</div>

profileSimple

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

記事ページの下部等、バイオグラフィー自体がメインではないコンテンツ用

ピクセル グリオ
フロントエンジニア

株式会社ピクセルグリッドの社員。2010年4月にTwitterに登録したがあまり活躍していない。

<div class="CG2-profileSimple">
  <div class="CG2-profileSimple__image">
    <img src="http://img.pxgrid.net/120x120" alt="">
  </div>
  <div class="CG2-profileSimple__main">
    <div class="CG2-profileSimple__header">
      <div class="CG2-profileSimple__name">ピクセル グリオ</div>
      <div class="CG2-profileSimple__title">フロントエンジニア</div>
    </div>
    <div class="CG2-profileSimple__text">
      <p>株式会社ピクセルグリッドの社員。2010年4月にTwitterに登録したがあまり活躍していない。</p>
    </div>
  </div>
</div>

authorList

/src/assets2/scss/_components.scss
  • app-item
<div class="CG2-authorList">
  <div class="CG2-authorList__inner">

    <div class="CG2-authorList__item">
      <a href="#">
        <div class="CG2-authorList__image"><img src="http://img.pxgrid.net/80x80" alt="" width="80" height="80"></div>
        <div class="CG2-authorList__name">中村 享介</div>
        <div class="CG2-authorList__title">代表取締役, フロントエンド・エンジニア</div>
        <div class="CG2-authorList__numOfPosts">記事数24</div>
      </a>
    </div>

    <div class="CG2-authorList__item">
      <a href="#">
        <div class="CG2-authorList__image"><img src="http://img.pxgrid.net/80x80" alt="" width="80" height="80"></div>
        <div class="CG2-authorList__name">中村 享介</div>
        <div class="CG2-authorList__title">フロントエンド・エンジニア</div>
        <div class="CG2-authorList__numOfPosts">記事数24</div>
      </a>
    </div>

    <div class="CG2-authorList__item">...</div>
    <div class="CG2-authorList__item">...</div>
    <div class="CG2-authorList__item">...</div>

  </div>
</div>

searchFailed

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

CG2-searchOption の CG2-searchLayout__result 内で利用する 未使用につき、不要の可能性あり

結果が見つかりませんでした
<div class="CG2-searchFailed">
  <div class="CG2-searchFailed__text">結果が見つかりませんでした</div>
  <div class="CG2-searchFailed__search">
    <input>
  </div>
</div>

settings

/src/assets2/scss/_components.scss
  • app-item
設定
ログインメールアドレス oyamada@pxgrid.com
メールマガジンを受信するメールアドレス
購読情報
決済方法 PayPal
退会
退会理由を教えて下さい(1000文字以内)
<div class="CG2-settings">
  <div class="CG2-settings__inner">
    <div class="CG2-settings__col">
      <div class="CG2-settings__heading">設定</div>
      <div class="CG2-settings__field">
        <div class="CG2-settings__fieldHGroup">
          <table>
            <tr>
              <th>ログインメールアドレス</th>
              <td>oyamada@pxgrid.com</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="CG2-settings__buttonContainer">
        <button class="CG2-button CG2-button--setting">ログアウト</button>
      </div>
      <div class="CG2-settings__field">
        <div class="CG2-settings__fieldVGroup">
          <div class="CG2-settings__fieldHeader">メールマガジンを受信するメールアドレス</div>
          <div class="CG2-settings__fieldData"><input type="email" value="oyamada@pxgrid.com"></div>
        </div>
      </div>
      <div class="CG2-settings__buttonContainer">
        <button class="CG2-button CG2-button--setting">変更</button>
      </div>
    </div>
    <div class="CG2-settings__col">
      <div class="CG2-settings__heading">購読情報</div>
      <div class="CG2-settings__field">
        <div class="CG2-settings__fieldHGroup">
          <table>
            <tr>
              <th>決済方法</th>
              <td>PayPal</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="CG2-settings__heading">退会</div>
      <div class="CG2-settings__field">
        <div class="CG2-settings__fieldVGroup">
          <div class="CG2-settings__fieldHeader">退会理由を教えて下さい(1000文字以内)</div>
          <div class="CG2-settings__fieldData"><textarea maxlength="1000"></textarea></div>
        </div>
      </div>
      <div class="CG2-settings__buttonContainer">
        <button class="CG2-button CG2-button--setting">CodeGridを退会し、購読を停止する</button>
      </div>
    </div>
  </div>
</div>

formProgress

/src/assets2/scss/_components.scss
  • app-item
  • app-form
  1. 1. ログイン方法について
  2. 2. 決済方法選択
  3. 3. 登録完了
<div class="CG2-formProgress">
  <ol>
    <li>1. ログイン方法について</li>
    <li class="CG2-formProgress__item--current">2. 決済方法選択</li>
    <li>3. 登録完了</li>
  </ol>
</div>

signupFrom

/src/assets2/scss/_components.scss
  • app-item
  • app-form
購読料は月額800円(税抜)
PayPal払いなら30日間無料

支払い処理中にエラーが発生しました

お手数ですがもう一度手続きをおこなってください。

※CodeGridの購読にはGoogleアカウントが必要です。 Googleアカウント作成

※CodeGridの購読にはGoogleアカウントが必要です。 Googleアカウント作成

再度エラーになる場合は以下よりお問い合わせください。

<div class="CG2-signupFrom">

  <div class="CG2-signupFrom__lead">
    購読料は月額800円(税抜)
    <div class="CG2-signupFrom__leadSub">
      PayPal払いなら30日間無料
    </div>
  </div>

  <div class="CG2-signupFrom__information">
    <p>支払い処理中にエラーが発生しました</p>
  </div>

  <div class="CG2-signupFrom__text">
    <p>お手数ですがもう一度手続きをおこなってください。</p>
  </div>

  <div class="CG2-signupFrom__check">
    <label><input type="checkbox">利用規約に同意する</label>
  </div>

  <div class="CG2-signupFrom__buttonContainer">
    <ul>
      <li><a class="CG2-button CG2-button--primary" href="#">再度支払い手続きをおこなう</a></li>
    </ul>
    <div class="CG2-signupFrom__buttonContainerText">
      <p>※CodeGridの購読にはGoogleアカウントが必要です。 <a href="#">Googleアカウント作成</a></p>
    </div>
  </div>

  <div class="CG2-signupFrom__buttonContainer CG2-signupFrom__buttonContainer--fullWidth">
    <ul>
      <li><a class="CG2-button CG2-button--primary" href="#">PayPalで支払う</a></li>
    </ul>
    <ul>
      <li><a class="CG2-button CG2-button--primary" href="#">WebMoney 1ヶ月分</a></li>
      <li><a class="CG2-button CG2-button--primary" href="#">WebMoney 1年分</a></li>
    </ul>
    <div class="CG2-signupFrom__buttonContainerText">
      <p>※CodeGridの購読にはGoogleアカウントが必要です。 <a href="#">Googleアカウント作成</a></p>
    </div>
  </div>

  <div class="CG2-signupFrom__annotation">
    <p>再度エラーになる場合は以下よりお問い合わせください。</p>
  </div>
</div>