Tailwind CSSを使って、要素の幅(width)を指定する方法について書いています。
Tailwind CSSで幅(Width)を指定するには?
Tailwind CSSで幅を指定するときには、要素にたいしてw
から始めるクラスを使用することで幅を指定できます。
w-[数値 or キーワード]
で指定することが可能です。
具体的には、次項を確認してください。
Tailwind CSSでWidthの設定値
w-
から始まるクラスに数値やキーワードを指定することで、幅を持たせることができます。
それぞれのクラスを使用することで、柔軟に要素の幅を制御することができます。
クラス | 適用されるCSS | 内容 |
---|---|---|
w-1 | width: 0.25rem |
要素に対して、0.25rem(4px)の幅を持たせる |
w-1/2 | width: 50% |
要素に対して、50%の幅を持たせる |
w-full | width: 100% |
要素に対して、100%の幅を持たせる |
w-screen | width: 100vw |
要素に対して、ビューポートの幅の100%を持たせる |
w-svw | width: 100svw |
要素に対して、スモールビューポートの幅の100%を持たせる |
w-lvw | width: 100lvw |
要素に対して、ラージビューポートの幅の100%を持たせる |
w-dvw | width: 100dvw |
要素に対して、ダイナミックビューポートの幅の100%を持たせる |
w-min | width: min-content |
要素に対して、内容の最小幅を持たせる |
w-max | width: max-content |
要素に対して、内容の最大幅を持たせる |
w-fit | width: fit-content |
要素に対して、コンテンツにフィットする幅を持たせる |
数値とサイズ
数値・キーワードに対する、px/remまたはパーセントのサイズは下記のようになります。
数値 | px | rem | パーセント |
---|---|---|---|
0 | 0px | 0rem | – |
0.5 | 2px | 0.125rem | – |
1 | 4px | 0.25rem | – |
1.5 | 6px | 0.375rem | – |
2 | 8px | 0.5rem | – |
2.5 | 10px | 0.625rem | – |
3 | 12px | 0.75rem | – |
3.5 | 14px | 0.875rem | – |
4 | 16px | 1rem | – |
5 | 20px | 1.25rem | – |
6 | 24px | 1.5rem | – |
7 | 28px | 1.75rem | – |
8 | 32px | 2rem | – |
9 | 36px | 2.25rem | – |
10 | 40px | 2.5rem | – |
11 | 44px | 2.75rem | – |
12 | 48px | 3rem | – |
14 | 56px | 3.5rem | – |
16 | 64px | 4rem | – |
20 | 80px | 5rem | – |
24 | 96px | 6rem | – |
28 | 112px | 7rem | – |
32 | 128px | 8rem | – |
36 | 144px | 9rem | – |
40 | 160px | 10rem | – |
44 | 176px | 11rem | – |
48 | 192px | 12rem | – |
52 | 208px | 13rem | – |
56 | 224px | 14rem | – |
60 | 240px | 15rem | – |
64 | 256px | 16rem | – |
72 | 288px | 18rem | – |
80 | 320px | 20rem | – |
96 | 384px | 24rem | – |
auto | – | – | auto |
1/2 | – | – | 50% |
1/3 | – | – | 33.3333% |
2/3 | – | – | 66.6667% |
1/4 | – | – | 25% |
2/4 | – | – | 50% |
3/4 | – | – | 75% |
1/5 | – | – | 20% |
2/5 | – | – | 40% |
3/5 | – | – | 60% |
4/5 | – | – | 80% |
1/6 | – | – | 16.6667% |
2/6 | – | – | 33.3333% |
3/6 | – | – | 50% |
4/6 | – | – | 66.6667% |
5/6 | – | – | 83.3333% |
1/12 | – | – | 8.3333% |
2/12 | – | – | 16.6667% |
3/12 | – | – | 25% |
4/12 | – | – | 33.3333% |
5/12 | – | – | 41.6667% |
6/12 | – | – | 50% |
7/12 | – | – | 58.3333% |
8/12 | – | – | 66.6667% |
9/12 | – | – | 75% |
10/12 | – | – | 83.3333% |
11/12 | – | – | 91.6667% |
full | – | – | 100% |
Tailwind CSSで幅(Width)を指定してみる
Tailwind CSSのWidthを使って、実際に幅が取られるか確かめてみます。
8rem(128px)の幅を指定する
w-32
のクラスで、8rem(128px)
の幅を要素に対して指定しました。
動作確認可能な全体のHTMLが下記です。(次項から省略しています)
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<script src="https://cdn.tailwindcss.com"></script>
<title>width test</title>
</head>
<body class="bg-gray-300">
<div class="bg-green-400 h-16 w-32">
8rem(128px)<br>幅を指定
</div>
</body>
</html>
bodyタグ配下のdivタグにw-32
のクラスを指定して幅を持たせました。
確認すると、下記のように表示されます。
100パーセントの幅を指定する
<div class="bg-blue-400 h-16 w-full">
100パーセント指定
</div>
divタグにw-full
のクラスを指定して100パーセントの幅を持たせました。
確認すると、下記のように表示されます。
100vwの幅を指定する
<div class="bg-orange-400 h-16 w-screen">
100vw指定
</div>
divタグにw-screen
のクラスを指定して100vwの幅を持たせました。
確認すると、下記のように表示されます。
50パーセントの幅を指定する
<div class="bg-yellow-400 h-16 w-6/12">
50パーセント指定
</div>
divタグにw-6/12
のクラスを指定して50パーセントの幅を持たせました。
6/12
で50パーセント、3/12
なら25パーセントとクラス名で分数表現されていますね。
確認すると、下記のように表示されます。
幅にautoを指定する
<div class="bg-purple-400 h-16 w-auto">
autoを指定
</div>
divタグにw-auto
のクラスを指定して、幅をautoにしました。
確認すると、下記のように表示されます。
終わりに
今回はTailwind CSSで幅(Width)をつけてみました。
用意されているクラスを使用することで、簡単に要素に対して幅を持たせることができました。
コメント