😸

Astroチュートリアルメモその2-4,5【スタイルシート】

2022/11/02に公開

Astro

tech

Astroチュートリアルその2の4と5のメモ。

スタイルシートの設定。

独自の<style></style>タグ内にcssを書くことができる。

グローバルcssを作ることも可能。

Astroで使うCSSだと、tailwind cssを使うのが一番便利そうに見える。ただ、マークダウン部分だけはcss・scssを使うしかないのかなと。

独自タグstyle

  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
    <style>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: green;
        font-weight: bold;
      }
    </style>
  </head>

独自の<style></style>タグを使うことでcssが反映される。

チュートリアルの例ではhead内に入っていたが、body内に入れても反映されるし。GitHubに公式が上げているコードのように、htmlタグの外でも反映される。

<style>は記述したファイル内の要素にのみで有効。

CSS変数を使う

cssカスタムプロパティを使うことができる。

---
//抜粋
const skillColor = "navy";
---
//抜粋
    <style define:vars={{ skillColor }}>
      .skill {
        color: var(--skillColor);
        font-weight: bold;
      }
    </style>

frontmatter部分でconst skillColor = "navy"を定義。

その後、<style>の中でdefine:vars={{ skillColor }}とすることで、変数を呼び出すことができる。

後はカスタムプロパティと同じ書き方で使える。

グローバルcss

cssは外部ファイルとして読み込むことも可能。

srcの中にファイルを作って、importで呼び出すだけ。

チュートリアルではsrc/styles/global.cssを作り、frontmatter部分でimport "../styles/global.css";としてcssを反映している。

フォルダ名はstylesでなくても特に問題はない。

Astroチュートリアルメモその2-4,5【スタイルシート】

独自タグstyle

CSS変数を使う

グローバルcss

次の記事

Discussion