Adobe XDでMarkdown変換！プラグイン「Markdown Styler for XD」をリリースしました。

HTML/CSS
AdobeXDでMarkdown記法を書いたテキストを、自動でスタイル付きデザイン要素に変換するプラグイン「MarkdownStylerforXD」をGitHubで公開しました。A…
続きを読む

【CSS】background-clip: text でテキストにパターンや画像を適用する方法

HTML/CSS
background-clip:textとは、要素の背景をテキストの形で切り抜くCSSプロパティです。通常、背景はボックス全体に適用されますが、このプロパティを使うと背景がテキスト…
続きを読む

CSSクラス名のためのネーミング英単語・略語辞典

HTML/CSS
CSSクラス名のためのネーミング英単語・略語辞典Webサイト制作でよく使うCSSクラス名の英単語と略語をまとめています。「これ何て英語にしよう？」「この略し方であってる？」というと…
続きを読む

フォントメトリクス解析ツールを作りました - size-adjustとfont-top-offsetを自動計算

HTML/CSS
日本語フォントと英語フォントを併用するとき、同じfont-sizeなのにサイズ感が違うという経験はありませんか？また、NotoSansJPでボタンを作るとテキストが微妙に下にズレて…
続きを読む

Noto Sans JPのボタンがズレる原因と解決法

HTML/CSS
Webデザインで人気の高いNotoSansJP。可読性が高く、ウェイトも豊富で使いやすいフォントですが、ボタンにアイコンと一緒に配置するとテキストが微妙に下にズレて見えるという問題…
続きを読む

will-changeとtransform: translateZ(0)の落とし穴
- position:fixedが効かなくなる理由と対策

HTML/CSS
CSSのパフォーマンス最適化でよく使われるwill-changeやtransform:translateZ(0)。これらは確かにアニメーションを滑らかにする効果がありますが、予期し…
続きを読む

Preprosの使い方・設定ガイド
-PostCSS連携でCSS最適化を自動化する方法-

HTML/CSS
フロントエンド開発でCSSのコンパイルや最適化を効率化したいと考えている方に、PreprosとPostCSSを組み合わせた開発環境の構築方法を解説します。コマンドライン不要で、GU…
続きを読む

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

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

デフォルトCSSでは無理な：
list-style-typeの柔軟のカスタマイズ方法

HTML/CSS
Webサイトでリストを使う際、CSS標準のlist-style-typeだけでは物足りないと感じたことはありませんか？list-style-type:disc;/*●*/list-…
続きを読む

CSS：size-adjustで日本語と英語フォントのバランスを調整する
-実例で完全解説-

HTML/CSS
CSSのsize-adjustプロパティで日本語フォントと英語フォントの見た目のサイズを揃える方法を実例付きで解説。✅日本語と英語フォントでサイズ感が異なる理由✅size-adju…
続きを読む

font-feature-settingsの使い方｜palt・kern等よく使う機能を実例解説

HTML/CSS
CSSのfont-feature-settingsでOpenType機能を活用する方法を実例付きで解説。✅font-feature-settingsの基本的な使い方✅実務でよく使う…
続きを読む

Google Fontsだと字詰めが効かない理由 ~OTFとTTFの違い
-Shippori Mincho実例で徹底解説-

HTML/CSS
この記事では、OTFとTTFの違いをWebフォント視点で徹底解説。✅OTFとTTFの技術的な違い✅Webフォントで字詰め（palt）が効かない理由✅GoogleFonts版とOTF…
続きを読む

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ホームページが検索結果に表示されない原因について

HTML/CSS
ホームページが検索結果に表示されない主な原因コンテンツの量と質が不足している外部からのリンクが少なく、サイトの信頼性が低い競合サイトとの差別化大手企業や有名ブランドのサイトが同じキ…
続きを読む

「WEB制作者必見！CSS最適化とコーディング支援ツールまとめ」

HTML/CSS
はじめに:WEB制作において、CSSの最適化は重要な作業の一つです。今回は、CSSの最適化を支援するオンラインツールと、その他のコーディングに役立つツールをご紹介します。CSS最適…
続きを読む

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

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

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

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

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

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

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

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