Nasu Stack で最初のサイトを作る
はじめにAstro
なぜ余白から始めるのか
サイトを作り始めて最初に止まるのは、たいてい余白です。
8px と 12px のどちらが正しいかは、経験が無いと判断できません。
判断できないまま進めると、画面ごとに違う数字が入り、あとから直せなくなります。
だから最初に決まった段階を用意して、その中から選ぶようにしています。
<Stack space="lg">
<Hero />
<Columns space="md" collapseBelow="tablet">
<Card /> <Card /> <Card />
</Columns>
</Stack>段階の外にも出られます
決まった段階しか使えないと、今度は「あと 2px だけ詰めたい」で詰まります。
space="13px" のような値も書けるようにしてあります。
既定値で支え、必要なら外れられる——この 2 つは両立します。
次に読むもの
- レイアウト部品の一覧
- 非同期の状態をどう持つか
- 端末幅で崩れないための土台
記事に画像を入れるとき
相対パスで書いてください。
 ← 寸法が自動で付く
 ← 付かない。読み込みで本文がずれる
Astro は相対パスの画像だけを処理して、width と height を付けてくれます。
寸法が付けば、画像が届く前から場所が確保されるので、
読んでいる最中に文章が下へずれません。
public/ に置いて /img/… と書くと処理されず、素の <img> のまま出ます。
pnpm check はこれを検出します（画像の読み込みを止めて、
場所が取られているかを実際に測っています）。