Tachyons

TachyonsとはユーティリティファーストのCSSフレームワークです。Tachyonsの使い方をご紹介します。このページもTachyonsを使って作られています。

概要

Tachyons
公式サイト https://tachyons.io/
開発者 Adam Morse & John Otander
ライセンス MIT
グリッド 10列
GitHub stars 10.4k
Twitter @tachyons_css
Tachyons v4.12.0
モジュール サイズ
tachyons.min.css 72.2KB

チートシート

CDN

Tachyonsのコンポーネントは、CSSのみです。

Tachyonsを使用するには、HTMLのヘッダでTachyonsのCSSをインポートします。

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css"/>
  </head>
  <body>
    <!-- content -->
  </body>
</html>

.bg-white

<p class="white pa2">bg-white</p>

bg-white

.bg-near-white

<p class="white pa2">bg-near-white</p>

bg-near-white

.bg-light-silver

<p class="bg-light-silver pa2">bg-light-silver</p>

bg-light-silver

.bg-silver

<p class="bg-silver pa2">bg-silver</p>

bg-silver

.bg-light-gray

<p class="bg-light-gray pa2">bg-light-gray</p>

bg-light-gray

.bg-moon-gray

<p class="bg-moon-gray pa2">bg-moon-gray</p>

bg-moon-gray

.bg-gray

<p class="bg-gray pa2">bg-gray</p>

bg-gray

.bg-mid-gray

<p class="bg-mid-gray pa2">bg-mid-gray</p>

bg-mid-gray

.bg-dark-gray

<p class="bg-dark-gray pa2">bg-bg-dark-gray</p>

bg-dark-gray

.bg-near-black

<p class="bg-near-black white pa2">bg-near-black</p>

bg-near-black

.bg-black

<p class="bg-black white pa2">bg-black</p>

bg-black

.bg-orange

<div class="bg-orange pa2">
  .bg-orange
</div>
.bg-orange

.bg-gold

<div class="bg-gold pa2">
  .bg-gold
</div>
bg-gold

.bg-light-pink

<p class="bg-light-pink pa2">bg-light-pink</p>

bg-light-pink

.bg-pink

<p class="bg-pink pa2">bg-pink</p>

bg-pink

.bg-hot-pink

<p class="bg-hot-pink pa2">bg-hot-pink</p>

bg-hot-pink

.bg-dark-pink

<p class="bg-dark-pink pa2">bg-dark-pink</p>

bg-dark-pink

.bg-washed-red

<p class="bg-washed-red pa2">bg-washed-red</p>

bg-washed-red

.bg-light-red

<p class="pa2 bg-light-red">bg-light-red</p>

bg-light-red

.bg-red

<p class="pa2 bg-red">bg-red</p>

.bg-red

.bg-dark-red

<p class="pa2 bg-dark-red">bg-dark-red</p>

bg-dark-red

.bg-yellow

<div class="bg-washed-yellow pa2">
  .bg-washed-yellow
</div>
<div class="bg-light-yellow pa2">
  .bg-light-yellow
</div>
<div class="bg-yellow pa2">
  .bg-yellow
</div>
.bg-washed-yellow
.bg-light-yellow
.bg-yellow

.bg-green

<div class="bg-washed-green pa2">
  .bg-washed-green
</div>
<div class="bg-light-green pa2">
  .bg-light-green
</div>
<div class="bg-green pa2">
  .bg-green
</div>
<div class="bg-dark-green pa2">
  .bg-dark-green
</div>
.bg-washed-green
.bg-light-green
.bg-green
.bg-dark-green

.bg-purple

<div class="bg-light-purple pa2">
  .bg-light-purple
</div>
<div class="bg-purple pa2">
  .bg-purple
</div>
.bg-light-purple
.bg-purple

.bg-blue

<div class="bg-washed-blue pa2">
  .bg-washed-blue
</div>
<div class="bg-lightest-blue pa2">
  .bg-lightest-blue
</div>
<div class="bg-blue pa2">
  .bg-blue
</div>
<div class="bg-light-blue pa2">
  .bg-light-blue
</div>
<div class="bg-dark-blue pa2">
  .bg-dark-blue
</div>
.bg-washed-blue
.bg-lightest-blue
.bg-light-blue
.bg-blue
.bg-dark-blue

.bg-navy

<div class="bg-navy white pa2">
  .bg-navy
</div>
bg-navy

.white

<p class="white">.white</p>

.white

.near-white

<p class="near-white">.near-white</p>

.near-white

.black

<p class="black">
  .black
</p>
<p class="near-black">
  .near-black
</p>

.black

.near-black

.light-silver

<p class="light-silver">light-silver</p>

light-silver

.silver

<p class="silver">silver</p>

silver

.light-gray

<p class="light-gray">light-gray</p>

light-gray

.moon-gray

<p class="moon-gray">moon-gray</p>

moon-gray

.gray

<p class="gray">gray</p>

gray

.mid-gray

<p class="mid-gray">mid-gray</p>

mid-gray

.dark-gray

<p class="dark-gray">dark-gray</p>

dark-gray

.pink

<p class="light-pink">
  .light-pink
</p>
<p class="pink">
  .pink
</p>
<p class="hot-pink">
  .hot-pink
</p>
<p class="dark-pink">
  .dark-pink
</p>

.light-pink

.pink

.hot-pink

.dark-pink

.red

<p class="washed-red">
  .washed-red
</p>
<p class="light-red">
  .light-red
</p>
<p class="red">
  .red
</p>
<p class="dark-red">
  .dark-red
</p>

.washed-red

.light-red

.red

.dark-red

.gold

<p class="gold">
  .gold
</p>

.gold

.orange

<p class="orange">orange</p>

orange

.yellow

<p class="washed-yellow">
  .washed-yellow
</p>
<p class="light-yellow">
  .light-yellow
</p>
<p class="yellow">
  .yellow
</p>

.washed-yellow

.light-yellow

.yellow

.green

<p class="washed-green">
  .washed-green
</p>
<p class="light-green">
  .light-green
</p>
<p class="green">
  .green
</p>
<p class="dark-green">
  .dark-green
</p>

.washed-green

.light-green

.green

.dark-green

.blue

<p class="washed-blue">
  .washed-blue
</p>
<p class="lightest-blue">
  .lightest-blue
</p>
<p class="light-blue">
  .light-blue
</p>
<p class="blue">
  .blue
</p>
<p class="dark-blue">
  .dark-blue
</p>

.washed-blue

.lightest-blue

.light-blue

.blue

.dark-blue

<p class="navy">
  .navy</p>

.purple

<p class="light-purple">
  .light-purple
</p>
<p class="purple">
  .purple
</p>

.light-purple

.purple

Border

.ba

<div class="ba">.ba</div>
.ba

.bt

<div class="bt">.bt</div>
.bt

.br

<div class="br">.br</div>
.br

.bb

<div class="bb">.bb</div>
.bb

.bl

<div class="bl">.bl</div>
.bl

.bw{n}

<div class="ba bw1">bw1</div>
<div class="ba bw2">bw2</div>
<div class="ba bw3">bw3</div>
<div class="ba bw4">bw4</div>
<div class="ba bw5">bw5</div>
bw1
bw2
bw3
bw4
bw5

br{n}

<div class="pa3 ba br0">
  br0
</div>
br0
<div class="pa3 ba br1">
  br1
</div>
br1
<div class="pa3 ba br2">
  br2
</div>
br2
<div class="pa3 ba br3">
  br3
</div>
br3
<div class="pa3 ba br4">
  br4
</div>
br4
<div class="pa3 ba br-100">
  br-100
</div>
br-100

.br-pill

<div class="pa3 ba br-pill">
  br-pill
</div>
br-pill

.b--dashed

<div class="ba b--dashed">b--dashed</div>
b--dashed

.b--dotted

<div class="ba b--dotted">b--dotted</div>
b--dotted

.b--{color}

<div class="ba b--black">b--black</div>
<div class="ba b--near-black">b--near-black</div>
<div class="ba b--dark-gray">b--dark-gray</div>
<div class="ba b--mid-gray">b--mid-gray</div>
<div class="ba b--gray">b--gray</div>
<div class="ba b--silver">b--silver</div>
<div class="ba b--light-silver">b--light-silver</div>
<div class="ba b--light-gray">b--light-gray</div>
<div class="ba b--near-white">b--near-white</div>
<div class="ba b--dark-red">b--dark-red</div>
<div class="ba b--red">b--red</div>
<div class="ba b--orange">b--orange</div>
<div class="ba b--gold">b--gold</div>
<div class="ba b--yellow">b--yellow</div>
<div class="ba b--purple">b--purple</div>
<div class="ba b--light-purple">b--light-purple</div>
<div class="ba b--hot-pink">b--hot-pink</div>
<div class="ba b--dark-pink">b--dark-pink</div>
<div class="ba b--pink">b--pink</div>
<div class="ba b--dark-green">b--dark-green</div>
<div class="ba b--green">b--green</div>
<div class="ba b--navy">b--navy</div>
<div class="ba b--dark-blue">b--dark-blue</div>
<div class="ba b--blue">b--blue</div>
<div class="ba b--light-blue">b--light-blue</div>
<div class="ba b--lightest-blue">b--lightest-blue</div>
b--black
b--near-black
b--dark-gray
b--mid-gray
b--gray
b--silver
b--light-silver
b--light-gray
b--near-white
b--dark-red
b--red
b--orange
b--gold
b--yellow
b--purple
b--light-purple
b--hot-pink
b--dark-pink
b--pink
b--dark-green
b--green
b--navy
b--dark-blue
b--blue
b--light-blue
b--lightest-blue

Card

Tachyons CSSフレームワークにコンポーネントクラスは無い。カードを作成するには、ユーティリティクラスを組み合わせる。

<div class="bg-washed-blue ba br2 b--lightest-blue">
  <p class="pl3 dark-blue">Information</p>
</div>

Information

<div class="bg-blue ba br3 b--blue br--top white b pt2 pb1 pl3">
  Info
</div>
<div class="bg-washed-blue ba br3 b--blue br--bottom">
  <p class="pl3 dark-blue">Message</p>
</div>
Info

Message

.debug-grid

<div class="debug-grid">
  <p class="pa3">レイアウトのデバッグ用にグリッドを表示できます。</p>
</div>

レイアウトのデバッグ用にグリッドを表示できます。

<div class="debug-grid-16">
  <p class="pa3">レイアウトのデバッグ用にグリッドを表示できます。</p>
</div>

.debug-grid-16

レイアウトのデバッグ用にグリッドを表示できます。

.db

dbクラスを指定すると、ブロックレベル要素として表示される。

ブロックレベル要素
横幅の初期値 親要素の横幅と同じ
高さの初期値 内容で決まる
横幅と高さの指定 可能
ほかの要素との並び方 縦に並ぶ
上下のmargin 指定できる
<span>display</span>
<span class="db">block</span>
display block

.di

diクラスを指定すると、インライン要素として表示される。

インライン要素
横幅の初期値 内容で決まる
高さの初期値 内容で決まる
横幅と高さの指定 不可能
ほかの要素との並び方 横に並ぶ
上下のmargin 指定できない
<span>display</span>
<span class="di">inline</span>
display inline

.dib

dibクラスを指定すると、インラインブロック要素として表示される。

インラインブロック要素
横幅の初期値 内容で決まる
高さの初期値 内容で決まる
横幅と高さの指定 可能
ほかの要素との並び方 横に並ぶ
上下のmargin 指定できない
<span>display</span>
<span class="dib">inline-block</span>
display inline-block

.dn

<span>display</span>
<span class="dn">none</span>
display none

.flex

<div class="flex">
  <div class="outline w-50 ma1 pa2">1</div>
  <div class="outline w-50 ma1 pa2">2</div>
  <div class="outline w-50 ma1 pa2">3</div>
</div>
1
2
3

.flex-wrap

<div class="flex flex-wrap">
  <div class="outline w-50 ma1 pa2">1</div>
  <div class="outline w-50 ma1 pa2">2</div>
  <div class="outline w-50 ma1 pa2">3</div>
</div>
1
2
3

.flex-wrap-reverse

<div class="flex flex-wrap-reverse">
  <div class="outline w-50 ma1 pa2">1</div>
  <div class="outline w-50 ma1 pa2">2</div>
  <div class="outline w-50 ma1 pa2">3</div>
</div>
1
2
3

.flex-column

<div class="flex flex-column">
  <div class="outline w-50 ma1 pa2">1</div>
  <div class="outline w-50 ma1 pa2">2</div>
  <div class="outline w-50 ma1 pa2">3</div>
</div>
1
2
3

.flex-column

<div class="flex flex-column-reverse">
  <div class="outline w-50 ma1 pa2">1</div>
  <div class="outline w-50 ma1 pa2">2</div>
  <div class="outline w-50 ma1 pa2">3</div>
</div>
1
2
3

Font

.i

Make fonts <span class="i">italic</span>.

Make fonts italic.

.b

Make fonts <span class="b">bold</span>.

Make fonts bold.

.fw1

<p class="fw1">fw1</p>

fw1

.fw2

<p class="fw2">fw2</p>

fw2

.fw3

<p class="fw3">fw3</p>

fw3

.fw4

<p class="fw4">fw4</p>

fw4

.fw5

<p class="fw5">fw5</p>

fw5

.fw6

<p class="fw6">fw6</p>

fw6

.fw7

<p class="fw7">fw7</p>

fw7

.fw8

<p class="fw8">fw8</p>

fw8

.fw9

<p class="fw9">fw9</p>

fw9

.f1

<p class="f1">f1</p>

f1

.f2

<p class="f2">f2</p>

f2

.f3

<p class="f3">f3</p>

f3

.f4

<p class="f4">f4</p>

f4

.f5

<p class="f5">f5</p>

f5

.f6

<p class="f6">f6</p>

f6

.input-reset

<form>
  <label for="ir">name</label>
  <input type="text" class="input-reset" id="ir">
</form>

h{n}

<div class="h1 bg-moon-gray mt1">.h1</div>
<div class="h2 bg-moon-gray mt2">.h2</div>
<div class="h3 bg-moon-gray mt2">.h3</div>
<div class="h4 bg-moon-gray mt2">.h4</div>
<div class="h5 bg-moon-gray mt2">.h5</div>
.h1
.h2
.h3
.h4
.h5

List

<ul>
  <li>first</li>
  <li>second
    <ul>
      <li>third</li>
    </ul>
  </li>
</ul>

リンクに link クラスを指定すると、テキストの装飾を無くすことができる。

<p>
  <a href="#">TOP</a>
</p>
<p>
  <a class="link" href="#">TOP</a>
</p>

TOP

TOP

.dim

リンクに dim クラスを指定すると、マウスカーソルを乗せたときに色を変えることができる。

<p>
  <a href="#">TOP</a>
</p>
<p>
  <a class="dim" href="#">TOP</a>
</p>

TOP

TOP

.list

リスト項目先頭の記号をつけたくない場合は、listクラスを指定します。

<ul class="list">
  <li>first</li>
  <li>second
    <ul class="list">
      <li>third</li>
    </ul>
  </li>
</ul>

.pl0

リスト項目の字下げ(パディング)をしたくない場合は、pl0クラスを指定します。

<ul class="list pl0">
  <li>first</li>
  <li>second
    <ul class="list pl0">
      <li>third</li>
    </ul>
  </li>
</ul>

.ma0

<div class="ma0 bg-light-green">ma0</div>
ma0

.ma1

<div class="ma1 bg-light-green">ma1</div>
ma1

.ma2

<div class="ma2 bg-light-green">ma2</div>
ma2

.ma3

<div class="ma3 bg-light-green">ma3</div>
ma3

.ma4

<div class="ma4 bg-light-green">ma4</div>
ma4

.ma5

<div class="ma5 bg-light-green">ma5</div>
ma5

.ma6

<div class="ma6 bg-light-green">ma6</div>
ma6

.mt{n}

<div class="flex flex-wrap">
  <div class="mt0 mr1 ph2 bg-light-blue">
    mt0
  </div>
  <div class="mt1 mr1 ph2 bg-light-blue">
    mt1
  </div>
  <div class="mt2 mr1 ph2 bg-light-blue">
    mt2
  </div>
  <div class="mt3 mr1 ph2 bg-light-blue">
    mt3
  </div>
  <div class="mt4 mr1 ph2 bg-light-blue">
    mt4
  </div>
  <div class="mt5 mr1 ph2 bg-light-blue">
    mt5
  </div>
  <div class="mt6 mr1 ph2 bg-light-blue">
    mt6
  </div>
  <div class="mt7 mr1 ph2 bg-light-blue">
    mt7
  </div>
</div>
mt0
mt1
mt2
mt3
mt4
mt5
mt6
mt7

.mr{n}

<div class="mr0 mb1 bg-light-gray">mr0</div>
<div class="mr1 mb1 bg-light-blue">mr1</div>
<div class="mr2 mb1 bg-light-blue">mr2</div>
<div class="mr3 mb1 bg-light-blue">mr3</div>
<div class="mr4 mb1 bg-light-blue">mr4</div>
<div class="mr5 mb1 bg-light-blue">mr5</div>
<div class="mr6 mb1 bg-light-blue">mr6</div>
<div class="mr7 mb1 bg-light-blue">mr7</div>
mr0
mr1
mr2
mr3
mr4
mr5
mr6
mr7

.mb{n}

<div class="flex flex-wrap">
  <div class="mb0 mt1 mr1 ph2 bg-light-blue">
    mb0
  </div>
  <div class="mb1 mt1 mr1 ph2 bg-light-blue">
    mb1
  </div>
  <div class="mb2 mt1 mr1 ph2 bg-light-blue">
    mb2
  </div>
  <div class="mb3 mt1 mr1 ph2 bg-light-blue">
    mb3
  </div>
  <div class="mb4 mt1 mr1 ph2 bg-light-blue">
    mb4
  </div>
  <div class="mb5 mt1 mr1 ph2 bg-light-blue">
    mb5
  </div>
  <div class="mb6 mt1 mr1 ph2 bg-light-blue">
    mb6
  </div>
  <div class="mb7 mt1 mr1 ph2 bg-light-blue">
    mb7
  </div>
</div>
mb0
mb1
mb2
mb3
mb4
mb5
mb6
mb7

.ml0

<div class="ml0 mb1 bg-light-blue">ml0</div>
ml0

.ml1

<div class="ml1 mb1 bg-light-blue">ml1</div>
ml1

.ml2

<div class="ml2 mb1 bg-light-blue">ml2</div>
ml2

.ml3

<div class="ml3 mb1 bg-light-blue">ml3</div>
ml3

.ml4

<div class="ml4 mb1 bg-light-blue">ml4</div>
ml4

.ml5

<div class="ml5 mb1 bg-light-blue">ml5</div>
ml5

.ml6

<div class="ml6 mb1 bg-light-blue">ml6</div>
ml6

.ml7

<div class="ml7 mb1 bg-light-blue">ml7</div>
ml7

.mh{n}

<div class="mh0 mb1 bg-light-blue">mh0</div>
<div class="mh1 mb1 bg-light-blue">mh1</div>
<div class="mh2 mb1 bg-light-blue">mh2</div>
<div class="mh3 mb1 bg-light-blue">mh3</div>
<div class="mh4 mb1 bg-light-blue">mh4</div>
<div class="mh5 mb1 bg-light-blue">mh5</div>
<div class="mh6 mb1 bg-light-blue">mh6</div>
<div class="mh7 mb1 bg-light-blue">mh7</div>
mh0
mh1
mh2
mh3
mh4
mh5
mh6
mh7

.mv{n}

<div class="flex flex-wrap">
  <div class="mv0 mr1 ph2 bg-light-blue">
    mv0
  </div>
  <div class="mv1 mr1 ph2 bg-light-blue">
    mv1
  </div>
  <div class="mv2 mr1 ph2 bg-light-blue">
    mv2
  </div>
  <div class="mv3 mr1 ph2 bg-light-blue">
    mv3
  </div>
  <div class="mv4 mr1 ph2 bg-light-blue">
    mv4
  </div>
  <div class="mv5 mr1 ph2 bg-light-blue">
    mv5
  </div>
  <div class="mv6 mr1 ph2 bg-light-blue">
    mv6
  </div>
  <div class="mv7 mr1 ph2 bg-light-blue">
    mv7
  </div>
</div>
mv0
mv1
mv2
mv3
mv4
mv5
mv6
mv7

.pa0

<div class="pa0 bg-light-green">Padding all 0</div>
Padding all 0

.pa1

<div class="pa1 bg-light-green">Padding all 1</div>
Padding all 1

.pa2

<div class="pa2 bg-light-green">Padding all 2</div>
Padding all 2

.pa3

<div class="pa3 bg-light-green">Padding all 3</div>
Padding all 3

.pa4

<div class="pa4 bg-light-green">Padding all 4</div>
Padding all 4

.pa5

<div class="pa5 bg-light-green">Padding all 5</div>
Padding all 5

.pa6

<div class="pa6 bg-light-green">Padding all 6</div>
Padding all 6

.pa7

パディングが大きすぎてレスポンシブにならないことに注意。

<div class="pa7 bg-light-green">Padding all 7</div>

.pt{n}

<div class="flex flex-wrap">
  <div class="pt0 ph2 mr1 mb1 bg-light-blue">
    pt0
  </div>
  <div class="pt1 ph2 mr1 mb1 bg-light-blue">
    pt1
  </div>
  <div class="pt2 ph2 mr1 mb1 bg-light-blue">
    pt2
  </div>
  <div class="pt3 ph2 mr1 mb1 bg-light-blue">
    pt3
  </div>
  <div class="pt4 ph2 mr1 mb1 bg-light-blue">
    pt4
  </div>
  <div class="pt5 ph2 mr1 mb1 bg-light-blue">
    pt5
  </div>
  <div class="pt6 ph2 mr1 mb1 bg-light-blue">
    pt6
  </div>
  <div class="pt7 ph2 mr1 mb1 bg-light-blue">
    pt7
  </div>
</div>
pt0
pt1
pt2
pt3
pt4
pt5
pt6
pt7

.pl0

<div class="pl0 mb1 bg-light-blue">pl0</div>
pl0

.pl1

<div class="pl1 mb1 bg-light-blue">pl1</div>
pl1

.pl2

<div class="pl2 mb1 bg-light-blue">pl2</div>
pl2

.pl3

<div class="pl3 mb1 bg-light-blue">pl3</div>
pl3

.pl4

<div class="pl4 mb1 bg-light-blue">pl4</div>
pl4

.pl5

<div class="pl5 mb1 bg-light-blue">pl5</div>
pl5

.pl6

<div class="pl6 mb1 bg-light-blue">pl6</div>
pl6

.pl7

<div class="pl7 mb1 bg-light-blue">pl7</div>
pl7

.ph0

<p class="ph0 bg-light-blue">ph0</p>

ph0

.ph1

<p class="ph1 bg-light-blue">ph1</p>

ph1

.ph2

<p class="ph2 bg-light-blue">p</p>

ph2

.ph3

<p class="ph3 bg-light-blue">ph3</p>

ph3

.ph4

<p class="ph4 bg-light-blue">ph4</p>

ph4

.ph5

<p class="ph5 bg-light-blue">ph5</p>

ph5

.ph6

<p class="ph6 bg-light-blue">ph6</p>

ph6

.ph7

スマホの場合、レスポンシブにならないので注意が必要。

<p class="ph7 bg-light-blue">ph7</p>

.pv{n}

<div class="flex flex-wrap">
  <div class="pv0 ph2 mr1 mb1 bg-light-blue">
    pv0
  </div>
  <div class="pv1 ph2 mr1 mb1 bg-light-blue">
    pv1
  </div>
  <div class="pv2 ph2 mr1 mb1 bg-light-blue">
    pv2
  </div>
  <div class="pv3 ph2 mr1 mb1 bg-light-blue">
    pv3
  </div>
  <div class="pv4 ph2 mr1 mb1 bg-light-blue">
    pv4
  </div>
  <div class="pv5 ph2 mr1 mb1 bg-light-blue">
    pv5
  </div>
  <div class="pv6 ph2 mr1 mb1 bg-light-blue">
    pv6
  </div>
  <div class="pv7 ph2 mr1 mb1 bg-light-blue">
    pv7
  </div>
</div>
pv0
pv1
pv2
pv3
pv4
pv5
pv6
pv7

Table

.collapse

tableタグにcollapseクラスを指定すると、セルの余白(パディング)が狭くなります。

<table class="collapse">
  <tbody>
    <tr>
      <td>0001</td>
      <td>みずほ銀行</td>
    </tr>
    <tr>
      <td>0005</td>
      <td>三菱UFJ銀行</td>
    </tr>
    <tr>
      <td>0009</td>
      <td>三井住友銀行</td>
    </tr>
    <tr>
      <td>0010</td>
      <td>りそな銀行</td>
    </tr>
  </tbody>
</table>
金融機関
コード 金融機関
0001 みずほ銀行
0005 三菱UFJ銀行
0009 三井住友銀行
0010 りそな銀行

.striped--light-silver

trタグにstriped--light-silverクラスを指定すると、奇数行の色がlight-silverになります。

奇数行のtrタグだけでなく、すべてのtrタグに指定して構いません。

<table>
  <tbody>
    <tr class="striped--light-silver">
      <td>0001</td>
      <td>みずほ銀行</td>
    </tr>
    <tr class="striped--light-silver">
      <td>0005</td>
      <td>三菱UFJ銀行</td>
    </tr>
    <tr class="striped--light-silver">
      <td>0009</td>
      <td>三井住友銀行</td>
    </tr>
    <tr class="striped--light-silver">
      <td>0010</td>
      <td>りそな銀行</td>
    </tr>
  </tbody>
</table>
金融機関
コード 金融機関
0001 みずほ銀行
0005 三菱UFJ銀行
0009 三井住友銀行
0010 りそな銀行

.striped--moon-gray

<table>
  <tbody>
    <tr class="striped--moon-gray">
      <td>0001</td>
      <td>みずほ銀行</td>
    </tr>
    <tr class="striped--moon-gray">
      <td>0005</td>
      <td>三菱UFJ銀行</td>
    </tr>
    <tr class="striped--moon-gray">
      <td>0009</td>
      <td>三井住友銀行</td>
    </tr>
    <tr class="striped--moon-gray">
      <td>0010</td>
      <td>りそな銀行</td>
    </tr>
  </tbody>
</table>
金融機関
コード 金融機関
0001 みずほ銀行
0005 三菱UFJ銀行
0009 三井住友銀行
0010 りそな銀行

.striped--light-gray

<table>
  <tbody>
    <tr class="striped--light-gray">
      <td>0001</td>
      <td>みずほ銀行</td>
    </tr>
    <tr class="striped--light-gray">
      <td>0005</td>
      <td>三菱UFJ銀行</td>
    </tr>
    <tr class="striped--light-gray">
      <td>0009</td>
      <td>三井住友銀行</td>
    </tr>
    <tr class="striped--light-gray">
      <td>0010</td>
      <td>りそな銀行</td>
    </tr>
  </tbody>
</table>
金融機関
コード 金融機関
0001 みずほ銀行
0005 三菱UFJ銀行
0009 三井住友銀行
0010 りそな銀行

.striped--near-white

<table>
  <tbody>
    <tr class="striped--near-white">
      <td>0001</td>
      <td>みずほ銀行</td>
    </tr>
    <tr class="striped--near-white">
      <td>0005</td>
      <td>三菱UFJ銀行</td>
    </tr>
    <tr class="striped--near-white">
      <td>0009</td>
      <td>三井住友銀行</td>
    </tr>
    <tr class="striped--near-white">
      <td>0010</td>
      <td>りそな銀行</td>
    </tr>
  </tbody>
</table>
金融機関
コード 金融機関
0001 みずほ銀行
0005 三菱UFJ銀行
0009 三井住友銀行
0010 りそな銀行

.stripe-light

<table>
  <tbody>
    <tr class="stripe-light">
      <td>0001</td>
      <td>みずほ銀行</td>
    </tr>
    <tr class="stripe-light">
      <td>0005</td>
      <td>三菱UFJ銀行</td>
    </tr>
    <tr class="stripe-light">
      <td>0009</td>
      <td>三井住友銀行</td>
    </tr>
    <tr class="stripe-light">
      <td>0010</td>
      <td>りそな銀行</td>
    </tr>
  </tbody>
</table>
金融機関
コード 金融機関
0001 みずほ銀行
0005 三菱UFJ銀行
0009 三井住友銀行
0010 りそな銀行

.stripe-dark

trタグにstripe-darkクラスを指定すると、奇数行の色がdarkになります。

奇数行のtrタグだけでなく、すべてのtrタグに指定して構いません。

<table>
  <tbody>
    <tr class="stripe-dark">
      <td>0001</td>
      <td>みずほ銀行</td>
    </tr>
    <tr class="stripe-dark">
      <td>0005</td>
      <td>三菱UFJ銀行</td>
    </tr>
    <tr class="stripe-dark">
      <td>0009</td>
      <td>三井住友銀行</td>
    </tr>
    <tr class="stripe-dark">
      <td>0010</td>
      <td>りそな銀行</td>
    </tr>
  </tbody>
</table>
金融機関
コード 金融機関
0001 みずほ銀行
0005 三菱UFJ銀行
0009 三井住友銀行
0010 りそな銀行

.w-{n}

<div class="w-10 bg-moon-gray pa1 mt1">.w-10</div>
<div class="w-20 bg-moon-gray pa1 mt1">.w-20</div>
<div class="w-25 bg-moon-gray pa1 mt1">.w-25</div>
<div class="w-30 bg-moon-gray pa1 mt1">.w-30</div>
<div class="w-40 bg-moon-gray pa1 mt1">.w-40</div>
<div class="w-50 bg-moon-gray pa1 mt1">.w-50</div>
<div class="w-60 bg-moon-gray pa1 mt1">.w-60</div>
<div class="w-70 bg-moon-gray pa1 mt1">.w-70</div>
<div class="w-75 bg-moon-gray pa1 mt1">.w-75</div>
<div class="w-80 bg-moon-gray pa1 mt1">.w-80</div>
<div class="w-90 bg-moon-gray pa1 mt1">.w-90</div>
<div class="w-100 bg-moon-gray pa1 mt1">.w-100</div>
.w-10
.w-20
.w-25
.w-30
.w-40
.w-50
.w-60
.w-70
.w-75
.w-80
.w-90
.w-100

.w-third

<div class="w-third bg-moon-gray pa1 mt1">.w-third</div>
.w-third

.w-two-thirds

<div class="w-10 bg-moon-gray pa1 mt1">.w-two-thirds</div>
.w-two-thirds

*-ns

<div class="w-100 w-50-ns bg-light-green">Not small</div>
Not small

*-m

<div class="w-100 w-50-m bg-light-green">Medium</div>
Medium

*-l

<div class="w-100 w-50-l bg-light-green">Large</div>
Large