ファランクス by ponta

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 等を付ける

← Go home