CodeGrid UI

Category

Tag

All Colors

seriesWeekHeader

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

購読済

設計
jQuery初心者のためのJavaScript設計トレーニング
1
<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">jQuery初心者のためのJavaScript設計トレーニング</div>
        <div class="CG2-seriesHeader__length"><span class="CG2-seriesHeader__value">1</span></div>
      </div>
    </div>
    <div class="CG2-seriesHeader__utils">
      <button id="js-toggle-fav-series" type="button" aria-pressed="false" class="CG2-transparentButton">
        <span aria-hidden="true" class="CG2-icon-star"></span>
        <span class="CG2-transparentButton__favText">このシリーズをお気に入りに登録</span>
      </button>
    </div>
  </div>
  <div style="background-image: url(//cdn.codegrid.net/2016-js-training-for-beginners/main-blur.jpg)" class="CG2-seriesHeader__bg"></div>
</div>

購読済、お気に入り追加

CG2-seriesHeader__utils内のボタンが変化する。

デザイン
きちんと学ぶユーザーインターフェース
4
<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">きちんと学ぶユーザーインターフェース</div>
        <div class="CG2-seriesHeader__length"><span class="CG2-seriesHeader__value">4</span></div>
      </div>
    </div>
    <div class="CG2-seriesHeader__utils">
      <button id="js-toggle-fav-series" type="button" aria-pressed="true" class="CG2-transparentButton CG2-transparentButton--favAdded">
        <span aria-hidden="true" class="CG2-icon-star"></span>
        <span class="CG2-transparentButton__favText">このシリーズをお気に入りに登録</span>
      </button>
    </div>
  </div>
  <div style="background-image: url(//cdn.codegrid.net/2017-mastering-ui/main-blur.jpg)" class="CG2-seriesHeader__bg"></div>
</div>

未購読・非ログイン

CG2-seriesHeader__utilsがない。

未来・次世代
一歩先行くCSS
2
<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">一歩先行くCSS</div>
        <div class="CG2-seriesHeader__length"><span class="CG2-seriesHeader__value">2</span></div>
      </div>
    </div>
  </div>
  <div style="background-image: url(//cdn.codegrid.net/2016-future-css/main-blur.jpg)" class="CG2-seriesHeader__bg"></div>
</div>

series

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

未購読・購読済、著者1人・2人

Web媒体で使用するSVGデータの作成方法をAdobe Illustrator CCでのデータ作成、SVG書き出しを例に紹介します。まずは元データ作成時の環境設定、作成時の注意点などを解説します。

長坂 菫
長坂 菫 | UIデザイナー

この記事ではまずSVGのコードとしての基本と、さまざまな実装方法を概観してみましょう。それぞれの特徴を捉えられると、実装方法の選択が適切にできます。

杉原 幸次郎
杉原 幸次郎 | フロントエンド・エンジニア
長坂 菫
長坂 菫 | UIデザイナー
<div class="CG2-series">
  <div class="CG2-series__item">
    <div class="CG2-series__itemHeader">
      <a href="">
        <div class="CG2-series__itemIcon">
          <div class="CG2-icon-lock"></div>
        </div>
        <div class="CG2-series__itemTitle">第2回 SVGデータの作成 1</div>
        <div class="CG2-series__itemPubdate">2014年05月15日</div>
      </a>
    </div>
    <div class="CG2-series__itemBody">
      <p>Web媒体で使用するSVGデータの作成方法をAdobe Illustrator CCでのデータ作成、SVG書き出しを例に紹介します。まずは元データ作成時の環境設定、作成時の注意点などを解説します。</p>
    </div>
    <div class="CG2-series__authors">
      <div class="CG2-series__author">
        <div class="CG2-series__authorPic">
          <a href=""><img src="__dummy__80x80" alt="長坂 菫" width="40" height="40"></a>
        </div>
        <div class="CG2-series__authorName">長坂 菫 | UIデザイナー</div>
      </div>
    </div>
  </div>
  <div class="CG2-series__item">
    <div class="CG2-series__itemHeader">
      <a href="">
        <div class="CG2-series__itemTitle">第1回 SVGコードの基本</div>
        <div class="CG2-series__itemPubdate">2014年05月08日</div>
      </a>
    </div>
    <div class="CG2-series__itemBody">
      <p>この記事ではまずSVGのコードとしての基本と、さまざまな実装方法を概観してみましょう。それぞれの特徴を捉えられると、実装方法の選択が適切にできます。</p>
    </div>
    <div class="CG2-series__authors">
      <div class="CG2-series__author">
        <div class="CG2-series__authorPic">
          <a href=""><img src="__dummy__80x80" alt="杉原 幸次郎" width="40" height="40"></a>
        </div>
        <div class="CG2-series__authorName">杉原 幸次郎 | フロントエンド・エンジニア</div>
      </div>
      <div class="CG2-series__author">
        <div class="CG2-series__authorPic">
          <a href=""><img src="__dummy__80x80" alt="長坂 菫" width="40" height="40"></a>
        </div>
        <div class="CG2-series__authorName">長坂 菫 | UIデザイナー</div>
      </div>
    </div>
  </div>
</div>

著者複数、未読

第1回はピクセルグリッドが日常の業務でのクライアントとのコミュニケーション方法やコミュニケーションツールがテーマです。

  • 佐川 沙織
  • 河田 理香
  • 尾上 友美
  • 新田 道雄
  • ピクセル グリオ
  • 安田 麻由
  • 野間 夏子
  • 神戸 克巳
<div class="CG2-series">
  <div class="CG2-series__item CG2-series__item--unread">
    <div class="CG2-series__itemHeader">
      <a href="">
        <div class="CG2-series__itemTitle">第1回 コミュニケーションツール</div>
        <div class="CG2-series__itemPubdate">2013年10月10日</div>
      </a>
    </div>
    <div class="CG2-series__itemBody">
      <p>第1回はピクセルグリッドが日常の業務でのクライアントとのコミュニケーション方法やコミュニケーションツールがテーマです。</p>
    </div>
    <div class="CG2-series__authors">
      <div class="CG2-series__authorPicList">
        <ul>
          <li><a href=""><img src="__dummy__80x80" alt="佐川 沙織" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="河田 理香" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="尾上 友美" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="新田 道雄" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="ピクセル グリオ" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="安田 麻由" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="野間 夏子" width="40" height="40"></a></li>
          <li><a href=""><img src="__dummy__80x80" alt="神戸 克巳" width="40" height="40"></a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

categoryHeader

/src/assets2/scss/_components-app.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-app.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="__dummy__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="__dummy__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(//cdn.codegrid.net/2015-css-flexiblebox/main-blur.jpg)"></div>
</div>

通常

仕様解説
そこが知りたい、Flexible Box
第2回 仕様を知る 2

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

2015年04月16日発行
<div class="CG2-articleHeader">
  <div class="CG2-articleHeader__inner">
    <div class="CG2-articleHeader__category">
      <div class="CG2-articleHeader__categoryIcon">
        <span class="CG2-icon-cat-standards"></span>
      </div>
      <div class="CG2-articleHeader__categoryName">仕様解説</div>
    </div>
    <div class="CG2-articleHeader__main">
      <div class="CG2-articleHeader__mainInner">
        <div class="CG2-articleHeader__series">そこが知りたい、Flexible Box</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年04月16日発行</div>
        <div class="CG2-articleHeader__authors">
          <div class="CG2-articleHeader__author">
            <a href="">
              <div class="CG2-articleHeader__authorImage">
                <img src="__dummy__48x48" alt="佐川 沙織">
              </div>
              <div class="CG2-articleHeader__authorName">佐川 沙織</div>
              <div class="CG2-articleHeader__authorTitle">フロントエンド・エンジニア</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 id="js-toggle-fav-series" type="button" aria-pressed="false" class="CG2-transparentButton">
            <span aria-hidden="true" class="CG2-icon-star"></span>
            <span class="CG2-transparentButton__favText">このシリーズをお気に入りに登録</span>
          </button>
        </li>
        <li>
          <button id="js-unread" class="CG2-transparentButton">未読にする</button>
        </li>
      </ul>
    </div>
  </div>
  <div style="background-image: url(//cdn.codegrid.net/2015-css-flexiblebox/main-blur.jpg)" class="CG2-articleHeader__bg"></div>
</div>

著者複数、前次回なし、お気に入り済、未読押下後

アンケート
ピクセルグリッド技術サーベイ 2015
第1回 JavaScriptトランスパイラ編

技術サーベイの第1回目は、 JavaScriptトランスパイラ編。最終的にJavaScriptとして書き出される3つの言語の使用経験を聞きました。どんな理由で使うのか、その将来性に迫ります。

2015年06月18日発行
<div data-page-id="entry-main" class="CG2-articleHeader">
  <div class="CG2-articleHeader__inner">
    <div class="CG2-articleHeader__category">
      <div class="CG2-articleHeader__categoryIcon">
        <span class="CG2-icon-cat-survey"></span>
      </div>
      <div class="CG2-articleHeader__categoryName">アンケート</div>
    </div>
    <div class="CG2-articleHeader__main">
      <div class="CG2-articleHeader__mainInner">
        <div class="CG2-articleHeader__series">ピクセルグリッド技術サーベイ 2015</div>
        <div class="CG2-articleHeader__title">第1回 JavaScriptトランスパイラ編</div>
        <div class="CG2-articleHeader__abstract">
          <p>技術サーベイの第1回目は、 JavaScriptトランスパイラ編。最終的にJavaScriptとして書き出される3つの言語の使用経験を聞きました。どんな理由で使うのか、その将来性に迫ります。</p>
        </div>
        <div class="CG2-articleHeader__pubDate">2015年06月18日発行</div>
        <div class="CG2-articleHeader__authors">
          <div class="CG2-articleHeader__author">
            <a href="">
              <div class="CG2-articleHeader__authorImage"><img src="__dummy__48x48" alt="大澤 直子"></div>
              <div class="CG2-articleHeader__authorName">大澤 直子</div>
            </a>
          </div>
          <div class="CG2-articleHeader__author">
            <a href="">
              <div class="CG2-articleHeader__authorImage"><img src="__dummy__48x48" alt="山口 弘一"></div>
              <div class="CG2-articleHeader__authorName">山口 弘一</div>
            </a>
          </div>
          <div class="CG2-articleHeader__author">
            <a href="">
              <div class="CG2-articleHeader__authorImage"><img src="__dummy__48x48" alt="杉原 幸次郎"></div>
              <div class="CG2-articleHeader__authorName">杉原 幸次郎</div>
            </a>
          </div>
          <div class="CG2-articleHeader__author">
            <a href="">
              <div class="CG2-articleHeader__authorImage"><img src="__dummy__48x48" alt="玉田 義之"></div>
              <div class="CG2-articleHeader__authorName">玉田 義之</div>
            </a>
          </div>
          <div class="CG2-articleHeader__author">
            <a href="">
              <div class="CG2-articleHeader__authorImage"><img src="__dummy__48x48" alt="橋本 孝治"></div>
              <div class="CG2-articleHeader__authorName">橋本 孝治</div>
            </a>
          </div>
          <div class="CG2-articleHeader__author">
            <a href="">
              <div class="CG2-articleHeader__authorImage"><img src="__dummy__48x48" alt="長坂 菫"></div>
              <div class="CG2-articleHeader__authorName">長坂 菫</div>
            </a>
          </div>
          <div class="CG2-articleHeader__author">
            <a href="">
              <div class="CG2-articleHeader__authorImage"><img src="__dummy__48x48" alt="玉田 義之"></div>
              <div class="CG2-articleHeader__authorName">玉田 義之</div>
            </a>
          </div>
          <div class="CG2-articleHeader__author">
            <a href="">
              <div class="CG2-articleHeader__authorImage"><img src="__dummy__48x48" alt="佐川 沙織"></div>
              <div class="CG2-articleHeader__authorName">佐川 沙織</div>
            </a>
          </div>
          <div class="CG2-articleHeader__author">
            <a href="">
              <div class="CG2-articleHeader__authorImage"><img src="__dummy__48x48" alt="坪田 健之"></div>
              <div class="CG2-articleHeader__authorName">坪田 健之</div>
            </a>
          </div>
          <div class="CG2-articleHeader__author">
            <a href="">
              <div class="CG2-articleHeader__authorImage"><img src="__dummy__48x48" alt="野間 夏子"></div>
              <div class="CG2-articleHeader__authorName">野間 夏子</div>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="CG2-articleHeader__pagenation">
      <ul>
      </ul>
    </div>
    <div class="CG2-articleHeader__utils">
      <ul>
        <li>
          <a href="" class="CG2-transparentButton"><span class="CG2-icon-list"></span>このシリーズの記事一覧をみる</a>
        </li>
        <li>
          <button id="js-toggle-fav-series" type="button" aria-pressed="false" class="CG2-transparentButton CG2-transparentButton--favAdded">
            <span aria-hidden="true" class="CG2-icon-star"></span>
            <span class="CG2-transparentButton__favText">このシリーズのお気に入り解除</span>
          </button>
        </li>
        <li>
          <button id="js-unread" class="CG2-transparentButton" disabled>未読にする</button>
        </li>
      </ul>
    </div>
  </div>
  <div style="background-image: url(//cdn.codegrid.net/2015-tech-survey/main-blur.jpg)" class="CG2-articleHeader__bg"></div>
</div>

articleBeforeLogin

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

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

h2みだし

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

h3みだし

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

h4みだし

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

  • リストりすと
  • リストりすと
  1. リストりすと
  2. リストりすと
見出しセル 見出しセル 見出しセル
データセル データセル データセル
データセル データセル データセル
見出しセル データセル データセル
見出しセル データセル データセル
<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>

</article>

articlePagination

/src/assets2/scss/_components-app.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-app.scss
  • app-item
  • app-item-article
<div class="CG2-articleUtil">
  <div class="CG2-articleUtil__socialItems">
    <div class="CG2-articleUtil__socialItem CG2-articleUtil__socialItem--twitter">
      <a href="https://twitter.com/share" data-lang="en" data-url="" data-text="シリーズ - タイトル" data-hashtags="codegrid" class="twitter-share-button">Tweet</a>
    </div>
    <div class="CG2-articleUtil__socialItem CG2-articleUtil__socialItem--facebook">
      <iframe src="//www.facebook.com/plugins/like.php?href=&amp;send=false&amp;layout=standard&amp;show_faces=true&amp;font&amp;colorscheme=light&amp;action=like&amp;height=68" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:68px;" allowTransparency="true"></iframe>
    </div>
  </div>
  <script src="https://platform.twitter.com/widgets.js" async></script>
</div>

livecode

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

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

index.html
<div class="flex">
  <div class="flex__item-1">Item1</div>
  <div class="flex__item-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>

iframe埋め込み

作ったデモをiframeで埋め込める。 以下の追加クラスで、高さの指定が可能。

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

なお、iPhoneの場合はiframeが伸びる仕様を回避するため、高さが固定される。

<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-app.scss
  • app-item

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

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

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

<div class="CG2-profile">
  <div class="CG2-profile__image">
    <img src="__dummy__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-app.scss
  • app-item
  • app-item-article

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

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

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

<div class="CG2-profileSimple">
  <div class="CG2-profileSimple__image">
    <img src="__dummy__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-app.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="__dummy__96x96" alt="" width="48" height="48"></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="__dummy__96x96" alt="" width="48" height="48"></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="__dummy__96x96" alt="" width="48" height="48"></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="__dummy__96x96" alt="" width="48" height="48"></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="__dummy__96x96" alt="" width="48" height="48"></div>
        <div class="CG2-authorList__name">大澤 直子</div>
        <div class="CG2-authorList__title">フロントエンド・エンジニア</div>
        <div class="CG2-authorList__numOfPosts">記事数24</div>
      </a>
    </div>

  </div>
</div>

searchFailed

/src/assets2/scss/_components-app.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-app.scss
  • app-item
設定
Googleアカウント gurio@pxgrid.example
メールマガジンを受信するメールアドレス
購読情報
現在、購読の手続きはされていません。
購読情報
無料購読期間 残り30日
決済方法 PAY.JP
カード情報 XXXX
購読情報
決済方法 WebMoney
有効期限 201X年12月31日
退会
退会理由を教えて下さい(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>Googleアカウント</th>
              <td>gurio@pxgrid.example</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="CG2-settings__buttonContainer">
        <ul>
          <li>
          <a class="CG2-button CG2-button--setting" href="">ログアウト</a>
          </li>
        </ul>
      </div>
      <form>
        <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="gurio@pxgrid.example">
            </div>
          </div>
        </div>
        <div class="CG2-settings__buttonContainer">
          <ul>
            <li>
              <button type="button" class="CG2-button CG2-button--setting">変更</button>
            </li>
          </ul>
        </div>
      </form>
    </div>
    <div class="CG2-settings__col">
      <div class="CG2-settings__heading">購読情報</div>
      <div class="CG2-settings__field">
        <div class="CG2-settings__fieldHGroup">
          <table>
            <tr>
              <td>現在、購読の手続きはされていません。</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="CG2-settings__buttonContainer">
        <ul>
          <li>
            <a class="CG2-button CG2-button--setting">購読の手続きを開始する</a>
          </li>
        </ul>
      </div>
      <div class="CG2-settings__heading">購読情報</div>
      <div class="CG2-settings__field">
        <div class="CG2-settings__fieldHGroup">
          <table>
            <tr>
              <th>無料購読期間</th>
              <td>残り30日</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="CG2-settings__field">
        <div class="CG2-settings__fieldHGroup">
          <table>
            <tr>
              <th>決済方法</th>
              <td>PAY.JP</td>
            </tr>
            <tr>
              <th>カード情報</th>
              <td>XXXX</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="CG2-settings__buttonContainer">
        <ul>
          <li>
            <a class="CG2-button CG2-button--setting">カード情報の更新</a>
          </li>
        </ul>
      </div>
      <div class="CG2-settings__heading">購読情報</div>
      <div class="CG2-settings__field">
        <div class="CG2-settings__fieldHGroup">
          <table>
            <tr>
              <th>決済方法</th>
              <td>WebMoney</td>
            </tr>
            <tr>
              <th>有効期限</th>
              <td>201X年12月31日</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="CG2-settings__buttonContainer">
        <ul>
          <li>
            <a class="CG2-button CG2-button--setting">1ヶ月延長</a>
          </li>
          <li>
            <a class="CG2-button CG2-button--setting">1年延長</a>
          </li>
        </ul>
      </div>
      <div class="CG2-settings__heading">退会</div>
      <form>
        <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 type="button" class="CG2-button CG2-button--setting">CodeGridを退会し、購読を停止する</button>
        </div>
      </form>
    </div>
  </div>
</div>

formProgress

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

ログイン方法について(未ログイン)

購読料は月額800円(税抜)
初回登録時は30日間無料

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

<div class="CG2-signupFrom">
  <div class="CG2-signupFrom__lead">
    購読料は月額800円(税抜)
    <div class="CG2-signupFrom__leadSub">
      初回登録時は30日間無料
    </div>
  </div>
  <div class="CG2-signupFrom__buttonContainer CG2-signupFrom__buttonContainer--fullWidth">
    <ul>
      <li><a href="" class="CG2-button CG2-button--primary">
        Googleアカウントを使用して<br class="CG2--disableLargeScreen CG2--disableMiddleScreen">CodeGridにログイン</a></li>
    </ul>
    <div class="CG2-signupFrom__buttonContainerText">
      <p>
        ※CodeGridの購読にはGoogleアカウントが必要です。<br>
        <a href="https://accounts.google.com/SignUp" target="_blank">Googleアカウント作成</a>
      </p>
    </div>
  </div>
  <div class="CG2-signupFrom__buttonContainer">
    <ul>
      <li><a class="CG2-button" href="">購読済みの方はログイン</a></li>
    </ul>
  </div>
</div>

ログイン方法について(ログイン済み)

購読料は月額800円(税抜)
初回登録時は30日間無料
<div class="CG2-signupFrom">
  <div class="CG2-signupFrom__lead">
    購読料は月額800円(税抜)
    <div class="CG2-signupFrom__leadSub">
      初回登録時は30日間無料
    </div>
  </div>
  <div class="CG2-signupFrom__buttonContainer CG2-signupFrom__buttonContainer--fullWidth">
    <ul>
      <li><a href="" class="CG2-button CG2-button--primary">このアカウントで購読する</a></li>
    </ul>
    <div class="CG2-signupFrom__buttonContainerText">
      <p>
        現在 gurio@pxgrid.example でログインしています<br>
        <a href="">別のGoogleアカウントで購読するには一度ログアウトする必要があります。</a>
      </p>
    </div>
  </div>
</div>

クレジットカードを登録

CodeGridを購読いただくためには、利用規約への同意が必要です。

<div class="CG2-signupFrom">
  <div class="CG2-signupFrom__text">
    <p>CodeGridを購読いただくためには、<a href="https://www.codegrid.net/terms.html" target="_blank">利用規約</a>への同意が必要です。</p>
  </div>
  <div class="CG2-signupFrom__check">
    <label><input type="checkbox">利用規約に同意する</label>
  </div>
  <div class="CG2-signupFrom__buttonContainer CG2-signupFrom__buttonContainer--fullWidth">
    <ul>
      <li><a class="CG2-button CG2-button--primary">クレジットカードを登録</a></li>
    </ul>
  </div>
</div>

登録完了

購読手続きが完了しました!
<div class="CG2-signupFrom">
  <div class="CG2-signupFrom__lead">
    購読手続きが完了しました!
  </div>
  <div class="CG2-signupFrom__buttonContainer CG2-signupFrom__buttonContainer--fullWidth">
    <ul>
      <li><a class="CG2-button CG2-button--primary">記事を読む</a></li>
    </ul>
  </div>
  <div class="CG2-signupFrom__text">
    <p><a href="">CodeGrid運営からのごあいさつ記事へ</a></p>
  </div>
</div>

エラー

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

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

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

お問い合わせフォーム

<div class="CG2-signupFrom">
  <div class="CG2-signupFrom__information">
    <p>支払い処理中にエラーが発生しました</p>
  </div>
  <div class="CG2-signupFrom__text">
    <p>お手数ですがもう一度手続きをおこなってください。</p>
  </div>
  <div class="CG2-signupFrom__buttonContainer">
    <ul>
      <li><a class="CG2-button CG2-button--primary">再度支払い手続きをおこなう</a></li>
    </ul>
  </div>
  <div class="CG2-signupFrom__annotation">
    <p>再度エラーになる場合は以下よりお問い合わせください。</p>
    <p><a href="https://www.codegrid.net/inquiry.html" target="_blank">お問い合わせフォーム</a></p>
  </div>
</div>

article

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

記事内にあるビデオ

ビデオです。

<article class="CG2-article">

  <p>ビデオです。</p>

  <video src="..." controls muted></video>

</article>