Astro からヘッドレスCMSとしてWordPressを使う(2)
前回作成したサイトをレスポンシブ対応していきます。 ニュース一覧部分 横並びを縦に並び替えています。 カード部分 横並びを縦に並び替え、画像部分をセンタリングしています。 ヘッダーナビゲーション部分 ハンバーガーメニュー […]
Astro からヘッドレスCMSとしてWordPressを使う
前回までで、Astroを使ってWebサイトを構築しましたが、ニュース部分についてはWordPressを使いたいと思いました。 WordPressにはREST APIがあらかじめ存在しますので、ちょっと試してみたくなりまし […]
Astro を学んでみる(6)
本記事は、書籍「Astro フロントエンド開発の教科書」によるAstroの勉強、6回目です。 記事内のコードは書籍のものではなく、独自に作成しています。 第5章 コンポーネントベースのWebサイト制作 5.1 コンポーネ […]
Astro を学んでみる(5)
本記事は、書籍「Astro フロントエンド開発の教科書」によるAstroの勉強、5回目です。 記事内のコードは書籍のものではなく、独自に作成しています。 第4章 ルーティングとレイアウト 4.1 ルーティングとルートパラ […]
Astro を学んでみる(4)
本記事は、書籍「Astro フロントエンド開発の教科書」によるAstroの勉強、4回目です。 記事内のコードは書籍のものではなく、独自に作成しています。 第3章 コンポーネント間連携 3.1 コンポーネントの埋め込み ま […]
Astro を学んでみる(3)
本記事は、書籍「Astro フロントエンド開発の教科書」によるAstroの勉強、3回目です。 記事内のコードは書籍のものではなく、独自に作成しています。 第2章 Astroコーディングの基本 2.1 Astroのコンポー […]
Astro を学んでみる(2)
本記事は、書籍「Astro フロントエンド開発の教科書」によるAstroの勉強、２回目（実質１回目）です。 第1章 Astroを初体験 1.1 Astroとは 1.2 Astroの環境構築 1.3 Astroプロジェクト […]
AHA Stack を試したい(9) Alpine.js編
前回に続いて、Alpine.js について試していきます。 今回のチュートリアルは少し複雑になっています。 完成形としては、入力欄に入力した文字列により下部の要素がフィルタリングされて表示される、というものです。 まずは […]
AHA Stack を試したい(8) Alpine.js編
前回のAlpine.jsのコードを元に、要素の範囲外をクリックした時にも非表示にするコードを試しました。 追加したのはpタグに 「@click.outside="expanded = false"」を追加したことです。 […]