Tachyons
TachyonsとはユーティリティファーストのCSSフレームワークです。Tachyonsの使い方をご紹介します。このページもTachyonsを使って作られています。
概要
| Item | Description |
|---|---|
| URL | https://tachyons.io/ |
| Developed by | Adam Morse & John Otander |
| License | MIT |
| モジュール | サイズ |
|---|---|
| tachyons.min.css | 72.2KB |
TachyonsとはユーティリティファーストのCSSフレームワークです。Tachyonsの使い方をご紹介します。このページもTachyonsを使って作られています。
| Item | Description |
|---|---|
| URL | https://tachyons.io/ |
| Developed by | Adam Morse & John Otander |
| License | MIT |
| モジュール | サイズ |
|---|---|
| tachyons.min.css | 72.2KB |
Tachyonsのコンポーネントは、CSSのみです。
Tachyonsを使用するには、HTMLのヘッダでTachyonsのCSSをインポートします。
<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><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
<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
<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
<p class="bg-black white pa2">bg-black</p>bg-black
<div class="bg-orange pa2">
.bg-orange
</div><div class="bg-gold pa2">
.bg-gold
</div><p class="bg-light-pink pa2">bg-light-pink</p>bg-light-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
<p class="pa2 bg-red">bg-red</p>.bg-red
<p class="pa2 bg-dark-red">bg-dark-red</p>bg-dark-red
<div class="bg-washed-yellow pa2">
.bg-washed-yellow
</div>
<div class="bg-light-yellow pa2">
.bg-light-yellow
</div>
<div class="bg-yellow pa2">
.bg-yellow
</div><div class="bg-washed-green pa2">
.bg-washed-green
</div>
<div class="bg-light-green pa2">
.bg-light-green
</div>
<div class="bg-green pa2">
.bg-green
</div>
<div class="bg-dark-green pa2">
.bg-dark-green
</div><div class="bg-light-purple pa2">
.bg-light-purple
</div>
<div class="bg-purple pa2">
.bg-purple
</div><div class="bg-washed-blue pa2">
.bg-washed-blue
</div>
<div class="bg-lightest-blue pa2">
.bg-lightest-blue
</div>
<div class="bg-blue pa2">
.bg-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><p class="white">.white</p>.white
<p class="near-white">.near-white</p>.near-white
<p class="black">
.black
</p>
<p class="near-black">
.near-black
</p>.black
.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
<p class="light-pink">
.light-pink
</p>
<p class="pink">
.pink
</p>
<p class="hot-pink">
.hot-pink
</p>
<p class="dark-pink">
.dark-pink
</p>.light-pink
.pink
.hot-pink
.dark-pink
<p class="washed-red">
.washed-red
</p>
<p class="light-red">
.light-red
</p>
<p class="red">
.red
</p>
<p class="dark-red">
.dark-red
</p>.washed-red
.light-red
.red
.dark-red
<p class="gold">
.gold
</p>.gold
<p class="orange">orange</p>orange
<p class="washed-yellow">
.washed-yellow
</p>
<p class="light-yellow">
.light-yellow
</p>
<p class="yellow">
.yellow
</p>.washed-yellow
.light-yellow
.yellow
<p class="washed-green">
.washed-green
</p>
<p class="light-green">
.light-green
</p>
<p class="green">
.green
</p>
<p class="dark-green">
.dark-green
</p>.washed-green
.light-green
.green
.dark-green
<p class="washed-blue">
.washed-blue
</p>
<p class="lightest-blue">
.lightest-blue
</p>
<p class="light-blue">
.light-blue
</p>
<p class="blue">
.blue
</p>
<p class="dark-blue">
.dark-blue
</p>.washed-blue
.lightest-blue
.light-blue
.blue
.dark-blue
<p class="navy">
.navy</p>
<p class="light-purple">
.light-purple
</p>
<p class="purple">
.purple
</p>.light-purple
.purple
<div class="ba">.ba</div><div class="bt">.bt</div><div class="br">.br</div><div class="bb">.bb</div><div class="bl">.bl</div><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><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.
<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
<p class="f1">f1</p>f1
<p class="f2">f2</p>f2
<p class="f3">f3</p>f3
<p class="f4">f4</p>f4
<p class="f5">f5</p>f5
<p class="f6">f6</p>f6
<form>
<label for="ir">name</label>
<input type="text" class="input-reset" id="ir">
</form><div class="h1 bg-moon-gray mt1">.h1</div>
<div class="h2 bg-moon-gray mt2">.h2</div>
<div class="h3 bg-moon-gray mt2">.h3</div>
<div class="h4 bg-moon-gray mt2">.h4</div>
<div class="h5 bg-moon-gray 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><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><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><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><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><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><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><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><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><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><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>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 | りそな銀行 |
<div class="w-10 bg-moon-gray pa1 mt1">.w-10</div>
<div class="w-20 bg-moon-gray pa1 mt1">.w-20</div>
<div class="w-25 bg-moon-gray pa1 mt1">.w-25</div>
<div class="w-30 bg-moon-gray pa1 mt1">.w-30</div>
<div class="w-40 bg-moon-gray pa1 mt1">.w-40</div>
<div class="w-50 bg-moon-gray pa1 mt1">.w-50</div>
<div class="w-60 bg-moon-gray pa1 mt1">.w-60</div>
<div class="w-70 bg-moon-gray pa1 mt1">.w-70</div>
<div class="w-75 bg-moon-gray pa1 mt1">.w-75</div>
<div class="w-80 bg-moon-gray pa1 mt1">.w-80</div>
<div class="w-90 bg-moon-gray pa1 mt1">.w-90</div>
<div class="w-100 bg-moon-gray pa1 mt1">.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>