Green Design

パーツ集Parts

見出し

見出し1

見出し2

見出し3

見出し4

見出し5
見出し6

<h1 class="heading _lv1">見出し1</h1>
<h2 class="heading _lv2">見出し2</h2>
<h3 class="heading _lv3">見出し3</h3>
<h4 class="heading _lv4">見出し4</h4>
<h5 class="heading _lv5">見出し5</h5>
<h6 class="heading _lv6">見出し6</h6>

テキスト

通常サイズ

風は静まりかえり、街は微かなざわめきに包まれた。太陽が低く空を染め、街灯が灯りを灯し始めた。
人々は日常の喧騒を離れ、穏やかな夜に身を委ねた。

小サイズ

風は静まりかえり、街は微かなざわめきに包まれた。太陽が低く空を染め、街灯が灯りを灯し始めた。
人々は日常の喧騒を離れ、穏やかな夜に身を委ねた。

大サイズ

風は静まりかえり、街は微かなざわめきに包まれた。太陽が低く空を染め、街灯が灯りを灯し始めた。
人々は日常の喧騒を離れ、穏やかな夜に身を委ねた。 


<p class="text">通常サイズ</p>
<p class="text _sm">小サイズ</p>
<p class="text _lg">大サイズ</p>

ボタン

通常ボタン
小ボタン
大ボタン
ブロックボタン 

<a href="#" class="button">通常ボタン</a>
<a href="#" class="button _sm">小ボタン</a>
<a href="#" class="button _lg">大ボタン</a>
<a href="#" class="button _full">ブロックボタン</a>

リスト

箇条書きリスト


<ul class="list">
  <li>リストテキスト</li>
  <li>リストテキスト</li>
  <li>リストテキスト</li>
</ul>

ナンバーリスト

  1. リストテキスト
  2. リストテキスト
  3. リストテキスト

<ol class="numList">
  <li>リストテキスト</li>
  <li>リストテキスト</li>
  <li>リストテキスト</li>
</ol>

定義リスト

定義語
説明文が入ります。ダミーテキスト

<dl class="defList">
  <dt>定義語</dt>
  <dd>説明文が入ります。ダミーテキスト</dd>
</dl>

テーブル

上部にテーブル見出し

見出し 見出し 見出し 見出し
セル セル セル セル
セル セル セル セル 

<table class="tableBody">
  <thead>
    <tr>
      <th>見出し</th>
      <th>見出し</th>
      <th>見出し</th>
      <th>見出し</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>セル</td>
      <td>セル</td>
      <td>セル</td>
      <td>セル</td>
    </tr>
    <tr>
      <td>セル</td>
      <td>セル</td>
      <td>セル</td>
      <td>セル</td>
    </tr>
  </tbody>
</table>

左にテーブル見出し

見出し セル セル
見出し セル セル 

<table class="tableBody">
  <tr>
    <th>見出し</th>
    <td>セル</td>
    <td>セル</td>
  </tr>
  <tr>
    <th>見出し</th>
    <td>セル</td>
    <td>セル</td>
  </tr>
</table>

カラム

カラム数は1,2,3,4,6の5パターンで形成する。

columnsクラスの子要素には、幅に対応するclass名".wX"を付与し、その数字の合計が12になるように設定してください。

columnsクラスに"_col" が付与されている場合、画面幅が768px以下になると、カラムは画面幅いっぱいに広がり、縦に並ぶ表示になります。

1カラム

w12

  <div class="columns">
    <div class="w12">w12</div>
  </div>

2カラム

w6
w6
w4
w8
w8
w4

<div class="columns _2">
  <div class="w6">w6</div>
  <div class="w6">w6</div>
</div>

<div class="columns _2">
  <div class="w4">w4</div>
  <div class="w8">w8</div>
</div>

<div class="columns _2 _col">
  <div class="w8">w8</div>
  <div class="w4">w4</div>
</div>

3カラム

w4
w4
w4

<div class="columns _3">
  <div class="w4">w4</div>
  <div class="w4">w4</div>
  <div class="w4">w4</div>
</div>

4カラム

w3
w3
w3
w3

<div class="columns _4">
  <div class="w3">w3</div>
  <div class="w3">w3</div>
  <div class="w3">w3</div>
  <div class="w3">w3</div>
</div>

6カラム

w2
w2
w2
w2
w2
w2

<div class="columns _6">
  <div class="w2">w2</div>
  <div class="w2">w2</div>
  <div class="w2">w2</div>
  <div class="w2">w2</div>
  <div class="w2">w2</div>
  <div class="w2">w2</div>
</div>