Tachyonsの使い方 | CSSフレームワーク入門

Tachyons
Item	Description
URL	https://tachyons.io/
License	MIT

Tachyons v4.12.0
Module	Size
tachyons.min.css	72.2KB

CDN

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

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

<head>
  <link rel="stylesheet" href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css"/>

Alert

<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

Background

.bg-{color}

<div class="flex flex-wrap">
  <div class="w5 pa3 bg-dark-red">bg-dark-red</div>
  <div class="w5 pa3 bg-red">bg-red</div>
  <div class="w5 pa3 bg-light-red">bg-light-red</div>
  <div class="w5 pa3 bg-orange">bg-orange</div>
  <div class="w5 pa3 bg-navy">bg-navy</div>
  <div class="w5 pa3 bg-dark-blue">bg-dark-blue</div>
  <div class="w5 pa3 bg-blue">bg-blue</div>
  <div class="w5 pa3 bg-light-blue">bg-light-blue</div>
  <div class="w5 pa3 bg-lightest-blue">bg-lightest-blue</div>
  <div class="w5 pa3 bg-washed-blue">bg-washed-blue</div>
</div>

bg-black

bg-near-black

bg-dark-gray

bg-mid-gray

bg-gray

bg-silver

bg-light-silver

bg-moon-gray

bg-light-gray

bg-dark-red

bg-red

bg-light-red

bg-orange

bg-gold

bg-yellow

bg-light-yellow

bg-purple

bg-light-purple

bg-dark-pink

bg-hot-pink

bg-light-pink

bg-dark-green

bg-green

bg-light-green

bg-navy

bg-dark-blue

bg-blue

bg-light-blue

bg-lightest-blue

bg-washed-blue

bg-washed-green

bg-washed-yellow

bg-washed-red

bg-near-white

bg-white

COLOR

.{color}

<div class="flex flex-wrap">
  <div class="w5 pa3 black">black</div>
  <div class="w5 pa3 near-black">near-black</div>
  <div class="w5 pa3 dark-gray">dark-gray</div>
  <div class="w5 pa3 mid-gray">mid-gray</div>
</div>

black

near-black

dark-gray

mid-gray

gray

silver

light-silver

moon-gray

light-gray

dark-red

red

light-red

orange

gold

yellow

light-yellow

purple

light-purple

dark-pink

hot-pink

light-pink

dark-green

green

light-green

navy

dark-blue

blue

light-blue

lightest-blue

washed-blue

washed-green

washed-yellow

washed-red

near-white

white

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

Debug

.debug-grid

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

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

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

.debug-grid-16

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

Font

.i

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

Make fonts italic.

.b

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

Make fonts bold.

.fw{n}

<p>
  <span class="fw1">fw1</span>
  <span class="fw2">fw2</span>
  <span class="fw3">fw3</span>
  <span class="fw4">fw4</span>
  <span class="fw5">fw5</span>
  <span class="fw6">fw6</span>
  <span class="fw7">fw7</span>
  <span class="fw8">fw8</span>
  <span class="fw9">fw9</span>
</p>.

fw1 fw2 fw3 fw4 fw5 fw6 fw7 fw8 fw9

List

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

first
second
- third

.list

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

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

first
second
- third

.pl0

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

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

first
second
- third

Margin

.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

.ml{n}

<div class="ml0 mb1 bg-light-blue">ml0</div>
<div class="ml1 mb1 bg-light-blue">ml1</div>
<div class="ml2 mb1 bg-light-blue">ml2</div>
<div class="ml3 mb1 bg-light-blue">ml3</div>
<div class="ml4 mb1 bg-light-blue">ml4</div>
<div class="ml5 mb1 bg-light-blue">ml5</div>
<div class="ml6 mb1 bg-light-blue">ml6</div>
<div class="ml7 mb1 bg-light-blue">ml7</div>

ml0

ml1

ml2

ml3

ml4

ml5

ml6

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

Padding

.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

.pl{n}

<div class="pl0 mb1 bg-light-blue">pl0</div>
<div class="pl1 mb1 bg-light-blue">pl1</div>
<div class="pl2 mb1 bg-light-blue">pl2</div>
<div class="pl3 mb1 bg-light-blue">pl3</div>
<div class="pl4 mb1 bg-light-blue">pl4</div>
<div class="pl5 mb1 bg-light-blue">pl5</div>
<div class="pl6 mb1 bg-light-blue">pl6</div>
<div class="pl7 mb1 bg-light-blue">pl7</div>

pl0

pl1

pl2

pl3

pl4

pl5

pl6

pl7

.pl{n}

<div class="ph0 mb1 bg-light-blue">ph0</div>
<div class="ph1 mb1 bg-light-blue">ph1</div>
<div class="ph2 mb1 bg-light-blue">ph2</div>
<div class="ph3 mb1 bg-light-blue">ph3</div>
<div class="ph4 mb1 bg-light-blue">ph4</div>
<div class="ph5 mb1 bg-light-blue">ph5</div>
<div class="ph6 mb1 bg-light-blue">ph6</div>
<div class="ph7 mb1 bg-light-blue">ph7</div>

ph0

ph1

ph2

ph3

ph4

ph5

ph6

ph7

.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	りそな銀行