コーディングはじめてのAstro：静的サイトが楽しくなる発見
こんにちは！今回は、静的サイト生成（SSG）に強いフレームワーク「Astro（アストロ）」について書きたいと思います。実際の画面とマークアップが素直に対応する気持ちよさ、ReactなどのUIフレームワークを“必要なところだけ”使える自由さ...
コーディング
コーディング
コーディングAstroの採用を決める基準＋実装例
本ページはプロモーション（広告）が含まれています 最近、フロントエンドの選択肢は豊富すぎて、正直しんどいです。最前線で活躍しているエンジニアの方々は化け物か？と思います。「とりあえず Next.js」という空気もまだありますが、“読...
JavaScript【2025年版】JavaScriptでDOM操作の実践・書き換え・挿入・削除するコツ
本ページはプロモーション（広告）が含まれています 当記事は以前書いた記事を補填する内容になります。 こんにちは！ 今日は「JavaScriptでHTMLをいじる」話を書きたいと思います。古の時代は appen...
コーディング【学習中】Astroで“速い＆整った”サイトを作る（ダークモード／画像最適化／Biome／404／リンク最適化／E2Eテスト）
本ページはプロモーション（広告）が含まれています 当記事は前記事の続きになります。 そろそろAstroとしての開発環境の理解が進んできました。個人的にはテストが気軽に設計できるので楽ですね。それと、大規模サイトなど...
コーディングAstroのLCP最適化＋SEO仕上げ＋CardGrid実装（PowerShell付き実録）
当記事は前記事の続きになります。 当記事は前回作成した環境をベースにLCP改善につながるような最適化だったり、メタ情報の更新や構造化等の対応などがどこまでできるのか実験的に対応しています。 今日のゴール ヒ...
コーディングAstro入門：Windowsでの導入手順（pnpm/Biome/Playwright対応）【2025】
Windows＋VS CodeでAstroを1時間で導入する手順を解説。Node.js・pnpmの入れ方からBiome整形、PlaywrightのE2Eまで“つまずき”対策つきでコピペOK。
CSS【CSS】見出しやテキストの装飾でサイトを一段と魅力的に
Webサイトをデザインする際、見出しやテキストの装飾は欠かせませんよね。単なるテキストでも、CSSを使って少し工夫するだけで、サイト全体の印象が大きく変わります。今回は、初心者でも簡単にできる見出しやテキストのCSS装飾の基本を紹介します...
CSS【CSS】画像に様々なフィルター・効果をかける方法
Webデザイン、ホームページを作成する際に楽しくなるのはCSSで様々な表現をしていくことですよね。本記事では画像に対してCSSだけで付与できるフィルターの紹介です。 CSSを使用して画像にフィルターを適用することで、ウェブサイトのデ...
CSS【CSS】画像の背景に表示する影を斜線にするデザイン
CSSを使って画像の背景に影を追加する際、シンプルな影ではなく斜線のデザインを取り入れてみませんか？この記事では、CSSの基本的なコードを使って斜線の影を実装する方法を解説します。Webデザインにちょっとしたアクセントを加えたい方に最適な...
JavaScript【JavaScript】ページトップにスクロールするだけならすぐ実装できるが落とし穴もある【2025年更新】
以前公開していた記事の内容が一部というか誤解を与える内容だったため、書き直しています。以前の内容ですとJSを書いてすぐ実装可能と紹介していましたが、様々な落とし穴もあるためです。 ということで「ページトップに戻る（Back to T...