-
CSS三角形ジェネレーター|8方向・内枠・くり抜き対応
HTML・CSS ツール CSSの三角形を8方向(▲▼◀▶◤◥◢◣)から選んで生成。幅・高さ・色に加え、三角形の内側に作る「内枠」や、内側を透明にくり抜いた三角形にも対応。clip-pathのコードをコピー…
続きを読む
-
数字だけ別フォントにする:Roboto Numeric フォントを自作してnpm配信するまで
HTML・CSS デザイナー指定の数字・記号だけを本文フォントに混植したいときの解決策。✅数字だけ字形が合わない、を混植で解決する考え方✅GoogleFontsのtext=パラメータでは解決できない…
続きを読む
-
『AnimeEffects』で透過アニメーションWebPを作る|GIFのギザギザ問題を解決
動画・画像編集 サイトにマスコットキャラクターを置いて、ちょっと動かしたい。「アニメーションGIF」だと、輪郭のギザギザにがっかりすることになります。この記事では、なぜGIFがギザギザになるのかと…
続きを読む
-
HTMLメール制作時の落とし穴 — Gmail・Outlook・ダークモードすべてに対応するHTMLメールの作り方
HTML・CSS はじめに:HTMLメールはWebの常識が通じないWebサイトと同じ感覚でHTMLメールを作ると、だいたい崩れます。flexbox、grid、position:使えません<he…
続きを読む
-
CSS詳細度を図解する:IDs・class・typeから :is() :where()まで
HTML・CSS CSSが「思った通りに上書きされない」とき、原因の多くは詳細度(specificity)の理解不足です。前回までの記事で:is()/:where()を使った詳細度設計の話をしてきま…
続きを読む
-
nth-系セレクタとクラス名指定の完全ガイド:CSSで「何番目か」を指定する
HTML・CSS 「最初の要素だけスタイルを変えたい」「最後の3つだけマージンをなくしたい」——こういった位置ベースの指定はCSSでよく書く。:nth-of-type()の基本から、:nth-chi…
続きを読む
-
フルーロンとは?活字装飾の歴史とCSSでの使い方|コピペで使える区切り線つき
PDF・文書編集 文章の区切りに、ただの罫線ではなく花や葉の飾りが置かれた古い本を見たことはないでしょうか。あの装飾をフルーロン(fleuron)と呼びます。本記事では、フルーロンの意味・歴史をざっ…
続きを読む
-
contrast-color()を設定できるJavaScriptを作ってみた|背景色から文字色を自動判定
JavaScript CSSのcontrast-color()関数が2026年4月、ようやく全モダンブラウザで使えるようになりました。背景色を渡すと「白か黒」どちらか読みやすい方を返してくれるというシン…
続きを読む
-
PCはタブパネル切り替え・SPはアンカーリンク——JavaScriptで実現するハイブリッドUIの実装解説
JavaScript 「PCではタブで切り替えたい、でもSPではページ内リンクで飛ばしたい」——レスポンシブサイトでよくある要件です。この記事では、そのハイブリッドなタブUI(invisible-tab…
続きを読む