Monthly Newsletter 6月号

2025年5月は、CSSの新機能やアクセシビリティ、HTMLの実践的なテクニックに関する記事を多数公開した。各記事では、モダンなウェブ標準やベストプラクティスに基づき、実用的な知識をわかりやすく解説している。

5月公開した記事

英単語の折り返し制御に使うhyphensプロパティと、hyphenate-limit-charsでハイフネーションを許可する単語の長さや前後の最小文字数を指定する方法を解説。実用例とともに、各値の意味を丁寧に説明している。

hyphensプロパティが効かない原因として、lang属性の指定ミスや改行制御プロパティの影響を挙げ、正しい言語指定やwhite-space/overflowの設定方法を紹介している。

Astro + mdx環境でMermaid記法を利用する方法を解説。rehype-mermaidの導入や、CI環境でのPlaywrightインストール、npm scriptsによる自動化手法を紹介している。

RegExp.escape()が主要ブラウザで利用可能になったことを受け、従来のバックスラッシュによるエスケープとの違いや、意図しないマッチを防ぐための使い方を解説している。

ssh-keygenコマンドによるSSHキーの作成方法と、RSA・ED25519など主要な暗号化アルゴリズムの特徴や推奨理由をまとめている。

コンテナ要素の先頭・末尾marginを自動で削除できるmargin-trimプロパティの使い方と、従来のmargin制御との違いを解説。Safariのみサポート状況にも触れている。

overflow-block/overflow-inlineプロパティを使い、writing-modeの違いに対応した柔軟なスクロール・非表示制御を実現する方法を紹介している。

Digital Publishing WAI-ARIA Module 1.1に基づき、長文ドキュメントの目次やセクション、脚注のアクセシビリティ向上手法を具体例とともに解説している。

overflow: hiddenとclipの挙動の違い、scroll containerの生成有無やJavaScriptからの操作性の違いを整理し、適切な使い分けを提案している。

img要素のalt属性を活用し、画像読み込み失敗時にテキストを明示的に表示する方法や、CSSによるaltテキストの装飾・疑似要素活用例を紹介している。

@starting-styleやtransition-behaviorを活用し、CSSのみでdisplayの切り替えを伴うアニメーションを実現する方法を解説。従来のJavaScript制御との違いも説明している。

contrast-color()関数を使い、背景色に応じて自動的に可読性の高い文字色を選択する方法と、WCAGに基づくコントラスト比の計算方法を解説している。