スタイルガイドについて

スタイルガイドに関する説明テキスト。

スタイルガイドに関する説明テキスト。

配色パターン

赤
#E74C3C
青
#3498DB
緑
#2ECC71
紫
#9B59B6
紺
#34495e
黄
#f1c40f
白
#ecf0f1

フォント種類

Primary Font:
"HelveticaNeue", Helvetica, Arial, sans-serif;
Primary Font Italic:
"HelveticaNeue", Helvetica, Arial, sans-serif;
Primary Font Bold:
"HelveticaNeue", Helvetica, Arial, sans-serif;
Secondary Font:
Georgia, Times, "Times New Roman", serif;
Secondary Font Italic:
Georgia, Times, "Times New Roman", serif;
Secondary Font Bold:
Georgia, Times, "Times New Roman", serif;
Back to Top

base

heading

タイトルの説明文です。

Example

タイトル1

説明文テキストテキストテキストテキストテキスト。

タイトル2

説明文テキストテキストテキストテキストテキスト。

タイトル3

説明文テキストテキストテキストテキストテキスト。

Back to Top
<p class="c-ttl-l">タイトル1</p>
<p>説明文テキストテキストテキストテキストテキスト。</p>
<p class="c-ttl-m">タイトル2</p>
<p>説明文テキストテキストテキストテキストテキスト。</p>
<p class="c-ttl-s">タイトル3</p>
<p>説明文テキストテキストテキストテキストテキスト。</p>

text

本文テキストの説明文です。

Example

c-text-lのテキストサンプルです。
重要なテキストにはclass="c-text-key"を使って色を指定します。
太字にしたい場合はstrongタグを使います。

c-text-mのテキストサンプルです。
重要なテキストにはclass="c-text-key"を使って色を指定します。
太字にしたい場合はstrongタグを使います。

c-text-sのテキストサンプルです。
重要なテキストにはclass="c-text-key"を使って色を指定します。
太字にしたい場合はstrongタグを使います。

Back to Top
<p class="c-text c-text-l">c-text-lのテキストサンプルです。<br>
重要なテキストには<span class="c-text-key">class="c-text-key"を使って色を指定</span>します。<br/>
太字にしたい場合は<strong>strongタグ</strong>を使います。</p>
<p class="c-text c-text-m">c-text-mのテキストサンプルです。<br>
重要なテキストには<span class="c-text-key">class="c-text-key"を使って色を指定</span>します。<br/>
太字にしたい場合は<strong>strongタグ</strong>を使います。</p>
<p class="c-text c-text-s">c-text-sのテキストサンプルです。<br>
重要なテキストには<span class="c-text-key">class="c-text-key"を使って色を指定</span>します。<br/>
太字にしたい場合は<strong>strongタグ</strong>を使います。</p>

patterns

button

ボタンの説明文です。

Example

ボタン1

ボタン2

ボタン3

アイコン付きボタン

Back to Top
<p><a href="" class="c-btn">ボタン1</a></p>
<p><a href="" class="c-btn c-btn-primary">ボタン2</a></p>
<p><a href="" class="c-btn c-btn-secondary">ボタン3</a></p>
<p><a href="" class="c-btn"><i class="fa fa-camera-retro"></i>アイコン付きボタン</a></p>

grid

グリッドの説明文です。

Example

Back to Top
<div class="c-grid">
	<div class="c-grid-item c-grid-2">
		<img src="https://placehold.it/800x450?text=1/2">
	</div>
	<div class="c-grid-item c-grid-2">
		<img src="https://placehold.it/800x450?text=1/2">
	</div>
</div>
<div class="c-grid">
	<div class="c-grid-item c-grid-3">
		<img src="https://placehold.it/800x450?text=1/3">
	</div>
	<div class="c-grid-item c-grid-3">
		<img src="https://placehold.it/800x450?text=1/3">
	</div>
	<div class="c-grid-item c-grid-3">
		<img src="https://placehold.it/800x450?text=1/3">
	</div>
</div>
<div class="c-grid">
	<div class="c-grid-item c-grid-4">
		<img src="https://placehold.it/800x450?text=1/4">
	</div>
	<div class="c-grid-item c-grid-4">
		<img src="https://placehold.it/800x450?text=1/4">
	</div>
	<div class="c-grid-item c-grid-4">
		<img src="https://placehold.it/800x450?text=1/4">
	</div>
	<div class="c-grid-item c-grid-4">
		<img src="https://placehold.it/800x450?text=1/4">
	</div>
</div>
<div class="c-grid">
	<div class="c-grid-item c-grid-5">
		<img src="https://placehold.it/800x450?text=1/5">
	</div>
	<div class="c-grid-item c-grid-5">
		<img src="https://placehold.it/800x450?text=1/5">
	</div>
	<div class="c-grid-item c-grid-5">
		<img src="https://placehold.it/800x450?text=1/5">
	</div>
	<div class="c-grid-item c-grid-5">
		<img src="https://placehold.it/800x450?text=1/5">
	</div>
	<div class="c-grid-item c-grid-5">
		<img src="https://placehold.it/800x450?text=1/5">
	</div>
</div>