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 で見やすくしてもいい
スマホ時には2行に分けるのもあり
<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