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

目次

  1. はじめに
  2. Background Color
  3. Border
  4. Card
  5. Color
  6. Debug
  7. Display
  8. Flexible Box
  9. フォント
    1. Font Size
    2. Font Style
    3. Font Weight
  10. 幅と高さ
    1. Height
    2. Width
    3. Max Width
  11. Input
  12. Link
  13. List
  14. 間隔
    1. Margin
    2. Padding
  15. Table
  16. Text Align

はじめに

以下のコードをコピーして、Tachyons を入れたいHTMLファイルの head に貼り付けてください。

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

HTML文書は次のようになります。

<!DOCTYPE html>
<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>

Background Color

Tachyons CSSフレームワークで要素に背景色を指定するには、以下に示すクラスを指定する。

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

上記のHTMLは以下のように表示される。

bg-white
bg-near-white
bg-light-silver
bg-silver
bg-light-gray
bg-moon-gray
bg-gray
bg-mid-gray
bg-dark-gray
bg-near-black
bg-black
bg-orange
bg-gold
bg-light-pink
bg-pink
bg-hot-pink
bg-dark-pink
bg-washed-red
bg-light-red
bg-red
bg-dark-red
bg-yellow
bg-light-yellow
bg-washed-yellow
bg-green
bg-light-green
bg-washed-green
bg-dark-green
bg-purple
bg-light-purple
bg-blue
bg-washed-blue
bg-lightest-blue
bg-light-blue
bg-dark-blue
bg-navy

Border

Tachyons CSSフレームワークで要素の境界線を描くには、以下に示すクラスを指定する。

Border
CLASS STYLE
ba border-style: solid;
bordr-width: 1px;
br border-right-style: solid;
border-right-width: 1px;
bb border-bottom-style: solid;
border-bottom-width: 1px;
bl border-left-style: solid;
border-left-width: 1px;
bw1 border-width: .125rem;
bw2 border-width: .25rem;
bw3 border-width: .5rem;
bw4 border-width: 1rem;
bw5 border-width: 2rem;
b--dashed border-style: dashed;
b--dotted border-style: dotted;
br0 border-radius: 0;
br1 border-radius: .125rem;
br2 border-radius: .25rem;
br3 border-radius: .5rem;
br4 border-radius: 1rem;
br-100 border-radius: 100%;
br-pill border-radius: 9999px;
b--black border-color: #000;
b--near-black border-color: #111;
b--dark-gray border-color: #333;
b--mid-gray border-color: #555;
b--gray border-color: #777;
b--silver border-color: #999;
b--light-silver border-color: #aaa;
b--light-gray border-color: #eee;
b--near-white border-color: #f4f4f4;
b--dark-red border-color: #e7040f;
b--red border-color: #ff4136;
b--orange border-color: #ff6300;
b--gold border-color: #ffb700;
b--yellow border-color: gold;
b--purple border-color: #5e2ca5;
b--hot-pink border-color: #ff41b4;
b--dark-pink border-color: #d5008f;
b--pink border-color: #ff80cc;
b--dark-green border-color: #137752;
b--green border-color: #19a974;
b--navy border-color: #001b44;
b--dark-blue border-color: #00449e;
b--blue border-color: #357edd;
b--light-blue border-color: #96ccff;
b--lightest-blue border-color: #cdecff; 
<div class="ba">ba</div>
ba
<div class="bt">bt</div>
bt
<div class="br">br</div>
br
<div class="bb">bb</div>
bb
<div class="bl pl1">bl</div>
bl
<div class="ba bw1">bw1</div>
bw1
<div class="ba bw2">bw2</div>
bw2
<div class="ba bw3">bw3</div>
bw3
<div class="ba bw5">bw5</div>
bw4
<div class="ba bw5">bw5</div>
bw5
<div class="ba b--dashed">b--dashed</div>
b--dashed
<div class="ba b--dotted">b--dotted</div>
b--dotted
<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
<div class="pa3 ba br-pill">br-pill</div>
br-pill
<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

Color

Tachyons CSSフレームワークでテキストの色を指定するには、以下に示すクラスを指定する。

<p class="white bg-black">white</p>
<p class="near-white bg-black">.near-white</p>
<p class="black">black</p>
<p class="near-black">near-black</p>
<p class="light-silver">light-silver</p>
<p class="silver">silver</p>
<p class="light-gray">light-gray</p>
<p class="moon-gray">moon-gray</p>
<p class="gray">gray</p>
<p class="mid-gray">mid-gray</p>
<p class="dark-gray">dark-gray</p>
<p class="pink">pink</p>
<p class="light-pink">light-pink</p>
<p class="hot-pink">hot-pink</p>
<p class="dark-pink">dark-pink</p>
<p class="red">red</p>
<p class="washed-red bg-black">washed-red</p>
<p class="light-red">light-red</p>
<p class="dark-red">dark-red</p>
<p class="gold">gold</p>
<p class="orange">orange</p>
<p class="yellow">yellow</p>
<p class="washed-yellow bg-black">washed-yellow</p>
<p class="light-yellow">light-yellow</p>
<p class="green">green</p>
<p class="washed-green bg-black">washed-green</p>
<p class="light-green">light-green</p>
<p class="dark-green">dark-green</p>
<p class="blue">blue</p>
<p class="washed-blue bg-black">washed-blue</p>
<p class="lightest-blue">lightest-blue</p>
<p class="light-blue">light-blue</p>
<p class="dark-blue">dark-blue</p>
<p class="navy">navy</p>
<p class="purple">purple</p>
<p class="light-purple">light-purple</p>

white

near-white

black

near-black

light-silver

silver

light-gray

moon-gray

gray

mid-gray

dark-gray

pink

light-pink

hot-pink

dark-pink

red

washed-red

light-red

dark-red

gold

orange

yellow

washed-yellow

light-yellow

green

washed-green

light-green

dark-green

blue

washed-blue

lightest-blue

light-blue

dark-blue

navy

purple

light-purple

Debug

Tachyons CSSフレームワークでは、レイアウトのデバッグ用にグリッドを表示できる。

Debug
CLASS
debug-grid
debug-grid-16 
<p class="debug-grid pa3">debug-grid</p>

debug-grid

<p class="debug-grid-16 pa3">debug-grid</p>

debug-grid

Display

Font Size
CLASS STYLE
db display: block;
di display: inline;
dib display: inline-block;
dn display: none;

要素の表示方法の違いを以下に示す。

レベル要素
ブロックレベル要素 インライン要素 インラインブロック要素
横幅の初期値 親要素の横幅と同じ 内容で決まる 内容で決まる
高さの初期値 内容で決まる 内容で決まる 内容で決まる
横幅と高さの指定 可能 不可能 可能
ほかの要素との並び方 縦に並ぶ 横に並ぶ 横に並ぶ
上下のマージン 指定できる 指定できない 指定できない 
<span class="db">foo</span>
<span class="db">bar</span>
<span class="db">bar</span>
foo bar baz 
<div class="di">foo</div>
<div class="di">bar</div>
<div class="di">baz</div>
foo
bar
baz
<div class="dib">foo</div>
<div class="dib">bar</div>
<div class="dib">baz</div>
foo
bar
baz
<span>foo</span>
<span class="dn">bar</span>
<span>baz</span>
foo bar baz

Flexible Box

Tachyons CSSフレームワークでフレックスボックスを作成するには、以下に示すクラスを指定する。

Font Size
CLASS STYLE
flex display: flex;
flex-wrap flex-wrap: wrap;
flex-wrap-reverse flex-wrap: wrap-reverse;
flex-column flex-direction: column;
flex-column-reverse flex-direction: column-reverse; 
<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
<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
<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
<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
<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 Size

Tachyons CSSフレームワークでは、フォントのサイズを f1 から f6 までの6段階で指定できる。

Font Size
CLASS STYLE
f1 font-size: 3rem;
f2 font-size: 2.25rem;
f3 font-size: 1.5rem;
f4 font-size: 1.25rem;
f5 font-size: 1rem;
f6 font-size: .875rem; 
<span class="f1">f1</span>
<span class="f2">f2</span>
<span class="f3">f3</span>
<span class="f4">f4</span>
<span class="f5">f5</span>
<span class="f6">f6</span>

f1 f2 f3 f4 f5 f6

Font Style

Tachyons CSSフレームワークでフォントのスタイルを指定するには、以下に示すクラスを使う。

Font Style
CLASS STYLE
i font-style: italic;
b font-weight: 700; 
Make fonts <span class="i">italic</span>.

Make fonts italic.

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

Make fonts bold.

Font Weight

Tachyons CSSフレームワークでは、フォントのウエィトを fw1 から fw9 までの9段階で指定できる。

Font Weight
CLASS STYLE
fw1 font-weight: 100;
fw2 font-weight: 200;
fw3 font-weight: 300;
fw4 font-weight: 400;
fw5 font-weight: 500;
fw6 font-weight: 600;
fw7 font-weight: 700;
fw8 font-weight: 800;
fw9 font-weight: 900; 
<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>

fw1 fw2 fw3 fw4 fw5 fw6 fw7 fw8 fw9

Height

Tachyons CSSフレームワークでは、要素の高さを h1 から h5 までの5段階で指定できる。

Height
CLASS STYLE
h1 height: 1rem;
h2 height: 2rem;
h3 height: 4rem;
h4 height: 8rem;
h5 height: 16rem;

HTML要素の中には、高さが指定できる要素と高さが指定できない要素がある。詳しくは CSS の height プロパティを参照のこと。

<div class="h1 bg-light-green">.h1</div>
.h1
<div class="h2 bg-light-green">.h2</div>
.h2
<div class="h3 bg-light-green">.h3</div>
.h3
<div class="h4 bg-light-green">.h4</div>
.h4
<div class="h5 bg-light-green">.h5</div>
.h5

Input

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

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

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

TOP

TOP

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

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

TOP

TOP

List

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

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

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

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

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

Margin

Tachyons CSSフレームワークでは、要素のマージンを以下に示すクラスで指定できる。

Height
CLASS STYLE
ma0 margin: 0;
ma1 margin: .25rem;
ma2 margin: .5rem;
ma3 margin: 1rem;
ma4 margin: 2rem;
ma5 margin: 4rem;
ma6 margin: 8rem;
ma7 margin: 16rem;
mt0 margin-top: 0;
mt1 margin-top: .25rem;
mt2 margin-top: .5rem;
mt3 margin-top: 1rem;
mt4 margin-top: 2rem;
mt5 margin-top: 4rem;
mt6 margin-top: 8rem;
mt7 margin-top: 16rem;
mr0 margin-right: 0;
mr1 margin-right: .25rem;
mr2 margin-right: .5rem;
mr3 margin-right: 1rem;
mr4 margin-right: 2rem;
mr5 margin-right: 4rem;
mr6 margin-right: 8rem;
mr7 margin-right: 16rem;
mb0 margin-bottom: 0;
mb1 margin-bottom: .25rem;
mb2 margin-bottom: .5rem;
mb3 margin-bottom: 1rem;
mb4 margin-bottom: 2rem;
mb5 margin-bottom: 4rem;
mb6 margin-bottom: 8rem;
mb7 margin-bottom: 16rem;
ml0 margin-left: 0;
ml1 margin-left: .25rem;
ml2 margin-left: .5rem;
ml3 margin-left: 1rem;
ml4 margin-left: 2rem;
ml5 margin-left: 4rem;
ml6 margin-left: 8rem;
ml7 margin-left: 16rem;
mh0 margin-left: 0;
margin-right: 0;
mh1 margin-left: .25rem;
margin-right: .25rem;
mh2 margin-left: .5rem;
margin-righ: .5rem;
mh3 margin-left: 1rem;
margin-right: 1rem;
mh4 margin-left: 2rem;
margin-right: 2rem;
mh5 margin-left: 4rem;
margin-right: 4rem;
mh6 margin-left: 8rem;
margin-right: 8rem;
mh7 margin-left: 16rem;
margin-right: 16rem;
mv0 margin-top: 0;
margin-bottom: 0;
mv1 margin-top: .25rem;
margin-bottom: .25rem;
mv2 margin-top: .5rem;
margin-bottom: .5rem;
mv3 margin-top: 1rem;
margin-bottom: 1rem;
mv4 margin-top: 2rem;
margin-bottom: 2rem;
mv5 margin-top: 4rem;
margin-bottom: 4rem;
mv6 margin-top: 8rem;
margin-bottom: 8rem;
mv7 margin-top: 16rem;
margin-bottom: 16rem;		 
<div class="ma0 bg-light-green">ma0</div>
ma0
<div class="ma1 bg-light-green">ma1</div>
ma1
<div class="ma2 bg-light-green">ma2</div>
ma2
<div class="ma3 bg-light-green">ma3</div>
ma3
<div class="ma4 bg-light-green">ma4</div>
ma4
<div class="ma5 bg-light-green">ma5</div>
ma5
<div class="ma6 bg-light-green">ma6</div>
ma6
<div class="ma7 bg-light-green">ma7</div>

ma7 はマージンが大きすぎて、スマホでは正しく表示できない。レスポンシブデザインまたはスマホ向けのサイトでは、ma7 クラスの使用を避けた方がよい。

mt0
<div class="mt1 bg-light-green">mt1</div>
mt1
<div class="mt2 bg-light-green">mt2</div>
mt2
<div class="mt3 bg-light-green">mt3</div>
mt3
<div class="mt4 bg-light-green">mt4</div>
mt4
<div class="mt5 bg-light-green">mt5</div>
mt5
<div class="mt6 bg-light-green">mt6</div>
mt6
<div class="mt7 bg-light-green">mt7</div>
mt7
<div class="mr0 bg-light-green">mr0</div>
mr0
<div class="mr1 bg-light-green">mr1</div>
mr1
<div class="mr2 bg-light-green">mr2</div>
mr2
<div class="mr3 bg-light-green">mr3</div>
mr3
<div class="mr4 bg-light-green">mr4</div>
mr4
<div class="mr5 bg-light-green">mr5</div>
mr5
<div class="mr6 bg-light-green">mr6</div>
mr6
<div class="mr7 bg-light-green">mr7</div>
mr7
<div class="mb0 bg-light-green">mb0</div>
mb0
<div class="mb1 bg-light-green">mb1</div>
mb1
<div class="mb2 bg-light-green">mb2</div>
mb2
<div class="mb3 bg-light-green">mb3</div>
mb3
<div class="mb4 bg-light-green">mb4</div>
mb4
<div class="mb5 bg-light-green">mb5</div>
mb5
<div class="mb6 bg-light-green">mb6</div>
mb6
<div class="mb7 bg-light-green">mb7</div>
mb7
<div class="ml0 mb1 bg-light-green">ml0</div>
ml0
<div class="ml1 mb1 bg-light-green">ml1</div>
ml1
<div class="ml2 mb1 bg-light-green">ml2</div>
ml2
<div class="ml3 mb1 bg-light-green">ml3</div>
ml3
<div class="ml4 mb1 bg-light-green">ml4</div>
ml4
<div class="ml5 mb1 bg-light-green">ml5</div>
ml5
<div class="ml6 mb1 bg-light-green">ml6</div>
ml6
<div class="ml7 mb1 bg-light-green">ml7</div>
ml7
<div class="mh0 bg-light-green">mh0</div>
mh0
<div class="mh1 bg-light-green">mh1</div>
mh1
<div class="mh2 bg-light-green">mh2</div>
mh2
<div class="mh3 bg-light-green">mh3</div>
mh3
<div class="mh4 bg-light-green">mh4</div>
mh4
<div class="mh5 bg-light-green">mh5</div>
mh5
<div class="mh6 bg-light-green">mh6</div>
mh6
<div class="mh7 bg-light-green">mh7</div>
mh7

mh7 はマージンが大きすぎて、スマホでは正しく表示できない。レスポンシブデザインまたはスマホ向けのサイトでは、mh7 クラスの使用を避けた方がよい。

<div class="mv0 bg-light-green">mv0</div>
mv0
<div class="mv1 bg-light-green">mv1</div>
mv1
<div class="mv2 bg-light-green">mv2</div>
mv2
<div class="mv3 bg-light-green">mv3</div>
mv3
<div class="mv4 bg-light-green">mv4</div>
mv4
<div class="mv5 bg-light-green">mv5</div>
mv5
<div class="mv6 bg-light-green">mv6</div>
mv6
<div class="mv7 bg-light-green">mv7</div>
mv7

Padding

Tachyons CSSフレームワークでは、要素のパディングを以下に示すクラスで指定できる。

Padding
CLASS STYLE
pa0 padding: 0;
pa1 padding: .25rem;
pa2 padding: .5rem;
pa3 padding: 1rem;
pa4 padding: 2rem;
pa5 padding: 4rem;
pa6 padding: 8rem;
pa7 padding: 16rem;
pt0 padding-top: 0;
pt1 padding-top: .25rem;
pt2 padding-top: .5rem;
pt3 padding-top: 1rem;
pt4 padding-top: 2rem;
pt5 padding-top: 4rem;
pt6 padding-top: 8rem;
pt7 padding-top: 16rem;
pr0 padding-right: 0;
pr1 padding-right: .25rem;
pr2 padding-right: .5rem;
pr3 padding-right: 1rem;
pr4 padding-right: 2rem;
pr5 padding-right: 4rem;
pr6 padding-right: 8rem;
pr7 padding-right: 16rem;
pb0 padding-bottom: 0;
pb1 padding-bottom: .25rem;
pb2 padding-bottom: .5rem;
pb3 padding-bottom: 1rem;
pb4 padding-bottom: 2rem;
pb5 padding-bottom: 4rem;
pb6 padding-bottom: 8rem;
pb7 padding-bottom: 16rem;
pl0 padding-left: 0;
pl1 padding-left: .25rem;
pl2 padding-left: .5rem;
pl3 padding-left: 1rem;
pl4 padding-left: 2rem;
pl5 padding-left: 4rem;
pl6 padding-left: 8rem;
pl7 padding-left: 16rem;
ph0 padding-left: 0;
padding-right: 0;
ph1 padding-left: .25rem;
padding-right: .25rem;
ph2 padding-left: .5rem;
padding-righ: .5rem;
ph3 padding-left: 1rem;
padding-right: 1rem;
ph4 padding-left: 2rem;
padding-right: 2rem;
ph5 padding-left: 4rem;
padding-right: 4rem;
ph6 padding-left: 8rem;
padding-right: 8rem;
ph7 padding-left: 16rem;
padding-right: 16rem;
pv0 padding-top: 0;
padding-bottom: 0;
pv1 padding-top: .25rem;
padding-bottom: .25rem;
pv2 padding-top: .5rem;
padding-bottom: .5rem;
pv3 padding-top: 1rem;
padding-bottom: 1rem;
pv4 padding-top: 2rem;
padding-bottom: 2rem;
pv5 padding-top: 4rem;
padding-bottom: 4rem;
pv6 padding-top: 8rem;
padding-bottom: 8rem;
pv7 padding-top: 16rem;
padding-bottom: 16rem;		 
<div class="pa0 bg-light-green">pa0</div>
pa0
<div class="pa1 bg-light-green">pa1</div>
pa1
<div class="pa2 bg-light-green">pa2</div>
pa2
<div class="pa3 bg-light-green">pa3</div>
pa3
<div class="pa4 bg-light-green">pa4</div>
pa4
<div class="pa5 bg-light-green">pa5</div>
pa5
<div class="pa6 bg-light-green">pa6</div>
pa6
<div class="pa7 bg-light-green">pa7</div>

pa7 はパディングが大きすぎて、スマホでは正しく表示できない。レスポンシブデザインまたはスマホ向けのサイトでは、pa7 クラスの使用を避けた方がよい。

<div class="pt0 bg-light-green">pt0</div>
pt0
<div class="pt1 bg-light-green">pt1</div>
pt1
<div class="pt2 bg-light-green">pt2</div>
pt2
<div class="pt3 bg-light-green">pt3</div>
pt3
<div class="pt4 bg-light-green">pt4</div>
pt4
<div class="pt5 bg-light-green">pt5</div>
pt5
<div class="pt6 bg-light-green">pt6</div>
pt6
<div class="pt7 bg-light-green">pt7</div>
pt7
<div class="pr0 tr bg-light-green">pr0</div>
pr0
<div class="pr1 tr bg-light-green">pr1</div>
pr1
<div class="pr2 tr bg-light-green">pr2</div>
pr2
<div class="pr3 tr bg-light-green">pr3</div>
pr3
<div class="pr4 tr bg-light-green">pr4</div>
pr4
<div class="pr5 tr bg-light-green">pr5</div>
pr5
<div class="pr6 tr bg-light-green">pr6</div>
pr6
<div class="pr7 tr bg-light-green">pr7</div>
pr7
<div class="pb0 mb1 bg-light-green">pb0</div>
pb0
<div class="pb1 mb1 bg-light-green">pb1</div>
pb1
<div class="pb2 mb1 bg-light-green">pb2</div>
pb2
<div class="pb3 mb1 bg-light-green">pb3</div>
pb3
<div class="pb4 mb1 bg-light-green">pb4</div>
pb4
<div class="pb5 mb1 bg-light-green">pb5</div>
pb5
<div class="pb6 mb1 bg-light-green">pb6</div>
pb6
<div class="pb7 mb1 bg-light-green">pb7</div>
pb7
<div class="pl0 mb1 bg-light-green">pl0</div>
pl0
<div class="pl1 mb1 bg-light-green">pl1</div>
pl1
<div class="pl2 mb1 bg-light-green">pl2</div>
pl2
<div class="pl3 mb1 bg-light-green">pl3</div>
pl3
<div class="pl4 mb1 bg-light-green">pl4</div>
pl4
<div class="pl5 mb1 bg-light-green">pl5</div>
pl5
<div class="pl6 mb1 bg-light-green">pl6</div>
pl6
<div class="pl7 mb1 bg-light-green">pl7</div>
pl7
<p class="ph0 bg-light-green">ph0</p>

ph0

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

ph1

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

ph2

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

ph3

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

ph4

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

ph5

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

ph6

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

ph7 はパディングが大きすぎて、スマホでは正しく表示できない。レスポンシブデザインまたはスマホ向けのサイトでは、ph7 クラスの使用を避けた方がよい。

<div class="pv0 bg-light-green">  pv0</div>
pv0
<div class="pv1 bg-light-green">pv1</div>
pv1
<div class="pv2 bg-light-green">pv2</div>
pv2
<div class="pv3 bg-light-green">pv3</div>
pv3
<div class="pv4 bg-light-green">pv4</div>
pv4
<div class="pv5 bg-light-green">pv5</div>
pv5
<div class="pv6 bg-light-green">pv6</div>
pv6
<div class="pv7 bg-light-green">pv7</div>
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 りそな銀行

Text Align

Tachyonsでテキストを揃えるには、以下に示すクラスを指定する。

Text Align
CLASS STYLE
tl text-align: left;
tr text-align: right;
tc text-align: center;
tj text-align: justify; 
<p class="tl">
  He was an old man who fished alone in a skiff in the Gulf Stream and he had gone eighty-four
  days now without taking a fish. In the first forty days a boy had been with him. But after
  forty days without a fish the boy's parents had told him that the old man was now definitely
  and finally <i>salao</i>, which is the worst form of unlucky, and the boy had gone
  at their orders in another boat which caught three good fish the first week.
</p>

He was an old man who fished alone in a skiff in the Gulf Stream and he had gone eighty-four days now without taking a fish. In the first forty days a boy had been with him. But after forty days without a fish the boy's parents had told him that the old man was now definitely and finally salao, which is the worst form of unlucky, and the boy had gone at their orders in another boat which caught three good fish the first week. 

<p class="tr">The quick brown fox jumps over the lazy dog.</p>

The quick brown fox jumps over the lazy dog.

<p class="tc">The quick brown fox jumps over the lazy dog.</p>

The quick brown fox jumps over the lazy dog.

<p class="tj">
  He was an old man who fished alone in a skiff in the Gulf Stream and he had gone eighty-four
  days now without taking a fish. In the first forty days a boy had been with him. But after
  forty days without a fish the boy's parents had told him that the old man was now definitely
  and finally <i>salao</i>, which is the worst form of unlucky, and the boy had gone
  at their orders in another boat which caught three good fish the first week.
</p>

He was an old man who fished alone in a skiff in the Gulf Stream and he had gone eighty-four days now without taking a fish. In the first forty days a boy had been with him. But after forty days without a fish the boy's parents had told him that the old man was now definitely and finally salao, which is the worst form of unlucky, and the boy had gone at their orders in another boat which caught three good fish the first week.

Max Width

Tachyons で要素の最大幅を指定するには、以下に示すクラスを指定する。

Max Width
CLASS STYLE MEDIA
mw1 max-width: 1rem; @media screen
mw2 max-width: 2rem; @media screen
mw3 max-width: 4rem; @media screen
mw4 max-width: 8rem; @media screen
mw5 max-width: 16rem; @media screen
mw6 max-width: 32rem; @media screen
mw7 max-width: 48rem; @media screen
mw8 max-width: 64rem; @media screen
mw9 max-width: 96rem; @media screen
mw-100 max-width: 100%; @media screen
mw1-ns max-width: 1rem; @media screen and (min-width: 30em)
mw2-ns max-width: 2rem; @media screen and (min-width: 30em)
mw3-ns max-width: 4rem; @media screen and (min-width: 30em)
mw4-ns max-width: 8rem; @media screen and (min-width: 30em)
mw5-ns max-width: 16rem; @media screen and (min-width: 30em)
mw6-ns max-width: 32rem; @media screen and (min-width: 30em)
mw7-ns max-width: 48rem; @media screen and (min-width: 30em)
mw8-ns max-width: 64rem; @media screen and (min-width: 30em)
mw9-ns max-width: 96rem; @media screen and (min-width: 30em)
mw-100-ns max-width: 100%; @media screen and (min-width: 30em)
mw1-m max-width: 1rem; @media screen and (min-width: 30em) and (max-width:60em)
mw2-m max-width: 2rem; @media screen and (min-width: 30em) and (max-width:60em)
mw3-m max-width: 4rem; @media screen and (min-width: 30em) and (max-width:60em)
mw4-m max-width: 8rem; @media screen and (min-width: 30em) and (max-width:60em)
mw5-m max-width: 16rem; @media screen and (min-width: 30em) and (max-width:60em)
mw6-m max-width: 32rem; @media screen and (min-width: 30em) and (max-width:60em)
mw7-m max-width: 48rem; @media screen and (min-width: 30em) and (max-width:60em)
mw8-m max-width: 64rem; @media screen and (min-width: 30em) and (max-width:60em)
mw9-m max-width: 96rem; @media screen and (min-width: 30em) and (max-width:60em)
mw-100-m max-width: 100%; @media screen and (min-width: 30em) and (max-width:60em)
mw1-l max-width: 1rem; @media screen and (min-width: 60em)
mw2-l max-width: 2rem; @media screen and (min-width: 60em)
mw3-l max-width: 4rem; @media screen and (min-width: 60em)
mw4-l max-width: 8rem; @media screen and (min-width: 60em)
mw5-l max-width: 16rem; @media screen and (min-width: 60em)
mw6-l max-width: 32rem; @media screen and (min-width: 60em)
mw7-l max-width: 48rem; @media screen and (min-width: 60em)
mw8-m max-width: 64rem; @media screen and (min-width: 60em)
mw9-l max-width: 96rem; @media screen and (min-width: 60em)
mw-100-l max-width: 100%; @media screen and (min-width: 60em) 
<div class="mw1 center bg-light-green">mw1</div>
mw1
<div class="mw2 center bg-light-green">mw2</div>
mw2
<div class="mw3 center bg-light-green">mw3</div>
mw3
<div class="mw4 center bg-light-green">mw4</div>
mw4
<div class="mw5 center bg-light-green">mw5</div>
mw5
<div class="mw6 center bg-light-green">mw6</div>
mw6
<div class="mw7 center bg-light-green">mw7</div>
mw7
<div class="mw8 center bg-light-green">mw8</div>
mw8
<div class="mw9 center bg-light-green">mw9</div>
mw9
<div class="mw-100 center bg-light-green">mw-100</div>
mw-100

Width

Tachyons CSSフレームワークで要素の最大幅を指定するには、以下に示すクラスを指定する。

Width
CLASS STYLE MEDIA
w-10 width: 10%; @media screen
w-20 width: 20%; @media screen
w-25 width: 25%; @media screen
w-30 width: 30%; @media screen
w-40 width: 40%; @media screen
w-50 width: 50%; @media screen
w-60 width: 60%; @media screen
w-70 width: 70%; @media screen
w-75 width: 75%; @media screen
w-80 width: 80%; @media screen
w-90 width: 90%; @media screen
w-100 width: 100%; @media screen
w-third width: 33.33333%; @media screen
w-two-thirds width: 66.66667%; @media screen
w-10-ns width: 10%; @media screen and (min-width: 30em)
w-20-ns width: 20%; @media screen and (min-width: 30em)
w-25-ns width: 25%; @media screen and (min-width: 30em)
w-30-ns width: 30%; @media screen and (min-width: 30em)
w-40-ns width: 40%; @media screen and (min-width: 30em)
w-50-ns width: 50%; @media screen and (min-width: 30em)
w-60-ns width: 60%; @media screen and (min-width: 30em)
w-70-ns width: 70%; @media screen and (min-width: 30em)
w-75-ns width: 75%; @media screen and (min-width: 30em)
w-80-ns width: 80%; @media screen and (min-width: 30em)
w-90-ns width: 90%; @media screen and (min-width: 30em)
w-100-ns width: 100%; @media screen and (min-width: 30em)
w-third-ns width: 33.33333%; @media screen and (min-width: 30em)
w-two-thirds-ns width: 66.66667%; @media screen and (min-width: 30em)
w-10-m width: 10%; @media screen and (min-width: 30em) and (max-width:60em)
w-20-m width: 20%; @media screen and (min-width: 30em) and (max-width:60em)
w-25-m width: 25%; @media screen and (min-width: 30em) and (max-width:60em)
w-30-m width: 30%; @media screen and (min-width: 30em) and (max-width:60em)
w-40-m width: 40%; @media screen and (min-width: 30em) and (max-width:60em)
w-50-m width: 50%; @media screen and (min-width: 30em) and (max-width:60em)
w-60-m width: 60%; @media screen and (min-width: 30em) and (max-width:60em)
w-70-m width: 70%; @media screen and (min-width: 30em) and (max-width:60em)
w-75-m width: 75%; @media screen and (min-width: 30em) and (max-width:60em)
w-80-m width: 80%; @media screen and (min-width: 30em) and (max-width:60em)
w-90-m width: 90%; @media screen and (min-width: 30em) and (max-width:60em)
w-100-m width: 100%; @media screen and (min-width: 30em) and (max-width:60em)
w-third-m width: 33.33333%; @media screen and (min-width: 30em) and (max-width:60em)
w-two-thirds-m width: 66.66667%; @media screen and (min-width: 30em) and (max-width:60em)
w-10-l width: 10%; @media screen and (min-width: 60em)
w-20-l width: 20%; @media screen and (min-width: 60em)
w-25-l width: 25%; @media screen and (min-width: 60em)
w-30-l width: 30%; @media screen and (min-width: 60em)
w-40-l width: 40%; @media screen and (min-width: 60em)
w-50-l width: 50%; @media screen and (min-width: 60em)
w-60-l width: 60%; @media screen and (min-width: 60em)
w-70-l width: 70%; @media screen and (min-width: 60em)
w-75-l width: 75%; @media screen and (min-width: 60em)
w-80-l width: 80%; @media screen and (min-width: 60em)
w-90-l width: 90%; @media screen and (min-width: 60em)
w-100-l width: 100%; @media screen and (min-width: 60em)
w-third-l width: 33.33333%; @media screen and (min-width: 60em)
w-two-thirds-l width: 66.66667%; @media screen and (min-width: 60em) 
<div class="w-10 bg-light-green">w-10</div>
w-10
<div class="w-20 bg-light-green">w-20</div>
w-20
<div class="w-25 bg-light-green">w-25</div>
w-25
<div class="w-30 bg-light-green">w-30</div>
w-30
<div class="w-40 bg-light-green">w-40</div>
w-40
<div class="w-50 bg-light-green">w-50</div>
w-50
<div class="w-60 bg-light-green">w-60</div>
w-60
<div class="w-70 bg-light-green">w-70</div>
w-70
<div class="w-75 bg-light-green">w-75</div>
w-75
<div class="w-80 bg-light-green">w-80</div>
w-80
<div class="w-90 bg-light-green">w-90</div>
w-90
<div class="w-100 bg-light-green">w-100</div>
w-100
<div class="w-third bg-light-green">w-third</div>
w-third
<div class="w-10 bg-light-green">w-two-thirds</div>
w-two-thirds
<div class="w-100 w-50-ns bg-light-green">w-50-ns</div>
w-50-ns
<div class="w-100 w-50-m bg-light-green">w-50-m</div>
w-50-m
<div class="w-100 w-50-l bg-light-green">w-50-l</div>
w-50-l