CSS : 基礎②
module.css と tailwind を同時に
テンプレートリテラル
例:
<div className={`${styles.bgtest} space-y-9`}
background装飾
tailwindのgradiant一覧 : https://hypercolor.dev/
- 画像背景に良い => モノクロ (grayscale)
- absoluteを使った背景例
<>
<div>
<div className="-z-10 top-0 left-0 h-full w-full absolute bg-gradient-to-r from-indigo-200 via-red-200">
</div>
<AllPosts />
</div>
</>
- top0 left0 で左上スタートで、上部にぴったり収まる
- 画面全体ではなく親要素内だけに背景を設けるには親にrelative
- 慣れていないうちはrelative用に親divをつくるのが良さげ
backround画像
<>
- ** bg-[url('/')] にpublicフォルダの該当URL **
- h-full w-full を消すと画像が消える。 <Image>と同様 wとh が必要ぽい
- bg-contain が使いやすい
- z-index , opacity( 0-100 ) と組み合わせて背面に配置
className="
@layer utilities : tailwindで実現できない場合
tailwindで実現できない場合、別途CSSファイルに記述する
@tailwind base;
@tailwind components;
@tailwind utilities;
CSSファイルの中に @layer utilities を追加
例:
@layer utilities {
.clip-style {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 6vw));
}
}
- 使うときはクラス名を使う
- import "./globals.css"; を忘れず
cursor:pointer以外のカーソル
いっぱいある
画像で使える虫眼鏡もある
className="hover:scale-150 duration-200 mt-20 cursor-zoom-in
PC/スマホで別々の画像
block/hiddenだけで実現できる
<Image src="/.svg" width="140" height="24" alt="loginImg" className="hidden sm:block" />
<Image src="/.svg" width="28" height="28" alt="loginImg" className="block sm:hidden" />
tailwind-animation
結構いいのがある
例:読み込み中 = “animate-spin”
https://tailwindcss.com/docs/animation
<Image> : roudnedにならない場合
<Image
src="/topss2.png"
width={400}
height={400}
alt="dashboard app image2"
className="
- 上記の場合mt-20がpt-20だと、画像下部のみにroudedが適用される
ブログ ⇒ postレイアウト
p,
img,
ul,
ol,
li,
dl,
blockquote,
code,
pre,
table {
margin-left: 20px;
}
- 見出しと見出し内コンテンツをずらすと見やすくなる
- tailwindCSSの場合はmodule.cssを使うので、それぞれの前に .post 等を付ける