カラー見出しボタンカードUI テーブル汎用クラスヘルパー

カラー

#00b088
$color-brand

#004a39
$color-sub

#333
$color-txt

#666
$color-gray-dark

#eee
$color-gray-light

見出し

見出しのスタイルです。 <h1> <h2> などである必要はありません

大見出し

<h2 class="ttl-lg">大見出し</h2>

中見出し

<h2 class="ttl-md">中見出し</h2>

ボタン

ボタンです。btn-fill などをマルチクラスで指定してパターンを変更できます。

スタンダードボタン

<a href="#" class="btn">スタンダードボタン</a>

塗りつぶしボタン

<a href="#" class="btn btn-fill">塗りつぶしボタン</a>

カードUI

親要素の横幅100％まで広がります。グリッドと組み合わせて使うことが多いです。

タイトルが入ります。

テキストが入ります。テキストが入ります。テキストが入ります。

<div style="width: 400px">
  <a href="#" class="card">
    <img src="https://placehold.jp/400x200.png" class="card_img" alt="">
    <div class="card_body">
      <p class="card_ttl">タイトルが入ります。</p>
      <p class="card_txt">テキストが入ります。テキストが入ります。テキストが入ります。</p>
    </div>
  </a>
</div>

テーブル

テーブルです。

テーブルの見出しテーブルの見出し	テーブルの内容テーブルの内容テーブルの内容テーブルの内容テーブルの内容テーブルの内容テーブルの内容テーブルの内容テーブルの内容テーブルの内容
テーブルの見出し	テーブルの内容テーブルの内容テーブルの内容テーブルの内容テーブルの内容テーブルの内容テーブルの内容テーブルの内容テーブルの内容テーブルの内容

<table class="table">
  <tr>
    <th>テーブルの見出しテーブルの見出し</th>
    <td>テーブルの内容テーブルの内容テーブルの内容テーブルの内容テーブルの内容テーブルの内容テーブルの内容テーブルの内容テーブルの内容テーブルの内容</td>
  </tr>
  <tr>
    <th>テーブルの見出し</th>
    <td>テーブルの内容テーブルの内容テーブルの内容テーブルの内容テーブルの内容テーブルの内容テーブルの内容テーブルの内容テーブルの内容テーブルの内容</td>
  </tr>
</table>

汎用クラス

テキスト要素

太字です。

太字になります

文章中に使いたい場合はspanを使います

<p class="bold">太字になります</p>
<p>文章中に使いたい場合は<span class="bold">spanを使います</span></p>

行揃え

左寄せ

中央寄せ

右寄せ

<div class="ta-left">左寄せ</div>
<div class="ta-center">中央寄せ</div>
<div class="ta-right">右寄せ</div>

フロート / clearfix

左フロート

右フロート

クリア

<div class="fl-l">左フロート</div>
<div class="fl-r">右フロート</div>
<div class="clear">クリア</div>

.cf で囲むとclearfixになります

左フロート

右フロート

<div class="cf" style="background: #eee">
  <div class="fl-l">左フロート</div>
  <div class="fl-r">右フロート</div>
</div>

要素タイプ

ブロック要素、インライン要素などを指定できます。

display:blockがかかります

display:inline-blockがかかります

display:inlineがかかります

<span class="d-bl" style="background: #eee">display:blockがかかります</span>

<div class="d-ib" style="background: #ddd; padding: 20px">display:inline-blockがかかります</div>

<div class="d-in" style="background: #ccc; padding: 20px">display:inlineがかかります</div>

非表示

それぞれの状態で display:none がかかります。 underとoverの略です。

smサイズ未満で非表示になります

mdサイズ未満で非表示になります

lgサイズ未満で非表示になります

smサイズ以上で非表示になります

mdサイズ以上で非表示になります

lgサイズ以上で非表示になります

<div class="hidden">全ての状態で非表示になります</div>

<div class="hidden-u-sm">smサイズ未満で非表示になります</div>

<div class="hidden-u-md">mdサイズ未満で非表示になります</div>

<div class="hidden-u-lg">lgサイズ未満で非表示になります</div>

<div class="hidden-o-sm">smサイズ以上で非表示になります</div>

<div class="hidden-o-md">mdサイズ以上で非表示になります</div>

<div class="hidden-o-lg">lgサイズ以上で非表示になります</div>

ヘルパー

レイアウトなどで、どうしても調整が必要な場合のクラスです。

!important が指定されています。

要素下にとても少しのマージン

要素下に少しのマージン

要素下に普通のマージン

要素下に大きいマージン

要素下にとても大きいマージン

要素上にとても少しのマージン

要素上に少しのマージン

要素上に普通のマージン

要素上に大きいマージン

要素上にとても大きいマージン

<p class="mb-xs">要素下にとても少しのマージン</p>

<p class="mb-sm">要素下に少しのマージン</p>

<p class="mb-md">要素下に普通のマージン</p>

<p class="mb-lg">要素下に大きいマージン</p>

<p class="mb-xl">要素下にとても大きいマージン</p>

<p class="mt-xs">要素上にとても少しのマージン</p>

<p class="mt-sm">要素上に少しのマージン</p>

<p class="mt-md">要素上に普通のマージン</p>

<p class="mt-lg">要素上に大きいマージン</p>

<p class="mt-xl">要素上にとても大きいマージン</p>