Tachyons

Tachyons
Item Description
URL https://tachyons.io/
License MIT
Tachyons v4.10.0
Module Size
tachyons.min.css 71.7KB
  • はじめに
  • CDN

CDN

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

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

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

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

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

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>