SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Astroで始める静的サイト作成入門

Webフレームワーク「Astro」を便利に使う~環境のカスタマイズとAstro 4.3までの新機能まとめ~

  • X ポスト
  • このエントリーをはてなブックマークに追加

 本連載は、Web制作者である筆者が、Astro(アストロ)というフレームワークに出会って、爆速静的サイト構築に向けて歩き出すまでの物語です。第4回では、自分に合った制作環境の構築方法と、Astroの最新機能で実際にどのようなWebコンテンツが制作できるのかをご紹介します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

Astroの制作環境を自分好みにカスタムする方法

 Webサイトのコーディング経験がある方であれば、ある程度自分の慣れた制作環境というものがあるかと思います。

 そこでこの項では、Astroの制作環境を自分の使いやすいように構築する一例をご紹介します。

Sass(SCSS)を使用する場合

 CSSプリプロセッサのSassを使用する場合は、まずターミナルでプロジェクトにSassをインストールします。

npm install sass

 .astroファイル内で、<style lang="scss">を指定することで、AstroコンポーネントにSCSS記法でCSSを記述することができます。

SCSS記法でstyleを記述する
---
---
<html lang="ja">
  (...略)
  <body>
    <h1>Welcome to Astro</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Officia odio non explicabo ab deserunt doloremque praesentium.
      nemo aliquam minima quis, animi error velit quos officiis quaerat.
      magnam minus amet esse!</p>
  </body>
</html>

<style lang="scss">
  $h1-color: #ffff00;

  @mixin my-mix-in {
    padding: 1rem;
    border: 1px solid #fff;
    font-size: 3rem;
    color: $h1-color;
  }

  body {
    padding: 1rem;
    background-color: #222;
    color: #fff;
    font-size: 1.5rem;

    h1 {
      @include my-mix-in;
    }
  }
</style>
AstroとSCSSでビルドされたHTML
AstroとSCSSでビルドされたHTML

 第3回でご説明したように、SCSS記法でもAstroコンポーネントにおけるCSSスコープ化が有効であるため、普段SCSS記法に慣れた方であれば、Astroでも手軽に導入することができます。

 また、外部のSCSSファイルを使用する場合は、CSSファイルと同様にAstroコンポーネントにインポートすることもできます。

SCSSファイルをインポートして使用する
---
import "../css/global.scss";
---
<html lang="ja">
  (...略)
  <body>
    <h1>Welcome to Astro</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Officia odio non explicabo ab deserunt doloremque praesentium.
      nemo aliquam minima quis, animi error velit quos officiis quaerat.
      magnam minus amet esse!</p>
  </body>
</html>

PostCSSを使用する場合

 Sassで使用していた変数やネストなどの便利機能の多くは、すでにネイティブのCSSでも記述できるようになっているため、最小限のプラグインでCSSをシンプルに記述するならば、PostCSSも選択肢の一つです。

 AstroにはデフォルトでPostCSSが組み込まれているため、プロジェクトにPostCSSを設定するには、プロジェクトルートにpostcss.config.cjsファイルを作成し、プラグインを個別にインポートします。

postcss.config.cjs
module.exports = {
  plugins: [
    require('postcss-preset-env'),
    require('autoprefixer'),
  ],
};

 そして、Astroコンポーネント内でPostCSSとして記述することができます。

PostCSSでstyleを記述する
---
---
<html lang="ja">
  (...略)
</html>

<style>
  :root {
    --h1-color: #ffff00;
  }
	
  body {
    padding: 1rem;
    color: #fff;
    font-size: 1.5rem;

    h1 {
      padding: 1rem;
      border: 1px solid #fff;
      font-size: 3rem;
      color: var(--h1-color);
    }
  }
</style>

 外部PostCSSファイルとして運用する場合は、@importによる複数ファイルの統合も可能です。

src/css/global.css内に複数のCSSファイルをインポートする
@import "foundation/body.css";
@import "object/button.css";
統合されたCSSファイルをインポートして使用する
---
import "../css/global.css";
---
<html lang="ja">
  (...略)
</html>

TailwindCSSを使用する場合

 汎用的なutility classを組み合わせて構築するTailwindCSSフレームワークを使用する場合は、Astroのインテグレーション機能を使って簡単に導入することができます。

 ターミナルで以下のコマンドを実行すると、TailwindCSSを有効化するためのセットアップが始まります。

npx astro add tailwind

 これだけで、必要なライブラリのインストールと、tailwind.config.mjsの初期設定が完了するので、Astroコンポーネント内ですぐにTailwindCSS記法を使用することができます。

---
---
<html lang="ja">
  (...略)
  <body class="p-4 bg-black text-white text-2xl">
    <h1 class="p-4 border border-solid border-white text-5xl text-[#ffff00]">
      Welcome to Astro</h1>
  </body>
</html>

 TailwindCSSに代表されるutility class系の記述方式は、一見すると記述量が増えて読みにくく思えますが、Astroのコンポーネント運用とはとても相性が良く、クラス名で管理・設計する必要がなく、効率的な開発を行うこともできます。

 CSSの記述方式・管理方法については人によって大きく異なる部分でもあり、作業効率に直結してくるため、既存の慣れた制作環境をAstroにどのように最適化するかを模索してみると良いかもしれません。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
機能がどんどん追加! Astro 4.3までのアップデートを振り返る

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Astroで始める静的サイト作成入門連載記事一覧

もっと読む

この記事の著者

池原健治(イケハラ ケンジ)

 ゲーム会社のUXデザイナー。デザイン、プロトタイピング、コーディングなどを担当する他、SNSでの情報発信や、登壇活動など、幅広く活動している。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/19066 2024/03/11 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング