Button

ボタン

共通クラスなるc-buttonはsassの機能プレースホルダ%buttonとして@extendしています。
そのためクラスの記述はしていません。

Default 
<a class="c-button__default"><span>Default</span></a>
Primary 
<a class="c-button__primary">Primary</a>
Success 
<a class="c-button__success">Success</a>
Info 
<a class="c-button__info">Info</a>
Warning 
<a class="c-button__warning">Warning</a>
Denger 
<a class="c-button__denger">Denger</a>
Link 
<a class="c-button__link">Link</a>

Footer

フッター

基本的なフッターのマークアップです。

Copyright © taisun0523 All rights reserved. 

<div class="c-footer__bottom">
    <div class="l-inner">
        <p class="c-footer__bottom--body">
            Copyright &copy; taisun0523 All rights reserved.
        </p>
    </div>
</div>

Heading

Heading（見出し）

基本的な見出しのマークアップです。

見出しの　Sample

<header class="c-heading c-heading__lvOne">
<h1>見出しの　Sample</h1>
</header>

h1 見出し

 
<header class="c-heading__lvOne">
  <h1>h1 見出し</h1>
</header>

h2 見出し

 
<header class="c-heading__lvTwo">
  <h2>h2 見出し</h2>
</header>

h3 見出し

 
<header class="c-heading__lvThird">
  <h3>h3 見出し</h3>
</header>

h4 見出し

 
<header class="c-heading__lvFour">
  <h4>h4 見出し</h4>
</header>
h5 見出し
 
<header class="c-heading__lvFive">
  <h5>h5 見出し</h5>
</header>

List

基本的なリストのマークアップです。

ナンバー付きリスト

  1. (1)
    テキストテキストテキストテキストテキストテキスト
  2. (2)
    テキストテキストテキストテキストテキストテキストテキスト
    • テキストテキストテキストテキストテキストテキストテキスト
    • テキストテキストテキストテキストテキストテキストテキスト
  3. (3)
    テキストテキストテキストテキストテキストテキストテキスト
  4. (4)
    テキストテキストテキストテキストテキストテキストテキスト
  5. (5)
    テキストテキストテキストテキストテキストテキストテキスト
  6. (6)
    テキストテキストテキストテキストテキストテキストテキスト
<ol class="c-listNumber">
    <li class="c-listNumber__item">
        <dl class="c-listNumber__body">
            <dt class="c-listNumber__num">(1)</dt>
            <dd class="c-listNumber__txt">テキストテキストテキストテキストテキストテキスト</dd>
        </dl>
    </li>
    <li class="c-listNumber__item">
        <dl class="c-listNumber__body">
            <dt class="c-listNumber__num">(2)</dt>
            <dd class="c-listNumber__txt">
                <span>テキストテキストテキストテキストテキストテキストテキスト</span>
                <ul>
                    <li>テキストテキストテキストテキストテキストテキストテキスト</li>
                    <li>テキストテキストテキストテキストテキストテキストテキスト</li>
                </ul>
            </dd>
        </dl>
    </li>
    <li class="c-listNumber__item">
        <dl class="c-listNumber__body">
            <dt class="c-listNumber__num">(3)</dt>
            <dd class="c-listNumber__txt">テキストテキストテキストテキストテキストテキストテキスト</dd>
        </dl>
    </li>
    <li class="c-listNumber__item">
        <dlv class="c-listNumber__body">
            <dt class="c-listNumber__num">(4)</dt>
            <dd>テキストテキストテキストテキストテキストテキストテキスト</dd>
        </dl>
    </li>
    <li class="c-listNumber__item">
        <dl class="c-listNumber__body">
            <dt class="c-listNumber__num">(5)</dt>
            <dd class="c-listNumber__txt">テキストテキストテキストテキストテキストテキストテキスト</dd>
        </dl>
    </li>
    <li class="c-listNumber__item">
        <dl class="c-listNumber__body">
            <dt class="c-listNumber__num">(6)</dt>
            <dd class="c-listNumber__txt">テキストテキストテキストテキストテキストテキストテキスト</dd>
        </dl>
    </li>
</ol>

サイトマップリスト

<ul class="c-siteMaplist">
        <li class="c-siteMaplist__item"><a href="xxx.html">テキスト</a></li>
        <li class="c-siteMaplist__item"><a href="xxx.html">テキスト</a></li>
        <li class="c-siteMaplist__item"><a href="xxx.html">テキスト</a></li>
        <li class="c-siteMaplist__item"><a href="xxx.html">テキストテキスト</a></li>
        <li class="c-siteMaplist__item"><a href="xxx.html">テキスト</a></li>
    </ul>

Navigaation

ナビゲーションのマークアップです。

ヘッダー

<header id="header" class="l-header">
    <div class="l-inner g-rows">
        <p class="c-logo g-col__4"><a href="/">ロゴ</a></p>
        <nav class="c-subNav g-col__8">
            <ul class="c-subNav__body">
                <li class="c-subNav__item"><a href="xxx.html">LINK1</a></li><li class="c-subNav__item"><a href="xxx.html">LINK2</a></li><li class="c-subNav__item"><a href="xxx.html">LINK3</a></li>
            </ul>
        </nav>
    </div>
</header>

グローバルナビゲーション

基本的なグローバルナビゲーションのマークアップになります。

<nav class="c-gloNav">
    <ul class="c-gloNav__body">
        <li class="c-gloNav__item"><a href="/"><span>Menu1</span></a></li><li class="c-gloNav__item is-currentMenu"><a href="/"><span>Menu2</span></a></li><li class="c-gloNav__item"><a href="/"><span>Menu3</span></a></li><li class="c-gloNav__item"><a href="/"><span>Menu4</span></a></li><li class="c-gloNav__item"><a href="/"><span>Menu5</span></a></li>
    </ul>
</nav>

フッター

<footer class="l-footer">
    <nav class="c-footerNav">
        <ul class="c-footerNav__body">
            <li class="c-footerNav__item"><a href="/">Menu1</a></li>
            <li class="c-footerNav__item"><a href="/">Menu2</a></li>
            <li class="c-footerNav__item"><a href="/">Menu3</a></li>
            <li class="c-footerNav__item"><a href="/">Menu4</a></li>
            <li class="c-footerNav__item"><a href="#">Menu5</a></li>
        </ul>
    </nav>
</footer>

パンくずリスト

パンくずリストです。

<nav class="c-breadCrumb">
    <ul class="c-breadCrumb__body">
        <li class="c-breadCrumb__item"><a class="c-breadCrumb__link">パンくず１</a><span class="c-breadCrumb__arrow">></span></li>
        <li class="c-breadCrumb__item"><a class="c-breadCrumb__link">パンくず２</a><span class="c-breadCrumb__arrow">></span></li>
        <li class="c-breadCrumb__item"><a class="c-breadCrumb__link">パンくず３</a><span class="c-breadCrumb__arrow">></span></li>
        <li class="c-breadCrumb__item is-page">パンくず4</li>
    </ul>
</nav>

トップへ戻る

トップへ戻るボタンです。

<ul class="c-pageTop">
    <li class="c-pageTop__item">
        <a href="#" class="c-pageTop__text">トップへ戻る</a>
    </li>
</ul>

table

table

項目 テキスト
項目 テキスト
項目 テキスト
項目 テキスト
項目 テキスト 
<div class="c-tableBorder">
    <table>
        <tbody>
            <tr>
                <th>項目</th>
                <td>テキスト</td>
            </tr>
            <tr>
                <th>項目</th>
                <td>テキスト</td>
            </tr>
            <tr>
                <th>項目</th>
                <td>テキスト</td>
            </tr>
            <tr>
                <th>項目</th>
                <td>テキスト</td>
            </tr>
            <tr>
                <th>項目</th>
                <td>テキスト</td>
            </tr>
        </tbody>
    </table>
</div>

table noborder

項目 テキスト
項目 テキスト
項目 テキスト
項目 テキスト
項目 テキスト 
<div class="c-tableNoBorder">
    <table>
        <tbody>
            <tr class="first">
                <th>項目</th>
                <td>テキスト</td>
            </tr>
            <tr>
                <th>項目</th>
                <td>テキスト</td>
            </tr>
            <tr>
                <th>項目</th>
                <td>テキスト</td>
            </tr>
            <tr>
                <th>項目</th>
                <td>テキスト</td>
            </tr>
            <tr class="last">
                <th>項目</th>
                <td>テキスト</td>
            </tr>
        </tbody>
    </table>
</div>

Typography

基本的なフォントは以下になります。

使用フォント 単位 ベースサイズ
font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; px（ピクセル） 14px


テキストのマークアップ＆デザインです。

基本のてきすと

 
<p>基本のてきすと</p>

エラーテキスト

 
<p class="u-err">エラーテキスト</p>

太字テキスト

 
<p><strong>太字テキスト</strong></p>

サブテキスト

 
<p><small>サブテキスト</small></p>


注釈

注釈のマークアップです。

※
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<dl class="c-annotation">
    <dt>※</dt><dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
</dl>

定義文1

テキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト
<dl class="c-definition">
    <dt>テキストテキストテキストテキスト</dt>
    <dd>テキストテキストテキストテキストテキストテキストテキストテキスト</dd>
</dl>

定義文2

項目1
  1. （1） テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  2. （2） テキストテキストテキストテキスト
  3. （3） テキストテキストテキストテキスト
    テキストテキストテキストテキスト
    テキストテキストテキストテキスト
項目2
テキストテキストテキストテキストテキストテキストテキストテキスト 
<dl class="c-definitionTbl">
    <dt class="c-definitionTbl__title"><span>項目1</span></dt>
    <dd class="c-definitionTbl__body">
        <ol>
            <li>
                <span class="c-definitionTbl__num">（1）</span>
                <span class="c-definitionTbl__txt">
                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                </span>
            </li>
            <li>
                <span class="c-definitionTbl__num">（2）</span>
                <span class="c-definitionTbl__txt">テキストテキストテキストテキスト</span>
            </li>
            <li>
                <span class="c-definitionTbl__num">（3）</span>
                <span class="c-definitionTbl__txt">
              テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト
                </span>
            </li>
        </ol>
    </dd>
</dl>
<dl class="c-definitionTbl">
    <dt class="c-definitionTbl__title"><span>項目2</span></dt>
    <dd class="c-definitionTbl__body">
    テキストテキストテキストテキストテキストテキストテキストテキスト
    </dd>
</dl>

囲み

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<div class="c-infoNote">
    <div class="c-infoNote__inner">
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
</div>