Tachyons
TachyonsとはユーティリティファーストのCSSフレームワークです。Tachyonsの使い方をご紹介します。このページもTachyonsを使って作られています。
概要
| 公式サイト | https://tachyons.io/ |
| 開発者 | Adam Morse & John Otander |
| ライセンス | MIT |
| グリッド | 10列 |
| GitHub stars | 10.4k |
| @tachyons_css |
| モジュール | サイズ |
|---|---|
| tachyons.min.css | 72.2KB |
TachyonsとはユーティリティファーストのCSSフレームワークです。Tachyonsの使い方をご紹介します。このページもTachyonsを使って作られています。
| 公式サイト | https://tachyons.io/ |
| 開発者 | Adam Morse & John Otander |
| ライセンス | MIT |
| グリッド | 10列 |
| GitHub stars | 10.4k |
| @tachyons_css |
| モジュール | サイズ |
|---|---|
| tachyons.min.css | 72.2KB |
.bw1
.bw2
.bw3
.bw4
.bw5
.tl
.tr
.tc.tjTachyonsのコンポーネントは、CSSのみです。
Tachyonsを使用するには、HTMLのヘッダでTachyonsのCSSをインポートします。
<!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>Tachyonsで背景色を白にするには、bg-white クラスを指定する。
<p class="white pa2">bg-white</p>bg-white
<p class="white pa2">bg-near-white</p>bg-near-white
<p class="bg-light-silver pa2">bg-light-silver</p>bg-light-silver
Tachyonsで背景色を銀にするには、bg-silver クラスを指定する。
<p class="bg-silver pa2">bg-silver</p>bg-silver
<p class="bg-light-gray pa2">bg-light-gray</p>bg-light-gray
<p class="bg-moon-gray pa2">bg-moon-gray</p>bg-moon-gray
Tachyonsで背景色を灰色にするには、bg-gray クラスを指定する。
<p class="bg-gray pa2">bg-gray</p>bg-gray
<p class="bg-mid-gray pa2">bg-mid-gray</p>bg-mid-gray
<p class="bg-dark-gray pa2">bg-bg-dark-gray</p>bg-dark-gray
<p class="bg-near-black white pa2">bg-near-black</p>bg-near-black
Tachyons CSSフレームワークで背景色を黒にするには、bg-black クラスを指定する。
<p class="bg-black white pa2">bg-black</p>bg-black
<div class="bg-orange pa2">
.bg-orange
</div>Tachyonsで背景色を金にするには、bg-gold クラスを指定する。
<div class="bg-gold pa2">
.bg-gold
</div><p class="bg-light-pink pa2">bg-light-pink</p>bg-light-pink
Tachyonsで背景色をピンクにするには、bg-pink クラスを指定する。
<p class="bg-pink pa2">bg-pink</p>bg-pink
<p class="bg-hot-pink pa2">bg-hot-pink</p>bg-hot-pink
<p class="bg-dark-pink pa2">bg-dark-pink</p>bg-dark-pink
<p class="bg-washed-red pa2">bg-washed-red</p>bg-washed-red
<p class="pa2 bg-light-red">bg-light-red</p>bg-light-red
Tachyonsで背景色を赤にするには、bg-red クラスを指定する。
<p class="pa2 bg-red">bg-red</p>.bg-red
<p class="pa2 bg-dark-red">bg-dark-red</p>bg-dark-red
Tachyons CSSフレームワークで背景色を黄色にするには、bg-yellow クラスを指定する。
<div class="bg-yellow pa2">
.bg-yellow
</div>Tachyons CSSフレームワークで背景色を明るい黄色にするには、bg-light-yellow クラスを指定する。
<div class="bg-light-yellow pa2">
.bg-light-yellow
</div>Tachyons CSSフレームワークで背景色をとても明るい黄色にするには、bg-washed-yellow クラスを指定する。
<div class="bg-washed-yellow pa2">
.bg-washed-yellow
</div>Tachyons CSSフレームワークで背景色を緑色にするには、bg-green クラスを指定する。
<div class="bg-green pa2">
.bg-green
</div>Tachyons CSSフレームワークで背景色を明るい緑色にするには、bg-light-green クラスを指定する。
<div class="bg-light-green pa2">
.bg-light-green
</div>Tachyons CSSフレームワークで背景色をとても明るい緑色にするには、bg-washed-green クラスを指定する。
<div class="bg-washed-green pa2">
.bg-washed-green
</div>Tachyons CSSフレームワークで背景色を暗い緑色にするには、bg-dark-green クラスを指定する。
<div class="bg-dark-green pa2">
.bg-dark-green
</div>Tachyonsで背景色を紫色にするには、bg-purple クラスを指定する。
<div class="bg-purple pa2">
.bg-purple
</div>Tachyonsで背景色を明るい紫色にするには、bg-light-purple クラスを指定する。
<div class="bg-light-purple pa2">
.bg-light-purple
</div>Tachyonsで背景色を青色にするには、bg-blue クラスを指定する。
<div class="bg-blue pa2">
.bg-blue
</div>Tachyonsで背景色を明るい青色にするには、bg-washed-blue クラスを指定する。
<div class="bg-washed-blue pa2">
.bg-washed-blue
</div>Tachyonsで背景色を明るい青色にするには、bg-lightest-blue クラスを指定する。
<div class="bg-lightest-blue pa2">
.bg-lightest-blue
</div>Tachyonsで背景色を明るい青色にするには、bg-light-blue クラスを指定する。
<div class="bg-light-blue pa2">
.bg-light-blue
</div>Tachyonsで背景色を明るい青色にするには、bg-dark-blue クラスを指定する。
<div class="bg-dark-blue pa2">
.bg-dark-blue
</div>Tachyonsで背景色を紺にするには、bg-navy クラスを指定する。
<div class="bg-navy white pa2">
.bg-navy
</div>Tachyonsで文字色を白にするには、white クラスを指定する。
<p class="white">.white</p>.white
<p class="near-white">.near-white</p>.near-white
Tachyons CSSフレームワークで文字色を黒色にするには、black クラスを指定する。
<p class="black">
.black
</p>.black
Tachyons CSSフレームワークで文字色を黒に近い色にするには、near-black クラスを指定する。
<p class="near-black">
.near-black
</p>.near-black
<p class="light-silver">light-silver</p>light-silver
<p class="silver">silver</p>silver
<p class="light-gray">light-gray</p>light-gray
<p class="moon-gray">moon-gray</p>moon-gray
<p class="gray">gray</p>gray
<p class="mid-gray">mid-gray</p>mid-gray
<p class="dark-gray">dark-gray</p>dark-gray
Tachyons CSSフレームワークでテキストをピンク色にするには、pink クラスを指定する。
<p class="pink">
.pink
</p>.pink
Tachyons CSSフレームワークでテキストを明るいピンク色にするには、light-pink クラスを指定する。
<p class="light-pink">
.light-pink
</p>.light-pink
Tachyons CSSフレームワークでテキストを濃いピンク色にするには、hot-pink クラスを指定する。
<p class="hot-pink">
.hot-pink
</p>.hot-pink
Tachyons CSSフレームワークでテキストを暗い濃いピンク色にするには、dark-pink クラスを指定する。
<p class="dark-pink">
.dark-pink
</p>.dark-pink
Tachyons CSSフレームワークでテキストを赤色にするには、red クラスを指定する。
<p class="red">
.red
</p>.red
Tachyons CSSフレームワークでテキストをとても明るい赤色にするには、washed-red クラスを指定する。
<p class="washed-red">
.washed-red
</p>.washed-red
Tachyons CSSフレームワークでテキストを明るい赤色にするには、light-red クラスを指定する。
<p class="light-red">
.light-red
</p>.light-red
Tachyons CSSフレームワークでテキストを暗い赤色にするには、dark-red クラスを指定する。
<p class="dark-red">
.dark-red
</p>.dark-red
<p class="gold">
.gold
</p>.gold
<p class="orange">orange</p>orange
Tachyons CSSフレームワークでテキストを黄色にするには、yellow クラスを指定する。
<p class="yellow">
.yellow
</p>.yellow
Tachyons CSSフレームワークでテキストをとても明るい黄色にするには、washed-yellow クラスを指定する。
<p class="washed-yellow">
.washed-yellow
</p>.washed-yellow
Tachyons CSSフレームワークでテキストを明るい黄色にするには、light-yellow クラスを指定する。
<p class="light-yellow">
.light-yellow
</p>.light-yellow
Tachyons CSSフレームワークでテキストを緑色にするには、green クラスを指定する。
<p class="green">
.green
</p>.green
Tachyons CSSフレームワークでテキストをとても明るい緑色にするには、washed-green クラスを指定する。
<p class="washed-green">
.washed-green
</p>.washed-green
Tachyons CSSフレームワークでテキストをとても明るい緑色にするには、light-green クラスを指定する。
<p class="light-green">
.light-green
</p>.light-green
Tachyons CSSフレームワークでテキストをとても明るい緑色にするには、dark-green クラスを指定する。
<p class="dark-green">
.dark-green
</p>.dark-green
Tachyons CSSフレームワークでテキストを青色にするには、blue クラスを指定する。
<p class="blue">
.blue
</p>.blue
Tachyons CSSフレームワークでテキストをとても明るい青色にするには、washed-blue クラスを指定する。
<p class="washed-blue">
.washed-blue
</p>.washed-blue
Tachyons CSSフレームワークでテキストをとても明るい青色にするには、lightest-blue クラスを指定する。
<p class="lightest-blue">
.lightest-blue
</p>.lightest-blue
Tachyons CSSフレームワークでテキストを明るい青色にするには、light-blue クラスを指定する。
<p class="light-blue">
.light-blue
</p>.light-blue
Tachyons CSSフレームワークでテキストを暗い青色にするには、dark-blue クラスを指定する。
<p class="dark-blue">
.dark-blue
</p>.dark-blue
<p class="navy">
.navy</p>
Tachyons CSSフレームワークでテキストを紫色にするには、purple クラスを指定する。
<p class="purple">
.purple
</p>.purple
Tachyons CSSフレームワークでテキストを明るい紫色にするには、light-purple クラスを指定する。
<p class="light-purple">
.light-purple
</p>.light-purple
<div class="ba">.ba</div><div class="bt">.bt</div>要素の右側に境界線を表示するには、Tachyons の br クラスを指定する。br クラスは CSS の border-right プロパティに相当する。
<div class="br">.br</div><div class="bb">.bb</div><div class="bl">.bl</div>Tachyonsでは境界線の太さを bw1 から bw5 までの5段階で指定できる。
<div class="ba bw1">bw1</div>Tachyonsでは境界線の太さを bw1 から bw5 までの5段階で指定できる。
<div class="ba bw2">bw2</div>Tachyonsでは境界線の太さを bw1 から bw5 までの5段階で指定できる。
<div class="ba bw3">bw3</div>Tachyonsでは境界線の太さを bw1 から bw5 までの5段階で指定できる。
<div class="ba bw5">bw5</div>Tachyonsでは境界線の太さを bw1 から bw5 までの5段階で指定できる。
<div class="ba bw5">bw5</div><div class="pa3 ba br0">
br0
</div>
<div class="pa3 ba br1">
br1
</div>
<div class="pa3 ba br2">
br2
</div>
<div class="pa3 ba br3">
br3
</div>
<div class="pa3 ba br4">
br4
</div>
<div class="pa3 ba br-100">
br-100
</div>
<div class="pa3 ba br-pill">
br-pill
</div>
<div class="ba b--dashed">b--dashed</div><div class="ba b--dotted">b--dotted</div><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>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>Message
<div class="debug-grid">
<p class="pa3">レイアウトのデバッグ用にグリッドを表示できます。</p>
</div>レイアウトのデバッグ用にグリッドを表示できます。
<div class="debug-grid-16">
<p class="pa3">レイアウトのデバッグ用にグリッドを表示できます。</p>
</div>レイアウトのデバッグ用にグリッドを表示できます。
dbクラスを指定すると、ブロックレベル要素として表示される。
| 横幅の初期値 | 親要素の横幅と同じ |
| 高さの初期値 | 内容で決まる |
| 横幅と高さの指定 | 可能 |
| ほかの要素との並び方 | 縦に並ぶ |
| 上下のmargin | 指定できる |
<span>display</span>
<span class="db">block</span>diクラスを指定すると、インライン要素として表示される。
| 横幅の初期値 | 内容で決まる |
| 高さの初期値 | 内容で決まる |
| 横幅と高さの指定 | 不可能 |
| ほかの要素との並び方 | 横に並ぶ |
| 上下のmargin | 指定できない |
<span>display</span>
<span class="di">inline</span>dibクラスを指定すると、インラインブロック要素として表示される。
| 横幅の初期値 | 内容で決まる |
| 高さの初期値 | 内容で決まる |
| 横幅と高さの指定 | 可能 |
| ほかの要素との並び方 | 横に並ぶ |
| 上下のmargin | 指定できない |
<span>display</span>
<span class="dib">inline-block</span><span>display</span>
<span class="dn">none</span><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><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><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><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><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>Make fonts <span class="i">italic</span>.Make fonts italic.
Make fonts <span class="b">bold</span>.Make fonts bold.
Tachyonsではフォントのウエィトを fw1 から fw9 までの9段階で指定できる。
<p class="fw1">fw1</p>fw1
<p class="fw2">fw2</p>fw2
<p class="fw3">fw3</p>fw3
<p class="fw4">fw4</p>fw4
<p class="fw5">fw5</p>fw5
<p class="fw6">fw6</p>fw6
<p class="fw7">fw7</p>fw7
<p class="fw8">fw8</p>fw8
<p class="fw9">fw9</p>fw9
Tachyonsではフォントのサイズを f1 から fw6 までの6段階で指定できる。
<p class="f1">Font size 1</p>Font size 1
<p class="f2">Font size 2</p>Font size 2
<p class="f3">Font size 3</p>Font size 3
<p class="f4">Font size 4</p>Font size 4
<p class="f5">Font size 5</p>Font size 5
<p class="f6">Font size 6</p>Font size 6
<form>
<label for="ir">name</label>
<input type="text" class="input-reset" id="ir">
</form>Tachyons CSSフレームワークでは、要素の高さを h1 から h5 までの5段階で指定できる。
<div class="h1 bg-light-green mt1">.h1</div>Tachyons CSSフレームワークでは、要素の高さを h1 から h5 までの5段階で指定できる。
<div class="h2 bg-light-green mt2">.h2</div>Tachyons CSSフレームワークでは、要素の高さを h1 から h5 までの5段階で指定できる。
<div class="h3 bg-light-green mt2">.h3</div>Tachyons CSSフレームワークでは、要素の高さを h1 から h5 までの5段階で指定できる。
<div class="h4 bg-light-green mt2">.h4</div>Tachyons CSSフレームワークでは、要素の高さを h1 から h5 までの5段階で指定できる。
<div class="h5 bg-light-green mt2">.h5</div><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>リンクに dim クラスを指定すると、マウスカーソルを乗せたときに色を変えることができる。
<p>
<a href="#">TOP</a>
</p>
<p>
<a class="dim" href="#">TOP</a>
</p>リスト項目先頭の記号をつけたくない場合は、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><div class="ma0 bg-light-green">ma0</div><div class="ma1 bg-light-green">ma1</div><div class="ma2 bg-light-green">ma2</div><div class="ma3 bg-light-green">ma3</div><div class="ma4 bg-light-green">ma4</div><div class="ma5 bg-light-green">ma5</div><div class="ma6 bg-light-green">ma6</div>Tachyons CSSフレームワークでは、上側のマージンを mt0 から mt7 までの8段階で指定できる。
<div class="mt0 bg-light-green">mt0</div>Tachyons CSSフレームワークでは、上側のマージンを mt0 から mt7 までの8段階で指定できる。
<div class="mt1 bg-light-green">mt1</div>Tachyons CSSフレームワークでは、上側のマージンを mt0 から mt7 までの8段階で指定できる。
<div class="mt2 bg-light-green">mt2</div>Tachyons CSSフレームワークでは、上側のマージンを mt0 から mt7 までの8段階で指定できる。
<div class="mt3 bg-light-green">mt3</div>Tachyons CSSフレームワークでは、上側のマージンを mt0 から mt7 までの8段階で指定できる。
<div class="mt4 bg-light-green">mt4</div>Tachyons CSSフレームワークでは、上側のマージンを mt0 から mt7 までの8段階で指定できる。
<div class="mt5 bg-light-green">mt5</div>Tachyons CSSフレームワークでは、上側のマージンを mt0 から mt7 までの8段階で指定できる。
<div class="mt6 bg-light-green">mt6</div>Tachyons CSSフレームワークでは、上側のマージンを mt0 から mt7 までの8段階で指定できる。
<div class="mt7 bg-light-green">mt7</div>Tachyons CSSフレームワークでは、右側のマージンを mr0 から mr7 までの8段階で指定できる。
<div class="mr0 bg-light-green">mr0</div>Tachyons CSSフレームワークでは、右側のマージンを mr0 から mr7 までの8段階で指定できる。
<div class="mr1 bg-light-green">mr1</div>Tachyons CSSフレームワークでは、右側のマージンを mr0 から mr7 までの8段階で指定できる。
<div class="mr2 bg-light-green">mr2</div>Tachyons CSSフレームワークでは、右側のマージンを mr0 から mr7 までの8段階で指定できる。
<div class="mr3 bg-light-green">mr3</div>Tachyons CSSフレームワークでは、右側のマージンを mr0 から mr7 までの8段階で指定できる。
<div class="mr4 bg-light-green">mr4</div>Tachyons CSSフレームワークでは、右側のマージンを mr0 から mr7 までの8段階で指定できる。
<div class="mr5 bg-light-green">mr5</div>Tachyons CSSフレームワークでは、右側のマージンを mr0 から mr7 までの8段階で指定できる。
<div class="mr6 bg-light-green">mr6</div>Tachyons CSSフレームワークでは、右側のマージンを mr0 から mr7 までの8段階で指定できる。
<div class="mr7 bg-light-green">mr7</div>Tachyons CSSフレームワークでは、下側のマージンを mb0 から mb7 までの8段階で指定できる。
<div class="mb0 bg-light-green">
mb0
</div>Tachyons CSSフレームワークでは、下側のマージンを mb0 から mb7 までの8段階で指定できる。
<div class="mb1 bg-light-green">
mb1
</div>Tachyons CSSフレームワークでは、下側のマージンを mb0 から mb7 までの8段階で指定できる。
<div class="mb2 bg-light-green">
mb2
</div>Tachyons CSSフレームワークでは、下側のマージンを mb0 から mb7 までの8段階で指定できる。
<div class="mb3 bg-light-green">
mb3
</div>Tachyons CSSフレームワークでは、下側のマージンを mb0 から mb7 までの8段階で指定できる。
<div class="mb4 bg-light-green">
mb4
</div>Tachyons CSSフレームワークでは、下側のマージンを mb0 から mb7 までの8段階で指定できる。
<div class="mb5 bg-light-green">
mb5
</div>Tachyons CSSフレームワークでは、下側のマージンを mb0 から mb7 までの8段階で指定できる。
<div class="mb6 bg-light-green">
mb6
</div>Tachyons CSSフレームワークでは、下側のマージンを mb0 から mb7 までの8段階で指定できる。
<div class="mb7 bg-light-green">
mb7
</div><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>Tachyons CSSフレームワークでは、左右のマージンを mh0 から mh7 までの8段階で指定できる。
<div class="mh0 bg-light-green">mh0</div>Tachyons CSSフレームワークでは、左右のマージンを mh0 から mh7 までの8段階で指定できる。
<div class="mh1 bg-light-green">mh1</div>Tachyons CSSフレームワークでは、左右のマージンを mh0 から mh7 までの8段階で指定できる。
<div class="mh2 bg-light-green">mh2</div>Tachyons CSSフレームワークでは、左右のマージンを mh0 から mh7 までの8段階で指定できる。
<div class="mh3 bg-light-green">mh3</div>Tachyons CSSフレームワークでは、左右のマージンを mh0 から mh7 までの8段階で指定できる。
<div class="mh4 bg-light-green">mh4</div>Tachyons CSSフレームワークでは、左右のマージンを mh0 から mh7 までの8段階で指定できる。
<div class="mh5 bg-light-green">mh5</div>Tachyons CSSフレームワークでは、左右のマージンを mh0 から mh7 までの8段階で指定できる。
<div class="mh6 bg-light-green">mh6</div>
<div class="mh7 bg-light-green">mh7</div>Tachyons CSSフレームワークでは、左右のマージンを mh0 から mh7 までの8段階で指定できる。
<div class="mh7 bg-light-green">mh7</div>※ mh7 はマージンが大きすぎて、スマホでは正しく表示できない。レスポンシブデザインまたはスマホ向けのサイトでは、mh7 クラスの使用を避けた方がよい。
Tachyons CSSフレームワークでは、上下のマージンを mv0 から mv7 までの8段階で指定できる。
<div class="mv0 bg-light-green">
mv0
</div>Tachyons CSSフレームワークでは、上下のマージンを mv0 から mv7 までの8段階で指定できる。
<div class="mv1 bg-light-green">
mv1
</div>Tachyons CSSフレームワークでは、上下のマージンを mv0 から mv7 までの8段階で指定できる。
<div class="mv2 bg-light-green">
mv2
</div>Tachyons CSSフレームワークでは、上下のマージンを mv0 から mv7 までの8段階で指定できる。
<div class="mv3 bg-light-green">
mv3
</div>Tachyons CSSフレームワークでは、上下のマージンを mv0 から mv7 までの8段階で指定できる。
<div class="mv4 bg-light-green">
mv4
</div>Tachyons CSSフレームワークでは、上下のマージンを mv0 から mv7 までの8段階で指定できる。
<div class="mv5 bg-light-green">
mv5
</div>Tachyons CSSフレームワークでは、上下のマージンを mv0 から mv7 までの8段階で指定できる。
<div class="mv6 bg-light-green">
mv6
</div>Tachyons CSSフレームワークでは、上下のマージンを mv0 から mv7 までの8段階で指定できる。
<div class="mv7 bg-light-green">
mv7
</div><div class="pa0 bg-light-green">Padding all 0</div><div class="pa1 bg-light-green">Padding all 1</div><div class="pa2 bg-light-green">Padding all 2</div><div class="pa3 bg-light-green">Padding all 3</div><div class="pa4 bg-light-green">Padding all 4</div><div class="pa5 bg-light-green">Padding all 5</div><div class="pa6 bg-light-green">Padding all 6</div>パディングが大きすぎてレスポンシブにならないことに注意。
<div class="pa7 bg-light-green">Padding all 7</div>Tachyons CSSフレームワークでは、上側のパディングを pt0 から pt7 までの8段階で指定できる。
<div class="pt0 bg-light-green">
pt0
</div>Tachyons CSSフレームワークでは、上側のパディングを pt0 から pt7 までの8段階で指定できる。
<div class="pt1 bg-light-green">
pt1
</div>Tachyons CSSフレームワークでは、上側のパディングを pt0 から pt7 までの8段階で指定できる。
<div class="pt2 bg-light-green">
pt2
</div>Tachyons CSSフレームワークでは、上側のパディングを pt0 から pt7 までの8段階で指定できる。
<div class="pt3 bg-light-green">
pt3
</div>Tachyons CSSフレームワークでは、上側のパディングを pt0 から pt7 までの8段階で指定できる。
<div class="pt4 bg-light-green">
pt4
</div>Tachyons CSSフレームワークでは、上側のパディングを pt0 から pt7 までの8段階で指定できる。
<div class="pt5 bg-light-green">
pt5
</div>Tachyons CSSフレームワークでは、上側のパディングを pt0 から pt7 までの8段階で指定できる。
<div class="pt6 bg-light-green">
pt6
</div>Tachyons CSSフレームワークでは、上側のパディングを pt0 から pt7 までの8段階で指定できる。
<div class="pt7 bg-light-green">
pt7
</div><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><p class="ph0 bg-light-blue">ph0</p>ph0
<p class="ph1 bg-light-blue">ph1</p>ph1
<p class="ph2 bg-light-blue">p</p>ph2
<p class="ph3 bg-light-blue">ph3</p>ph3
<p class="ph4 bg-light-blue">ph4</p>ph4
<p class="ph5 bg-light-blue">ph5</p>ph5
<p class="ph6 bg-light-blue">ph6</p>ph6
スマホの場合、レスポンシブにならないので注意が必要。
<p class="ph7 bg-light-blue">ph7</p>Tachyons CSSフレームワークでは、上下のパディングを pv0 から pv7 までの8段階で指定できる。
<div class="pv0 bg-light-green">
pv0
</div>Tachyons CSSフレームワークでは、上下のパディングを pv0 から pv7 までの8段階で指定できる。
<div class="pv1 bg-light-green">
pv1
</div>Tachyons CSSフレームワークでは、上下のパディングを pv0 から pv7 までの8段階で指定できる。
<div class="pv2 bg-light-green">
pv2
</div>Tachyons CSSフレームワークでは、上下のパディングを pv0 から pv7 までの8段階で指定できる。
<div class="pv3 bg-light-green">
pv3
</div>Tachyons CSSフレームワークでは、上下のパディングを pv0 から pv7 までの8段階で指定できる。
<div class="pv4 bg-light-green">
pv4
</div>Tachyons CSSフレームワークでは、上下のパディングを pv0 から pv7 までの8段階で指定できる。
<div class="pv5 bg-light-green">
pv5
</div>Tachyons CSSフレームワークでは、上下のパディングを pv0 から pv7 までの8段階で指定できる。
<div class="pv6 bg-light-green">
pv6
</div>Tachyons CSSフレームワークでは、上下のパディングを pv0 から pv7 までの8段階で指定できる。
<div class="pv7 bg-light-green">
pv7
</div>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 | りそな銀行 |
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 | りそな銀行 |
<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 | りそな銀行 |
<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 | りそな銀行 |
<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 | りそな銀行 |
<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 | りそな銀行 |
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 | りそな銀行 |
Tachyons でテキストを左揃えにするには、tl クラスを指定する。
<p class="tl">
Left-aligned text
</p>Left-aligned text
Tachyons でテキストを右揃えにするには、tr クラスを指定する。
<p class="tr">
Right-aligned text
</p>Right-aligned text
Tachyons でテキストを中央揃えにするには、tc クラスを指定する。
<p class="tc">
Center-aligned text
</p>Center-aligned text
Tachyons でテキストを両端揃えにするには、tj クラスを指定する。両端揃えとは英文で一般的なテキストの揃え方で、両端を揃えるために単語間の空白が自動的に調整される。そのため、単語の間隔が半角１文字分ではなくなる。
<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.
<div class="w-10 pa1 bg-light-green">.w-10</div><div class="w-20 pa1 bg-light-green">.w-20</div><div class="w-25 pa1 bg-light-green">.w-25</div><div class="w-30 pa1 bg-light-green">.w-30</div><div class="w-40 pa1 bg-light-green">.w-40</div><div class="w-50 pa1 bg-light-green">.w-50</div><div class="w-60 pa1 bg-light-green">.w-60</div><div class="w-70 pa1 bg-light-green">.w-70</div><div class="w-75 pa1 bg-light-green">.w-75</div><div class="w-80 pa1 bg-light-green">.w-80</div><div class="w-90 pa1 bg-light-green">.w-90</div><div class="w-100 pa1 bg-light-green">.w-100</div><div class="w-third bg-moon-gray pa1 mt1">.w-third</div><div class="w-10 bg-moon-gray pa1 mt1">.w-two-thirds</div><div class="w-100 w-50-ns bg-light-green">Not small</div><div class="w-100 w-50-m bg-light-green">Medium</div><div class="w-100 w-50-l bg-light-green">Large</div>