Style Guide

パーツ

見出しとかボタンとかアイコン付きの文字とか

3.1.1 見出し1

headLine1

default

チラシ情報をチェック

View Source

<h1 class="headLine1">チラシ情報をチェック</h1>

Copy Source

3.1.2 見出し2

headLine2

default

チラシ情報をチェック

View Source

<h1 class="headLine2">チラシ情報をチェック</h1>

Copy Source

3.1.3 見出し3

headLine3

default

チラシ情報をチェック

View Source

<h1 class="headLine3">チラシ情報をチェック</h1>

Copy Source

3.1.4 見出し4

headLine4

default

チラシ情報をチェック

View Source

<h1 class="headLine4">チラシ情報をチェック</h1>

Copy Source

3.2 テキスト

txt

  • .txt-red -

    赤字

  • .txt-note -

    補足

default

※ご返答までに数日いただくことがございます

.txt-red

※ご返答までに数日いただくことがございます

.txt-note

※ご返答までに数日いただくことがございます

View Source

<p class="{$modifiers}">※ご返答までに数日いただくことがございます</p>

Copy Source

3.3.1 ボタン

btn

  • .btn-red -

    red

  • .btn-gray -

    gray

  • .btn-map -

    map

  • .btn-arrow -

    arrow

  • .btn-mid -

    mid

  • .btn-tall -

    tall

default

あああああああ

.btn-red

あああああああ

.btn-gray

あああああああ

.btn-map

あああああああ

.btn-arrow

あああああああ

.btn-mid

あああああああ

.btn-tall

あああああああ

View Source

<a href="" class="btn {$modifiers}">あああああああ</a>
<button class="btn {$modifiers}">MAP</button>

Copy Source

3.3.2 ボタンリスト

btns

default

View Source

<ul class="btns">
	<li class="btns_item"><button type="submit" class="btn btn-mid btn-tall">入力内容確認</button></li>
	<li class="btns_item"><button type="submit" class="btn btn-mid btn-tall">入力内容確認</button></li>
</ul><!-- /.btns -->

Copy Source

3.4 注釈

notes

default

  • ※表示価格は全て税込です。
  • ※上記価格はサポート1件価格です。
  • ※当社「安心サポート」ご加入済みのみパソコンは全て1,009円で作業致します。
  • ※本価格ならびにサービス内容につきましては、予告無く変更する場合がございます。

View Source

<ul class="notes">
	<li class="notes_item indent10e">※表示価格は全て税込です。</li>
	<li class="notes_item indent10e">※上記価格はサポート1件価格です。</li>
	<li class="notes_item indent10e">※当社「安心サポート」ご加入済みのみパソコンは全て1,009円で作業致します。</li>
	<li class="notes_item indent10e">※本価格ならびにサービス内容につきましては、予告無く変更する場合がございます。</li>
</ul><!-- /.notes -->

Copy Source

3.5 文字サイズ

font

  • font-exLarge -

    特大

  • font-large -

  • font-small -

  • font-exSmall -

    極小

default

あああああああああああああああああああああああああ

font-exLarge

あああああああああああああああああああああああああ

font-large

あああああああああああああああああああああああああ

font-small

あああああああああああああああああああああああああ

font-exSmall

あああああああああああああああああああああああああ

View Source

<p class="{$modifiers}">あああああああああああああああああああああああああ</p>

Copy Source

3.6 レスポンシブのテーブル

responsiveTable

default

本店所在地

〒410-0873 静岡県沼津市大諏訪719

地図はこちら

代表者 代表取締役社長執行役員 伊井 一史
設立 昭和59年4月27日
資本金 3億3198万円(平成26年3月31日現在)
主な事業内容 コンピュータ及び関連機器、バイク用品等の店頭小売販売
従業員数 227名(平成27年3月31日現在)

View Source

<table class="responsiveTable">
	<tbody>
		<tr>
			<th>本店所在地</th>
			<td>
				<p class="fLeft">〒410-0873 静岡県沼津市大諏訪719</p>
				<p class="tRight mt0"><a href="" class="btn btn-short">地図はこちら</a></p>
			</td>
		</tr>
		<tr>
			<th>代表者</th>
			<td>代表取締役社長執行役員 伊井 一史</td>
		</tr>
		<tr>
			<th>設立</th>
			<td>昭和59年4月27日</td>
		</tr>
		<tr>
			<th>資本金</th>
			<td>3億3198万円(平成26年3月31日現在)</td>
		</tr>
		<tr>
			<th>主な事業内容</th>
			<td>コンピュータ及び関連機器、バイク用品等の店頭小売販売</td>
		</tr>
		<tr>
			<th>従業員数</th>
			<td>227名(平成27年3月31日現在)</td>
		</tr>
	</tbody>
</table>

Copy Source