発行
Webサイトやサービスを運営していくと、使っているnpmパッケージに脆弱性が発見される場合があります。Node.jsの標準的な機能であるnpm auditを使い、一括して問題を見つけ出してみましょう。
画像向けのCDN「imgix」を利用して、コマンドを叩くだけでOGP画像を生成する方法を紹介します。テキスト違い、色違いのバリエーションに柔軟に対応できます。
AstroでUIフレームワークを使用した場合のスタイリングについて解説します。今回は公式ドキュメントにもある標準的な方法として、CSS Modulesの使用、外部CSSのインポートやgooberというライブラリを紹介します。
発行
SNSにリンクをシェアすると現れる画像は、OGP画像と呼ばれ、meta要素に指定することで表示されます。第1回目はどのような画像を準備すべきか、主要SNSの仕様をもとに解説します。
幅が固定されていて全体を囲む要素があった場合、なにもしないと子要素は親要素以上の幅に広がれません。この記事では負の値のマージンを使って、親要素幅を超えて、画面幅いっぱいに広がる手法を紹介します。
アドオンパネルとアドオンについて解説します。Storybook導入時にインストールされるアドオンのほか、個別に追加インストールする方法も紹介します。
発行
静的サイトジェネレーターとコンポーネントという技術の組み合わせは、開発者にどのようなメリットやデメリットをもたらすでしょうか。
AstroファイルにおけるCSSの書き方にはいくつかの方法があります。この記事ではCSSを適用させたい箇所を、個別コンポーネントだけの場合とサイト全体の場合の2つのスコープに分けて、CSSの記述方法を解説します。
前回までの実装ではプレビューできなかった、未公開記事のプレビュー画面を作ります。404の画面で画面プレビューを表示させるという方法でこの問題を解決しましょう。
発行
使ってみてわかる静的サイトジェネレーターの便利なポイント、気になるポイント。案件ベースで使ったEleventy、Astro、Gatsby、Next.jsを比較しながら、技術者の率直な感想を話しています。
ブラウザのウィンドウの幅いっぱいに背景色を敷くことは、一見、簡単そうですが、意外と難航する場面があります。画面いっぱいに背景色を敷く方法のひとつとして全体を囲まない方法を紹介します。
光源がオブジェクトに遮られることで作られる、「影（シャドウ）」を設定します。影がつくと、3Dの表現がグッと向上します。