ファランクス by ponta

CSS : 基礎

一番最初に border-boxをする

https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
  • 上記を毎回行うよう癖を付ける

listの縦方向中央揃え

ulをnav等で囲い、items-center で縦方向に中央ぞろえする

flex items-center
  • 中央寄せをしたい要素にflexを当てる必要がある
  • tailwindで中央寄せしたいときは flex items-center justify-center はセットでガンガン使っていい

absoluteを使わない固定 : ⇒ 日付など mt-auto

日付などは親要素に relative , 子要素に absolute で位置を固定することが多い

欠点として、タイトルが長い場合は日付部分と被ってしまう

⇒ mt-auto (margin-top: auto;)を使うことで、タイトルが長くても被らずに日付部分が固定できる

mt-auto - Footer

mt-autoはfooterの配置にも使える

<body class="flex flex-col min-h-screen">
  <footer class="mt-auto">
  </footer>
</body>

親要素のど真ん中に配置したい場合

absolute top-28 left-1/2 transform -translate-x-1/2

left-1/2だと左から50%スタートなのでちょっと右にずれる

それを `transform -translate-x-1/2` で補正

要素間の幅 : space

<ul className="space-y-2">

space-y-1 = margin-top: 0.25rem; /* 4px */

<li className="pt-2">a</li>
<li className="pt-2">a</li>

このようにわざわざlistにスタイルをあてる必要がなくなる

子要素間の幅を作ってくれるので、あらゆる親要素で使える

スクロールできるようにする

（スマホ時に）テーブルなどをスクロールできるようにする

<div className="overflow-x-auto">
                    <table>

overflow-x-auto / overflow-y-auto でtableを囲う

shadcnのテーブル

これは table components 側で overflow-x-auto がテーブルそのものにあたっているから

でも消しちゃダメ

消すと途中で見切れる

テーブル : grid で見やすくしてもいい

スマホ時には２行に分けるのもあり

<TableRow className="sm:grid sm:grid-cols-5 grid grid-cols-3">

PC時に cols-5 / スマホ時にcols-3の例

良さげなカラー : bg-muted

グレーっぽい背景　ダークモードでも悪くない

hover:bg-muted

hover:bg-muted/50

崩れない画像 object-fit

object-cover
  • coverは画像が縮小せずに、アスペクト比を保ったまま要素全体を埋める
object-contain
  • containは画像全体がアスペクト比を保ったまま要素に収まる

画像のUpload

<input type="file" accept=".png, .jpeg, .jpg" />

リンクの下線 (tailwind)

  • 下線部のみ青くする
  • やや太く
className="hover:decoration-blue-500 decoration-2
← Go home