JavaScriptに関するお知らせ

SINCE2019
>
【CSS】tailwind.cssでよく使うデザインパターン

【CSS】tailwind.cssでよく使うデザインパターン



こんにちは!最近tailwind.cssにドハマりしているMizutani(@sirycity)です。今日はtailwindで個人的によく使うデザインパターンを羅列します :)

親要素から縦横の幅を引き継ぐ

これ!

<div>
  <div class='w-full h-full'>
  僕は親要素と同じ幅と高さだよ!
  </div>
</div>

普通のcssで書くとこう。

{
  width: 100%;
  height: 100%;
}

ようはまあ、widthとheightを100%にするだけなんだけど、ほんとによく使います。

とりあえず心配ならw-full h-full。ちなみにtailwindにはwidth: inheritはありませんのでinherit派は注意。

余談(100%とinheritの違いについて)

  • 親要素のwidthが100px、子要素が50%、孫要素が100%だと孫要素の長さは50px

  • 親要素のwidthが100px、子要素が50%、孫要素がinheritだと孫要素の長さは25px

↑この例わかりやすい。自画自賛。1個上が相対指定だと挙動が変わるってことです。

インラインブロック

これも至ってシンプル。よく使う。

<div class='inline-block'>
僕はインラインブロックです。
</div>

これとおなじ。

{
  display: inline-block;
}

そういえばデフォルトでinline-blockのHTMLタグはありませんね。

個人的には全てがインラインブロックになって欲しい。ちなみにこれ↓で全部インラインブロックになる。やらないけど。

* {
  display: inline-block;
}

クリッカブルな要素

<a> とか <div onclick> とか。クリックすると何かが起こる系にはとりあえずこれ。

<a class='hover:opacity-75'>
リンク
</a>

これ書いとくだけでもUIのレベルだいぶ上がる。もっと凝るならhover:の後に色々入れると良いと思う。

コンテナの中央寄せ

ページの基になるコンテナを中央寄せする。

<main class='container mx-auto'>
この中に色々書く
</main>

こんだけ。ページ全体を覆うと良いと思います。

tailwindのコンテナは便利。ちなみに、コンテナって名前だけどページ全体を覆う1箇所だけでしか使えないなんてルールはないです。

私はわりと各所でcontainerを乱発します。

文字の上下中央寄せ

これも使うんだけど、数少ないtailwindに物申したいポイント。

一応使用例はこれ

<div class='w-10 h-10 leading-10 text-center'>
  この文字は上下中央寄せです。(w-10の部分はいくつでもいいよ)
</div>

leadingline-heightです。なんですが、leadingは310までしかありません... heightは064まであるのに...

heightとline-heightを同じ値にすると、改行なしの文字列を上下揃えにできます。text-centerの左右揃えと併せて手軽に上下左右中央寄せにできるテクニック...なんだけど、あんまり使われないみたい。個人的にはすごい使うテクニックだけどまあ元々line-heightは行間揃えだししゃーない

上下左右揃えに関してはflexの方が有名ですね。こちら

<div class='w-10 h-10 flex justify-center items-center'>
  この文字は上下中央寄せです。flexの方がちょっと表記が長い。
</div>

PCで2カラム、スマホで1カラム

これはtailwindに限ったことじゃないけど、tailwind使うとまじ簡単にできる。ご覧あれ。

<main class='flex flex-wrap'>
  <article class='w-full lg:w-1/2'>
    ここはPCだと2カラムの左側、スマホだと1カラムになります
  </article>
  <aside class='w-full lg:w-1/2'>
    ここはPCだと2カラムの右側、スマホだと1カラムになります
  </aside>
</main>

すげー簡単。これvanilla cssでやったらどんだけ大変なんだろ。ってくらい簡単。

これの最初の<main>にcontainermx-autoを付けるようなデザインパターンはよくやります。

さいごに

tailwind最高。こんなフレームワークを待ってた。tailwindだけであと3本は書きたいです。以上。



PREV
2020-04-29
ブログをNuxt.jsからHugoに移行し、さらにGatsby.jsに移行した話

NEXT
2020-05-05
【CSS】CSSフレームワーク不要派の人ほどtailwind.cssにハマる理由