iOSのpointer-eventsバグとイベント制御対策

JavaScript HTML/CSS
Webサイトでリンクやボタンのクリックを無効化したい場面は意外と多いものです。例えば、処理中のボタンを一時的に無効にしたり、特定条件下でリンクを機能させないようにしたりする場合です…
続きを読む

タブレットのレスポンシブ対応：ベース画面サイズの縮小版表示でレスポンシブ実装

HTML/CSS
フロントエンド開発を通じて気づいたことがあります。レスポンシブ対応で本当に開発者を苦しめるのは、初期実装の複雑性ではありません。真の敵は、運用フェーズでの保守性の悪化です。複雑なメ…
続きを読む

【JS】クリック時とホバー時にそれぞれ対応するJavaScriptアコーディオン

JavaScript HTML/CSS
Webサイトでよく使われるアコーディオン機能。今回は、クリック時とホバー時の両方に対応し、かつdetailsタグでもWordPressメニューでも使える汎用性の高いアコーディオンを…
続きを読む

CSS Layersの使い方と注意点 - 実際に使って分かった問題点

HTML/CSS
CSSLayersは2022年にすべてのモダンブラウザでサポートされた新機能で、CSSのカスケードを層（レイヤー）で管理できる画期的な仕組みです。しかし実際にプロジェクトで使ってみ…
続きを読む

タブレットのレスポンシブ対応：ベース画面サイズの縮小版表示でレスポンシブ実装

JavaScript HTML/CSS Web制作
概要本記事では、画面幅に応じて適切なレイアウトを提供する効果的な実装方法を解説します。特に以下のデバイスカテゴリごとに最適化された表示方法を実現します：小型スマートフォン（412p…
続きを読む

IllustratorでImageMap（クリッカブルマップ）のクリック領域を作成する

JavaScript HTML/CSS
今回はIllustratorを使ってクリッカブルマップを作成する方法をご紹介します。実際の制作過程で発生しやすい問題とその解決策もあわせて解説します。以前も記事にしましたが、もう少…
続きを読む

font-familyで「ヒラギノ明朝」を指定すると、Windowsでフォールバックフォントの太さが変わってしまう問題の回避策

JavaScript HTML/CSS Web制作
問題の概要Webサイトで「ヒラギノ明朝」を指定した際、Windows環境でフォールバックフォントの文字が予期せず太く表示される問題について解説します。問題が発生するケースfont-…
続きを読む

複数行もOK！2行以上のインライン要素のunderlineをアニメーションさせる方法

HTML/CSS
CSSで複数行のテキストに対してunderlineアニメーションを実装する方法を解説します。従来、複数行のインライン要素に対するアニメーション付きunderlineの実装は困難とさ…
続きを読む

クリティカルCSSを使用し、残りのCSSを非同期で読み込む

HTML/CSS
ウェブサイトの読み込み速度は、ユーザー体験とSEOの両方に大きな影響を与えます。その中でも、CSSの最適化は重要な要素の一つです。本記事では、クリティカルCSSを配置し、残りのCS…
続きを読む

HTMLメールでのリンク問題：古いOutlookでも機能する解決策

HTML/CSS Web制作
こんにちは、HTMLメール制作者の皆さん。今回は、古いバージョンのOutlookで発生したリンクの問題とその解決策について共有したいと思います。##問題の概要最近、不動産会社の物件…
続きを読む

【CSS】alphonse-capsLists.css（セレクタ[style*=""] 指定によるリストと行頭文字・行末文字）

HTML/CSS Web制作
■data-ini（initial）="囲み英数字"（擬似要素で、＜i＞にdata挿入）ini-circled（decimal）ini-circled（upper-roman）in…
続きを読む

「all: unset;」を利用したCSSスタイルリセットでメンテナンスをスムーズに

HTML/CSS Web制作
ウェブデザインにおいて、記事やコンテンツの制作は重要なタスクです。しかし、初心者の場合、既存のスタイルが予期せずコンテンツに影響を与えることがあります。この問題を解決するために、「…
続きを読む

パフォーマンスの最適化: imgタグのdecoding属性について

HTML/CSS Web制作
ユーザーエクスペリエンスの一部として、ブラウザがWebページをどのように描画し、特に大量の画像またはビデオを含むページがどのように読み込まれるかは重要です。特に、画像の読み込みとデ…
続きを読む