スタイリングとレイアウト / Learch

Astro のスタイリングとレイアウト

はじめに

Astro では、コンポーネントにスタイルを適用することで、魅力的で使いやすいウェブサイトやアプリケーションを作成できます。このセクションでは、CSS や SCSS の使用、Tailwind CSS の統合、そしてレスポンシブデザインの実装方法について、具体例を交えて説明します。

CSS の使用

Astro コンポーネントに直接スタイルを適用する最も簡単な方法は、<style>タグを使用することです。

例: ボタンコンポーネントにスタイルを適用

Button.astroファイルを以下のように更新して、基本的なスタイリングを適用します。

---
const { label = "Click me" } = Astro.props;
---
<style>
  button {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  button:hover {
    background-color: #0056b3;
  }
</style>

<button>{label}</button>

この例では、<style>タグ内に CSS を記述して、ボタンに背景色、パディング、ボーダーラジウスなどのスタイルを適用しています。

SCSS の使用

Astro は、SCSS/SASS などの CSS プリプロセッサもサポートしています。これにより、変数、ネストルール、ミックスインなどの機能を利用して、より効率的にスタイルを管理できます。

SCSS のセットアップ

SCSS をプロジェクトにインストールします。
```
npm install -D sass
```
.scssファイルを作成し、Astro コンポーネントからインポートします。

例: SCSS ファイルのインポート

styles/button.scssファイルを作成し、以下のように記述します。

.button {
  background-color: #007bff;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: #0056b3;
  }
}

Button.astroで SCSS ファイルをインポートします。

---
import "../styles/button.scss";
const { label = "Click me" } = Astro.props;
---
<button class="button">{label}</button>

Tailwind CSS の統合

Tailwind CSS は、ユーティリティファーストの CSS フレームワークであり、Astro プロジェクトに簡単に統合できます。

Tailwind CSS のセットアップ

Tailwind CSS とその依存関係をインストールします。
```
npm install -D tailwindcss postcss autoprefixer
```
Tailwind の設定ファイルを初期化します。
```
npx tailwindcss init
```
tailwind.config.jsとpostcss.config.jsをプロジェクトの要件に合わせて設定します。

例: Tailwind CSS を使用したスタイリング

Button.astroファイルを以下のように更新して、Tailwind CSS のクラスを使用します。

---
const { label = "Click me" } = Astro.props;
---
<button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700">{label}</button>

レスポンシブデザインの実装

Astro では、メディアクエリやフレームワークのレスポンシブユーティリティクラスを使用して、異な

る画面サイズに対応したデザインを簡単に実装できます。

例: メディアクエリを使用したレスポンシブデザイン

styles/button.scssにメディアクエリを追加します。

.button {
  // ボタンのスタイル
}

@media (min-width: 768px) {
  .button {
    padding: 12px 24px; // 画面が768px以上の場合に適用
  }
}

Astroコンポーネント

Astroルーティングとページナビゲーション