web-features のカタログデータを使用して、グリッドシステム上に図形を描画するデザインプロジェクト。| griponminds.jp
ウェブ制作に関する記事やお知らせを発信していきます。| griponminds.jp
このシリーズでは実践をとおして、ウェブパフォーマンスの測定からボトルネックの特定、さらには、その改善方法などを紹介していきます。今回は CSS セレクタを取り上げます。| griponminds.jp
web-features のカタログデータを使用して、グリッドシステム上に図形を描画するデザインプロジェクト「FEATGRAPH（フィートグラフ）」を公開しました。| griponminds.jp
続々とリリースされる新機能の使い方を理解しながら、各種ブラウザのサポート状況に配慮することは、ウェブ開発者にとって尽きることのない悩みの種です。本記事では、従来型のブラウザサポートの考え方を脱却して、Baseline から考えるブラウザサポートのアプローチによって、この課題について検討していきます。| griponminds.jp
2024 年に公開したブログ記事や、ブログ記事テンプレートの改修、公開したプロジェクトについて振り返ります。| griponminds.jp
Astro v5 で追加された主要な機能の説明と、アップグレード作業において、特に気をつける点を取り上げていきます。| grip on minds
シリーズ「アクセシビリティ通信」ではウェブアクセシビリティに関するトピックを取り上げていきます。今回は「アクセシブルな名前（Accessible Name）」を中心に説明してきます。| grip on minds
この記事では、ウェブサステナビリティの観点から、情報アーキテクチャ（IA）と、ビジュアルデザインについて考えていきます。| grip on minds
この記事では、ユーザに情報を伝達する手段である画像と動画の、ウェブサステナビリティに関する改善策を考えていきます。| grip on minds
この記事では、数学を苦手とする人間の視点から、CSS に導入された `sin()`、`cos()`、`tan()` を試しながら三角関数の基礎を学習していきます。| griponminds.jp
この記事では、インターネットにおける課題の現状認識と、ウェブサステナビリティの基本的な概念を説明したうえで、具体的に導入する方法の一例を紹介していきます。| griponminds.jp
CSS の `@property` ルールは、明示的に CSS のカスタムプロパティ（CSS 変数）の構文や継承、初期値を定義できる仕組みです。この記事では、`@property` の基本的な使い方やカスタムプロパティのアニメーション、さらに `@property` の課題について説明していきます。| griponminds.jp
CSS に指定した値がどのような処理を経て最終的な値に変換されていくのかを、コード例を用いながら説明していきます。| griponminds.jp
CSS のカスタムプロパティを一覧で確認できる Bookmarklet「custom-props-viewer」を作成しました。| griponminds.jp
スタイルの計算後の値を手軽に確認できる Bookmarklet「css-console」を作成しました。| griponminds.jp
この記事では、HTML Web Components のテクニックを使用して、画像をスキャニメーション（スリットアニメーション）のように加工するマイクロアプリを作成していきます。| griponminds.jp
徐々に混ざり合う色の美しさや変化を楽しみながら、CSS の color-mix() 関数の仕組みを理解することを目的とするウェブアプリ「KALEIDO-BOARD（カレイドボード）」を公開しました。| griponminds.jp
このシリーズでは、CSS の重要な概念であるカスケード（Cascade）の基礎を改めて学び直し、その応用としてカスケードレイヤー（`@layer`）について説明していきます。今回はカスケードレイヤーの仕組みや `revert-layer` キーワードの使い方について詳しく見ていきます。| griponminds.jp
このシリーズでは、CSS の重要な概念であるカスケード（Cascade）の基礎を改めて学び直し、その応用としてカスケードレイヤー（`@layer`）について説明していきます。今回はカスケードの仕組みを説明する基礎編です。| griponminds.jp
シリーズ「アクセシビリティ通信」ではウェブアクセシビリティに関するトピックを取り上げていきます。今回は `aria-hidden` 属性について取り上げます。| griponminds.jp
「DOM-SPEAKER（ドムスピーカー）」は、HTML や XML のファイルから要素を抜き出し、階層を視覚的に表示し、Web Speech API の音声合成（SpeechSynthesis）でタグ名を読み上げるボーカルシンセサイザーです。| griponminds.jp
この記事では、HTML Web Components のテクニックを使用して、Progressive Enhancement の思想をベースにしたイメージスライダーを作成します。| griponminds.jp
CSS の `scripting` メディア特性を使うことで、ウェブブラウザをはじめとする、ユーザエージェントの JS のサポート状況に応じて、スタイルを出し分けることができます。この記事では、この `scripting` メディア特性の基本説明に加え、実例を挙げながら利用シーンを考えていきます。| griponminds.jp
この記事では、ここ最近注目を集めている HTML Web Components とは何か。一般的な Web Components とは何が違うのか。そして、その特徴と使用方法について考えていきます。| griponminds.jp
2023 年は主要ブラウザでの CSS のサポート状況が大幅に向上し、ウェブデザインの可能性が大きく広がりました。この記事では、新たに使用できるようになった CSS の機能を踏まえたうえで、2023 年 12 月時点での個人的な CSS の書き方や方針をまとめます。| griponminds.jp
この記事では、本サイトの検索機能の実装を例に、動的インポート（Dynamic Import）により、優先度の低い JS を遅延ロードすることで INP を最適化する方法を説明します。| grip on minds
この記事では、CSS を書くときのプロパティ（宣言）の記述順の再考と、Stylelint を導入して自動的に修正を適用する方法を検討していきます。| griponminds.jp
この記事では、CSS の表現力をさらに進化させる `:has()` について、10 個のサンプルを取り上げながら、その仕組みや使い方を説明します。| griponminds.jp
本サイトのヒーローエリア（メインビジュアル）を改修しました。これまでのバージョンを振り返りながら、コンセプトや HTML、CSS の実装内容を説明します。| grip on minds
コンコンテナクエリで使用できる単位の基本的な説明に加え、リキッドレイアウト、アスペクト比の保持、Masonry ライクなレイアウトの 3 つの活用方法をとおして、その可能性を考えていきます。| griponminds.jp
ウェブサイトのパフォーマンスを効果的に改善するレスポンシブイメージについて、ビューポートベース、DPR ベース、アートディレクション、画像フォーマットベースの 4 つのパターンから、実装方法や問題点、今後期待される機能を紹介します。| grip on minds
この記事では、Astro の getImage() 関数を使用してレスポンシブイメージを実装する方法を説明します。また、そのときの問題点についても考えていきます。| grip on minds
リストに `list-style: none` を指定すると、Safari 上の VoiceOver ではリストとして認識されません。この記事では、なぜ Safari（WebKit）ではこのような実装になっているかの背景や意図を理解し、検証したうえで、本サイトでの方針を考えていきます。| grip on minds
W3C のコミュニティグループによって公開された Web Sustainability Guidelines（WSG）1.0 を説明します。| griponminds.jp
本サイトにおける Astro 2.x から 3.0 へのアップグレードにともない、変更した箇所や注意点などを記述していきます。| grip on minds
この記事では、パフォーマンス、アクセシビリティ、サステナビリティの 3 つのカテゴリに絞って、URL を入力するとページの健康状態を分析してくれるオンラインツールを紹介します。| griponminds.jp
シリーズ「アクセシビリティ通信」ではウェブアクセシビリティに関するトピックを取り上げていきます。今回は固定配置について取り上げます。| grip on minds
Starlight は、Astro 製のドキュメントサイトに特化した静的サイトジェネレータ（SSG、Static Site Generator）です。この記事では、Starlight の特徴と基本的な使い方を説明します。| grip on minds
この記事では、CSS Subgrid（サブグリッド）について、実例を取り上げながら特徴や使い方を説明します。| griponminds.jp
フィボナッチ数列の規則で配置された矩形要素が、ビートに合わせて変化するウェブアプリ「RECTBEATS（レクトビーツ）」を公開しました。| grip on minds
リサイズしたときのコンテナクエリ（@container）のスタイルを検証できる Bookmarklet「cq-resizer」を紹介します。| griponminds.jp
SVG フィルタ（feMorphology と feComposite）を使用して、縁取り文字を実装する方法を解説します。| grip on minds
アナログシンセをモチーフにした、ドット絵風の SVG イメージを生成するウェブアプリ「RECTGRAPH（レクトグラフ）」を公開しました。| grip on minds
この記事では、コンテナクエリ（@container）の例を挙げながら、実際にどのような使い方ができるのか、使用する際にどのような懸念点が考えられるかといった点について考えていきます。| griponminds.jp
このシリーズでは、Docusaurus を使用したドキュメントサイトの構築方法を、数回に渡って説明していきます。今回は「ブログ編」で、Docusaurus でのブログの機能を見ていきます。| grip on minds
このシリーズでは、Docusaurus を使用したドキュメントサイトの構築方法を、数回に渡って説明していきます。今回は「Markdown 編」で、Docusaurus での Markdown や MDX の機能を見ていきます。| grip on minds
このシリーズでは、Docusaurus を使用したドキュメントサイトの構築方法を、数回に渡って説明していきます。今回は「ドキュメント編」で、ドキュメントページの追加とサイドバーのカスタマイズを見ていきます。| grip on minds
本サイトのブログ記事の増加にともない、タグのインデックスページを追加しました。この記事では、Astro でのタグページの実装方法や、Zod を使用したバリデーションについて説明します。| grip on minds
このシリーズでは、Docusaurus を使用したドキュメントサイトの構築方法を、数回に渡って説明していきます。今回は「基本設定編」で、docusaurus.config.js の設定とスタイルの調整をおこないます。| grip on minds
このシリーズでは、Docusaurus を使用したドキュメントサイトの構築方法を、数回に渡って説明していきます。今回は「導入編」で、Docusaurus をインストールして動作確認するところまで進めます。| grip on minds
シリーズ「CSS セレクタのレシピ」では、「Selectors Level 4」まで含めた、CSS セレクタのテクニックを紹介します。今回は、`:nth-child()` や `:nth-last-child()` のように、擬似クラスに `-child` が付く「子要素インデックス」の、「Selectors Level 4」まで含めた CSS セレクタのテクニックとその仕組みを説明してきます。| grip on minds
シリーズ「アクセシビリティ通信」ではウェブアクセシビリティに関するトピックを取り上げていきます。今回はテキストリンクの指定について取り上げます。| grip on minds
スクリーンリーダーは、おもに視覚障害者が利用する、画面の内容を音声合成によって読み上げるソフトウェアです。この記事では、Windows に標準搭載されているナレーターの、ウェブサイトの検証によく使用するコマンド（キーボード操作）について説明します。| grip on minds
スクリーンリーダーは、おもに視覚障害者が利用する、画面の内容を音声合成によって読み上げるソフトウェアです。この記事では、macOS に標準搭載されている VoiceOver の、ウェブサイトの検証によく使用するコマンド（キーボード操作）について説明します。| grip on minds
ここ最近、飛躍的な進歩を続ける CSS ですが、CSS のカラー指定においても、従来より使われてきた #RRGGBB の記法から選択肢が大幅に増えました。なぜこれだけ指定方法が増えたのか、これまでの書き方を変える必要があるのか。そのような疑問について考えながら、色彩の理論もまじえつつ、CSS Color について改めて掘り下げていきます。| griponminds.jp
ウェブサイトのリニューアルを振り返るシリーズ。今回は Markdown と、その拡張言語である MDX を取り上げます。本サイトのフレームワークには Astro を使用しており、ブログコンテンツとプライバシーポリシーのコンテンツを MDX ファイルで管理しています。この記事では Markdown だけでは残る課題とその解決方法および、使用している Markdown のプラグインについて説明し...| grip on minds
ウェブサイトのグラフィック表現において SVG（Scalable Vector Graphics）は欠かせません。この記事では SVG を使用するのに適したケースやメリットおよび、SVG の実装方法のパターン、SVG コードの最適化についてまとめます。| grip on minds
ウェブサイトのリニューアルを振り返るシリーズ。今回はウェブパフォーマンスを取り上げます。Core Web Vitals などの指標を踏まえて取り組んだ施策や今後の課題について記述します。| grip on minds
ウェブサイトのリニューアルを振り返るシリーズ。今回は CSS を取り上げます。本サイトでの CSS 設計や、実用的だと感じた CSS 指定、そして今後使用していきたい CSS について書いていきます。| grip on minds
プロジェクト「MOJI-ROLL（モジロール）」に新たなスタイルを追加し、3 つのスタイルを切り替えられるようにしました。| grip on minds
新たなプロジェクト「MOJI-ROLL（モジロール）」を公開しました。カタカナ・ひらがなの各文字を CSS で円形に配置し、その形状やパターンを楽しむデザインプロジェクトです。| grip on minds
ウェブサイトのリニューアルを振り返るシリーズ。今回はウェブサイトのフレームワークである Astro を取り上げます。| grip on minds
ウェブサイトにダークモードを導入しました。モードの判定方法やスタイルの反映について。| grip on minds
リニューアルしたウェブサイトでの使用ツール・サービスや、リニューアルのポイント、今後取り組みたいことなど。| griponminds.jp
静的サイトに特化した軽量な検索ライブラリ Pagefind の導入方法やカスタマイズ方法を紹介します。| griponminds.jp