Tachyons

Tachyons
Item Description
URL https://tachyons.io/
License MIT
Tachyons v4.10.0
Module Size
tachyons.min.css 71.7KB

Tachyonsの使い方

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

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

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

List

<ul>
  <li>Unordered list item</li>
  <li>Unordered list item</li>
  <li>Unordered list item
    <ul>
      <li>Nested unordered list item</li>
    </ul>
  </li>
</ul>

.list

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

<ul class="list">
  <li>Unordered list item</li>
  <li>Unordered list item</li>
  <li>Unordered list item
    <ul class="list">
      <li>Nested unordered list item</li>
    </ul>
  </li>
</ul>

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

<ul class="list pl0">
  <li>Unordered list item</li>
  <li>Unordered list item</li>
  <li>Unordered list item
    <ul class="list pl0">
      <li>Nested unordered list item</li>
    </ul>
  </li>
</ul>

Debug

<div class="debug-grid">

.debug-grid

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

<div class="debug-grid-16">

.debug-grid-16

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