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