フルーロンとは？活字装飾の歴史とCSSでの使い方｜コピペで使える区切り線つき

PDF・文書編集
文章の区切りに、ただの罫線ではなく花や葉の飾りが置かれた古い本を見たことはないでしょうか。あの装飾をフルーロン（fleuron）と呼びます。本記事では、フルーロンの意味・歴史をざっ…
続きを読む

contrast-color()を設定できるJavaScriptを作ってみた｜背景色から文字色を自動判定

JavaScript
CSSのcontrast-color()関数が2026年4月、ようやく全モダンブラウザで使えるようになりました。背景色を渡すと「白か黒」どちらか読みやすい方を返してくれるというシン…
続きを読む

PCはタブパネル切り替え・SPはアンカーリンク——JavaScriptで実現するハイブリッドUIの実装解説

JavaScript
「PCではタブで切り替えたい、でもSPではページ内リンクで飛ばしたい」——レスポンシブサイトでよくある要件です。この記事では、そのハイブリッドなタブUI（invisible-tab…
続きを読む

CSSで要素を横並びにする方法と、各手法のメリット・デメリットを解説

HTML/CSS
CSSで要素を横並びにする方法は、float・inline-block・table-cell・flexbox・gridと複数あります。「とりあえずflexboxで」という記事は多い…
続きを読む

IllustratorのデザインカンプからCSSを抽出する方法

HTML/CSS
デザインカンプをコーディングするとき、IllustratorにはオブジェクトのスタイルをCSSとして出力できる「CSSプロパティ」パネルが搭載されています。特にグラデーションのよう…
続きを読む

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

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

WordPressカスタムメニューをアコーディオンにするJavaScript【クリック/ホバー両対応】

JavaScript
WordPressのwp_nav_menu()で出力されるカスタムメニューには、サブメニューを持つ項目に.menu-item-has-childrenクラスが自動的に付与されます。…
続きを読む

scroll-padding-topはリロード時にズレる？CSS変数とJavaScriptで解決するアンカーリンク調整

JavaScript
固定ヘッダーのあるサイトでアンカーリンクを使用すると、ジャンプ先がヘッダーの下に隠れてしまう問題があります。この問題を解決する方法としてscroll-padding-topが広く知…
続きを読む

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

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

スマホとPCで別々のスタイルを適用するJavaScript
-JavaScriptのパフォーマンス最適化-

JavaScript
レスポンシブサイトを制作していると、「スマホとPCで画像もデザインも全く違う」「1箇所だけ別のスタイルを適用したい」といった場面に遭遇することがあります。スマホとPCで画像サイズが…
続きを読む

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…
続きを読む

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

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

VS CodeでMarkdown記法をPDFに変換・整形する方法

PDF・文書編集
技術文書やレポートの作成において、Markdownは簡潔で読みやすい記法として広く使われています。VSCode（VisualStudioCode）の拡張機能「MarkdownPDF…
続きを読む

【WordPress】bodyのidにスラッグ名、body_classに任意のクラスを追加する方法

WordPress
WordPressでサイトを制作していると、ページごとに異なるCSSを適用したいケースがよくあります。そんな時に便利なのが、<body>タグにIDやクラスを追加する方法…
続きを読む

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

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

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

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

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

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

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

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