はてなブックマーク

Pagefind は静的サイトであれば（HTML ファイルさえあれば）、基本的にどのようなサイトであっても以下の 2 ステップで導入できます。 Pagefind をインストールし、検索用ファイルを生成する Pagefind の UI を読み込み、インスタンスを作成する まず、検索用のインデックスファイルを生成します。本サイトのフレームワークは Astro を使用しているので、Astro のビルドと連携させるために npm パッケージをインストールします。 Pagefind の npm パッケージをインストールするコマンド npm install pagefind 次に、Astro のビルド後に Pagefind CLI を実行するように、npm-scripts を記述します。 package.json に記述する npm-scripts の例 { "scripts": { "build":

Astro 2.x から 3.0 へアップグレードした際に、レスポンシブイメージは対応していないため、ビルトインされている <Image /> コンポーネントの導入は見合わせることにしました。 しかし、本サイトのブログ記事において、パフォーマンスのボトルネックとなっているのは画像ファイルです。また、別のプロジェクトで Astro を使用するときにも、この課題に向き合わなければなりません。 そのため、この記事では Astro でレスポンシブイメージを実装する方法を考えていきます。 以降、Astro の getImage() 関数でレスポンシブイメージを実装する方法を解説していますが、問題点も見つかりました。特に、ホスティングサービス側でビルドする場合には注意が必要です。 本記事における Astro のバージョンは 3.1.4 を前提としています。 まず、候補として挙がるのは「Astro Im

ここ最近、飛躍的な進歩を続ける CSS ですが、CSS のカラー指定においても、従来より使われてきた #RRGGBB の記法から選択肢が大幅に増えました。 「なぜこれだけ指定方法が増えたのか」 「これまでの書き方を変える必要があるのか」 この記事では、そのような疑問について考えながら、色彩の理論もまじえつつ、CSS Color について改めて掘り下げていきます。 CSS は開発のサイクルを活発にするために、モジュール単位で仕様が策定されています。 カラーに関するモジュールは、現在 3 つのレベルが存在しており、2011 年 6 月に勧告（Recommendation）された「CSS Color Level 3」が広く普及しています。「CSS Color Level 4」と「CSS Color Level 5」は勧告には至っておりませんが、すでに主要ブラウザに実装されている機能もいくつかあり

1. Responsive Web Design（レスポンシブウェブデザイン） スクリーンサイズに応じて、コンテンツの並び替えや表示／非表示、レイアウトの変更、画像やテキストをリサイズする手法の総称で、Ethan Marcotte 氏が 2010年に A List Apart に寄稿した「Responsive Web Design」で紹介されました。 スクリーンサイズの判定は、おもに CSS3 の「Media Queries（メディアクエリ）」を用いるので、HTML がワンソースで済むのが最大の特長です。 レスポンシブ Web デザインのメリット／デメリットを以下に記述します。 メリット デバイスごとに HTML ファイルを用意しなくて済むので、開発コストが抑えられる 将来のデバイス（家電など）にも対応できる URL がひとつなので、SEO の観点からも望ましい デメリット ファイルサイズ

ウェブの本質から考える ウ ェ ブ の 本 質 か ら 考 え る Thinking from the Web's Essence grip on minds は、コーディングを専門とするフリーランスのフロントエンドエンジニアです。 ウェブ標準、アクセシビリティ、パフォーマンスに重点を置いた開発でプロジェクトをサポートします。 コーディング品質 ウェブ標準に則った HTML、CSS、JavaScript のコーディングにより、柔軟性と堅牢性を併せ持った高い品質のウェブサイトを制作します。 アクセシビリティ重視 できるだけ多くの人がウェブサイトを利用できるように、アクセシビリティの確保に最大限配慮してコーディングします。 パフォーマンス最適化 Google の検索順位アルゴリズムの一部である、CWV（Core Web Vitals）を中心に、パフォーマンス最適化に積極的に取り組みます。 SS

SVG での見え方 PNG 形式（72ppi）で書き出した画像と、SVG 形式で書き出した場合の Retina ディスプレイでの見え方の違いは次のとおりです（iOSシミュレータでの表示）。PNG 形式では、ロゴタイプやアイコンがぼやけているのが分かると思います。なお、「About」などのナビ部分はテキストなので、どちらでも鮮明に見えています。 PNG 形式（72ppi）で書き出した画像 SVG 形式で書き出した画像 手順 Illustrator で画像を作成し、SVG 形式で書き出し、CSS で指定するだけです。ただし、Internet Explorer 8 は、SVG に非対応なので、PNG 画像も同時に書き出します。 SVG サポートの判別に JavaScript ライブラリ「Modernizr」を読み込んだ後、下記のように CSS を記述しています。 #sidebar .sns >