Tachyons

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
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>

.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>

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