今すぐ始めるAstro入門

全8回

AstroはWebフレームワークのひとつで、Next.jsやGatsbyのようななどと伍する機能を持ち、独自の設計思想があります。Astroによる開発の基礎を解説します。

第8回 Astroで定義した変数をCSSで使う

Astroで定義した変数は、さまざまなコンポーネントのCSSプロパティの値として使用できます。スタイリングの共通化を図る方法のひとつとして解説します。

第7回 Tailwind CSSを利用したスタイリング

今回はTailwind CSSを用いたスタイリングを紹介します。Tailwind CSSを用いると、Astroコンポーネント、UIフレームワーク関係なく共通のクラスを使用できるメリットがあります。

第6回 UIフレームワークでのスタイリング

AstroでUIフレームワークを使用した場合のスタイリングについて解説します。今回は公式ドキュメントにもある標準的な方法として、CSS Modulesの使用、外部CSSのインポートやgooberというライブラリを紹介します。

第5回 AstroファイルでのCSSの書き方

AstroファイルにおけるCSSの書き方にはいくつかの方法があります。この記事ではCSSを適用させたい箇所を、個別コンポーネントだけの場合とサイト全体の場合の2つのスコープに分けて、CSSの記述方法を解説します。

第4回 クライアントサイドでJavaScriptを動作させる

Preactで実装したハンバーガーメニューをクライアントサイドで動作するように、JavaScriptの読み込み指定を行います。このような読み込みの制御ができるのがAstroの特徴のひとつです。

第3回 UIコンポーネントの導入と実装

ユーザーによって開閉可能な、JavaScriptを必要とするインタラクティブなハンバーガーメニューをPreactで実装します。Preactの導入から、コンポーネントの実装までをやってみましょう。

第2回 Astroコンポーネントの実装

Astroでの開発の基礎として、Astroコンポーネントの実装を解説します。基本は素のHTMLとCSSのような書き味で実装を進めることができます。

第1回 Astroの特徴

AstroはWebフレームワークのひとつです。Next.jsやGatsbyなどと伍する機能をもち、独自の設計思想があります。今回はAstroの特徴の紹介と、大まかな開発手順を体験してもらうことを目的としています。