articleNotice
/src/assets2/scss/_components.scss
多くが古い情報の可能性があり、現在は推奨されない記事です
<div class="CG2-articleNotice CG2-articleNotice--level1">
<div class="CG2-articleNotice__head">
<span class="CG2-icon-exclamation-triangle"></span>
多くが古い情報の可能性があり、現在は推奨されない記事です
</div>
</div>
<div class="CG2-articleNotice CG2-articleNotice--level2">
<div class="CG2-articleNotice__head">
<span class="CG2-icon-exclamation-circle"></span>
一部古い情報の可能性があります
</div>
</div>
<div class="CG2-articleNotice CG2-articleNotice--level3">
<div class="CG2-articleNotice__head">
古い記事ですが、現在も使える情報です
</div>
</div>
リンクあり
<div class="CG2-articleNotice CG2-articleNotice--level2">
<div class="CG2-articleNotice__head">
<span class="CG2-icon-exclamation-circle"></span>
新しいバージョンに対応した<a href="">シリーズ</a>があります。
</div>
</div>
narrowLayout
/src/assets2/scss/_components.scss
記事ページ用のレイアウト
サイドバーに .CG2-articleSeriesNav
利用する
目次など
本文領域 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum est vitae risus congue, quis cursus lectus mattis. Maecenas mattis tempus mauris ultrices viverra. Donec eget justo ante. Aliquam accumsan leo egestas venenatis faucibus.
Aliquam sed massa hendrerit, suscipit ipsum vel, lobortis quam. Aliquam mauris elit, eleifend eu porta vel, sodales at augue. Praesent cursus, nulla sit amet suscipit fringilla, nibh velit efficitur ligula, a feugiat turpis massa ac nunc. Cras
consequat nibh in nulla faucibus eleifend. Ut mattis velit dui, sed tristique felis laoreet vitae. Donec placerat ante vel elit pellentesque, sit amet vulputate nisi consequat. Pellentesque efficitur euismod commodo. Vivamus ac maximus eros, sit
amet porttitor libero. Praesent eu vehicula tortor. Vestibulum eu magna finibus, viverra diam nec, pulvinar velit. Praesent in mi sit amet nisi suscipit dictum. Proin sit amet diam tincidunt, tristique tortor ac, luctus est. Vivamus venenatis
orci non lacinia ultricies. Duis posuere sit amet elit nec pretium. Suspendisse eget efficitur arcu. Proin porttitor turpis ipsum, ac venenatis odio fermentum ut.
<div class="CG2-narrowLayout">
<div class="CG2-narrowLayout__main">
目次など
</div>
<div class="CG2-narrowLayout__sub">
<div class="CG2-articleSeriesNav">
<div class="CG2-articleSeriesNav__inner">
<ul>
<li><a href="#">第1回「 仕様を知る 1 」</a></li>
<li><a href="#">第2回「 仕様を知る 2 」</a></li>
<li><a href="#">第12回「 仕様を知る 2.4 」</a></li>
</ul>
</div>
</div>
</div>
<div class="CG2-narrowLayout__main">
本文領域
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum est vitae risus congue, quis cursus lectus mattis. Maecenas mattis tempus mauris ultrices viverra. Donec eget justo ante. Aliquam accumsan leo egestas venenatis faucibus. Aliquam sed massa hendrerit, suscipit ipsum vel, lobortis quam. Aliquam mauris elit, eleifend eu porta vel, sodales at augue. Praesent cursus, nulla sit amet suscipit fringilla, nibh velit efficitur ligula, a feugiat turpis massa ac nunc. Cras consequat nibh in nulla faucibus eleifend.
Ut mattis velit dui, sed tristique felis laoreet vitae. Donec placerat ante vel elit pellentesque, sit amet vulputate nisi consequat. Pellentesque efficitur euismod commodo. Vivamus ac maximus eros, sit amet porttitor libero. Praesent eu vehicula tortor. Vestibulum eu magna finibus, viverra diam nec, pulvinar velit. Praesent in mi sit amet nisi suscipit dictum. Proin sit amet diam tincidunt, tristique tortor ac, luctus est. Vivamus venenatis orci non lacinia ultricies. Duis posuere sit amet elit nec pretium. Suspendisse eget efficitur arcu. Proin porttitor turpis ipsum, ac venenatis odio fermentum ut.
</div>
</div>
articleBeforeLogin
/src/assets2/scss/_components.scss
<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
<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
記事ページ .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
記事本文、markdownから変換されることを前提
h2みだし
テキストリンクてきすとcode
テキストてきすとテキストてきすと
h3みだし
テキストリンクてきすとcode
テキストてきすとテキストてきすと
h4みだし
テキストリンクてきすと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>
</article>
articlePagination
/src/assets2/scss/_components.scss
<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
<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
ソースコードを埋め込むことができる
<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><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></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>
profileSimple
/src/assets2/scss/_components.scss
記事ページの下部等、バイオグラフィー自体がメインではないコンテンツ用
株式会社ピクセルグリッドの社員。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>