BLACKFLAG

CSSのハックやベンダープレフィックスなどの古い記述方法をチェックしてくれる「ReliCSS」

BLACKFLAG — Tue, 03 Mar 2026 00:15:26 +0000

長年運用を続けているWebサイトなど、CSSのハックやベンダープレフィックスなど、現在は不要になっている記述が残ったままになることはよくあります。

そんなCSS内の最新の記述では不要になっているものをピックアップして、対策のランク付けふくめ改善提案をしてくれる「ReliCSS」が便利そうだったのでメモ書きとして紹介します。

ReliCSS – Detect CSS Hacks & Modernise Your Code

ReliCSSはCSSハック検出ツールとして、古いブラウザ固有のCSSハックを特定して、最新の標準に準拠した代替案に置き換えるのを支援するために設計されています。

解析方法はとても簡単で、ページ上にある「Paste CSS Code」と書かれている入力フォームに解析したいCSS一式を貼り付けて、「Scan CSS」ボタンを押すだけです。

解析結果は、問題のある箇所の合計数（TOTAL）と併せて、高中低（HIGH／MEDIUM／LOW）でリスクのランクを分けた形で表示されます。

結果をクリックすることでアコーディオン形式で改善方法の提案が確認できます。

解析結果は画面右上の「Generate HTML Report」ボタンからHTML形式でダウンロードすることも可能です。

新規サイト構築では使いどころはないかもしれませんが、長く運用しているサイトでCSSの中身の見直しや整理したいときなどに活用できそうです。

CSSの不要な記述を改善したい際にぜひ。。。

WebサイトのCSSを解析してパフォーマンス・保守性・複雑性を評価してくれる「Online CSS Code Quality Analyzer」

BLACKFLAG — Thu, 25 Sep 2025 00:15:05 +0000

HTMLやCSSの記述はサイト上の表示だけでなく、レンダリングスピードや更新性にも影響することで、できるだけ複雑にならないようにシンプルに構成することが大切です。

そんなHTMLやCSSの解析ツールは様々ありますが、URLを入力するだけでWebサイト内のCSSファイルを解析して、パフォーマンス、保守性、複雑性に焦点を当てたスコアを出してくれる「Online CSS Code Quality Analyzer」が便利だったので紹介します。

Online CSS Code Quality Analyzer – Project Wallac

解析方法は、ページ上にある入力フォームに解析したいサイトのURLを入力をする「Analyze URL」と、CSSファイルをアップロードする「Analyze File」と、CSSの内容を直接入力する「Analyze CSS input」の3パターンあります。

オプションに「Prettify CSS」のチェックがあり、チェックすることで整形したCSSを生成してくれます。

解析結果は以下の3項目それぞれ0～100ポイントでスコア付けしてくれます。
※サイト上には、CSS版のPageSpeed Insightsのようなものと紹介されています。

・Maintainability（保守性）
・Complexity（複雑性）
・Performance（パフォーマンス）

当ブログの解析を行ってみると以下のような結果に…
（ブログを運用していく中でCSS構成がだいぶゴチャついてしまってます…）

各項目のスコアだけでなく、以下のような項目等でとても細かくCSS構成をチェックして、どこを改善することでパフォーマンス、保守性、複雑さを解消できるか改善策を提示してくれます。

・CSSファイル内のコメントの削除
・セレクタの複雑度
・宣言の重複
・空のルールセットの削除
・IDセレクタの使用率

Webサイト公開時や、長い期間運用しているWebサイトのCSSチェックにも活用できるかと思います。

WebサイトのCSSを解析して最適化する際にぜひ。。。

Webページで使用するさまざまな動きのアイデアをまとめた「Web Motion Catalog」

BLACKFLAG — Tue, 13 May 2025 00:15:26 +0000

Webページ上で表示する要素のテキストやボタンやグラフなど、適度にアニメーションなどの動きを加えることで、目立たせることだけでなく操作感を良くしたり、効果的な視覚効果を演出したりすることができます。

そんなWebサイト制作におけるさまざまな動きのアイデアを集めたサイト「Web Motion Catalog」がとても魅力的だったので備忘録として紹介してみます。

Web Motion Catalog

このサイトでは円グラフの演出や立体的なカードUI、お気に入りボタンのインタラクションに加えて、ボタンやテキストのマウスホバー演出など、さまざまな動きのアイデアが紹介されています。

各アイデアをクリックすると、詳細が表示され、実装のポイントに加えて、HTMLやCSSやJavaScriptのコード例をコピペして簡単に利用することも可能になっています。

動きのアイデアは20種類以上（2025年5月現在）用意されていて、ページ上にはフィルタ機能もあり、ホバー、スクロール、クリックなどの「インタラクション種別」、CSSのみ、JavaScriptなどの「技術」、テキスト、ボタン、リストなどの「要素」、ふわっと系、回転系、ローディングなどの「キーワード」といったジャンルで絞り込むことも可能になっています。

個々のアイデアの使用に関しては、サイト内に掲載されている規約を確認の上ご使用ください。

このサイトについて | Web Motion Catalog

今後もアイデアの数は増えていくと思われるので、何かWebサイトに掲載する動きで迷った際にはのぞきにくると良いインスピレーションをもらえそうです。

Webサイトで使用する動きのアイデアが必要になった際にぜひ。。。

CSSのfilterプロパティを一覧で設定できる「CSS Filter Preview」作ってみました

BLACKFLAG — Tue, 01 Apr 2025 00:15:30 +0000

CSSで画像に様々なフィルター効果を指定できるfilterプロパティ。
画像をぼかしたり、明度や彩度を設定したり、様々なグラフィック効果を付けることができます。

そんなCSSで画像加工ができるfilterプロパティの各フィルター効果を一覧で表示し、各値を画面上で調整しながら効果を確認することができる「CSS Filter Preview」を作ってみたので紹介してみます。

CSS Filter Preview

「CSS Filter Preview」を別枠で表示

フィルター一覧

画面上のドラッグエリアに画像ファイルをドラッグ＆ドロップすると、画面下にfilterプロパティで設定できるフィルター効果が一覧で表示されます。

各フィルター効果はスライダーで値を変えることができ、画像に対して効果の強弱を見ながら設定を変更させることが可能です。

調整したフィルター値は、スライダー下に表示されている［filter: フィルター名（値）］をコピーしてCSSに貼り付けて使用することができます。

一覧で表示するフィルター効果は以下です。

ぼかし	blur
明度	brightness
彩度	saturatel
コントラスト	contrast
グレースケール	grayscale
セピア	sepia
色相環	hue-rotatel
諧調の反転	invert
透明度	opacity

filterプロパティにある「ドロップシャドウ（drop-shadow）」だけはすこし系統が違うので、この「CSS Filter Preview」からは外して、画像に対するフィルター加工のみにしています。

フィルター複合設定

フィルター一覧の下には画像に複数のフィルター効果を指定できるジェネレーターも設置しています。

一覧で表示していた、ぼかし（blur）、明度（brightness）、彩度（saturatel）、コントラスト（contrast）、グレースケール（grayscale）、セピア（sepia）、色相環（hue-rotatel）、諧調の反転（invert）、透明度（opacity）の各フィルター機能を、プレビュー画像に対して複数指定することが可能になっています、

指定した各フィルター値は、スライダー下に表示されている［filter: フィルター名（値）フィルター名（値）］をコピーしてCSSにそのまま貼り付けて使用可能です。

CSSのfilterプロパティでは様々な効果によって画像調整ができるので、filterプロパティでどのような加工ができるのか遊んでみる感覚でもご使用ください。

CSSのfilterプロパティの設定の際にぜひ。。。

直感的なマウス操作で任意のサイズのダミー画像を生成できる「Image Elf」

BLACKFLAG — Tue, 04 Mar 2025 00:15:06 +0000

Webサイトを構築する際に、ページ上に掲載する写真や画像素材の仮としてダミー画像を使ってHTMLコーディングをする場面はよくあります。

ダミー画像もレイアウトによってそれぞれ個別のサイズが必要になったり、複数のものを作成するのが面倒なこともあったりしますが、そんなダミー画像を直感的なマウス操作で任意のサイズで簡単に作成できる画像ジェネレーター「Image Elf」がとても便利だったのでご紹介です。

Image Elf – Custom Image Generator

サイトにアクセスすると、マウスカーソルが定規の役割になり、画面上をドラッグして縦横のサイズを伸び縮みさせて指定しながらダミー画像を作成します。

ドラッグを離すとサイズが確定になり、「Generate Image」ボタンから指定したサイズのダミー画像をダウンロードすることができます。

ドラッグでサイズがうまく設定できなかった場合は、離した後に表示されるダイアログ上で数値を入力してサイズ調整をすることも可能です。

ダウンロードできる画像フォーマットはJPEGとPNGの2種類あります。
※JPEGは「.jpeg」の拡張子でダウンロードされるので要注意です。

デフォルトでは10倍のサイズ感での作成設定になっていますが、ダイヤログ上の「10x size」のチェックの有無で調整が可能になっています。

ダミー画像のジェネレーターはいくつもありますが、ここまで操作が直感的で作りやすいジェネレーターは他にはないんじゃないかと思うくらいUIがすばらしいです。

ダミー画像が必要になった際にぜひ。。。

グラフやチャートや表やマップなどのデータ視覚化のデザインパターンまとめ「Data Viz Project」

BLACKFLAG — Thu, 13 Feb 2025 00:15:15 +0000

グラフやチャート図、または表組みやマップなど、データ情報を視覚的にわかりやすく可視化するデータビジュアライゼーションは、見る人に情報を伝えやすくするために大切です。

そんなデータ情報を可視化するためのデザインパターンをまとめた「Data Viz Project」がとても魅力的だったので備忘録として紹介してみます。

Data Viz Project | Collection of data visualizations to get inspired and find the right type

「Data Viz Project」は、グラフやチャート図、または表組みやマップなど、データ情報を視覚的にわかりやすく可視化するデータビジュアライゼーションのコレクションサイトです。

150種類以上のデータビジュアライゼーションが用意されていて一覧画面からそれぞれ詳細を見ることができます。

またフリーワード検索や、カテゴリ選択からデータビジュアライゼーションを絞り込むことも可能で、用意されているカテゴリは以下です。

・Family（ファミリー）
・Input（入力）
・Function（機能）
・Shape（形状）

「Family」ではグラフやチャート図や表組み、「Input」は数値情報の見せ方、「Function」は比較や相関関係や位置情報などの見せ方、「Shape」は形状別の見せ方の分け方になっています。

データビジュアライゼーション例：Polar Area Chart

それぞれのデータビジュアライゼーションはクリックすると詳細が表示され、概要や使用方法に加えて使用例としてさまざまな別パターンの見せ方のサンプルまで見ることができます。

個々の詳細画面から様々なパターンを見るだけでもインスピレーションが湧いてきます。

注意点としては、このサイトで用意されているデータビジュアライゼーションはダウンロードしたりそのまま使用することはできません。

あくまで視覚化の例として、インスピレーションを高めるため、アイデアの引き出しを増やすための参考としての利用になりますが、データ情報の可視化に迷ったときにとても参考にできそうです。

グラフやチャートや表やマップなどのデータ視覚化を検討する際にぜひ。。。

CSSのみで画面の幅と高さのウィンドウサイズを取得する方法

BLACKFLAG — Tue, 21 Jan 2025 00:15:23 +0000

画面の幅や高さを取得するには基本的にはJavaScriptを使用しますが、CSSのみでリアルタイムに画面の幅や高さのウィンドウサイズを取得する方法があったので備忘録として紹介します。

CSSカスタムプロパティ「@property」と「:root」を使ってウィンドウサイズの幅と高さを取得

まず、元ネタは以下です。

Get the screen width & height without JavaScript

CSSでウィンドウサイズの幅と高さを判別するには、CSSのカスタムプロパティ機能「@property」を使って「:root」の変数に入れる際に三角関数を使って取得します。

@property --_w {
  syntax: '';
  inherits: true;
  initial-value: 100vw; 
}

@property --_h {
  syntax: '';
  inherits: true;
  initial-value: 100vh; 
}

:root {
  --w: tan(atan2(var(--_w),1px));
  --h: tan(atan2(var(--_h),1px));
}

このCSSを使ってリアルタイムで画面の幅と高さを取得して、結果を［ width ✕ height ］の形式で表示する動作サンプルは以下になります。
※ブラウザの幅を縮めるとリアルタイムで値が変化します。

See the Pen
CSS only width & height by BLACKFLAG (@BlackFlag)
on CodePen.

このようにしてJavaScriptを使用しなくても「@property」と「:root」のCSSのみで画面の幅と高さが取得が可能となります。

「@property」の対象ブラウザは以下です。

@property – CSS: カスケーディングスタイルシート | MDN

「:root」の対象ブラウザは以下です。

:root – CSS: カスケーディングスタイルシート | MDN

画面の幅や高さのウィンドウサイズを使用するのは、JavaScriptで値を取得した後に何か処理をすることに使うことが多いので、CSSのみで画面幅や高さを画面上に表示する機会はあまりないと思いますが、覚えておくと何かの時には役に立つんじゃないかと思っています。

CSSのみで画面の幅と高さを取得する際にぜひ。。。

CSSのtext-wrapとword-breakとoverflow-wrapでの改行位置の制御

BLACKFLAG — Tue, 10 Dec 2024 00:15:03 +0000

Webページ上に文章を掲載する際、末尾の一文字だけ改行してしまったり、改行位置のバランスに困ることがよくあります。

レスポンシブの場合だと、PC表示では違和感のない改行位置だったとしても、SP表示で表示幅が変わることでテキストのバランスがおかしくなるようなこともしばしばありますが、そんな文章の改行位置を調整できるCSSの「text-wrap」と「word-break」と「overflow-wrap」の3つのプロパティでどのように改行位置が変化するかサンプルをもとに紹介してみます。

text-wrap

まずはCSSの「text-wrap」プロパティから。

text-wrap – CSS: カスケーディングスタイルシート | MDN

「text-wrap」の値には以下のようなものがあります。

wrap ※規定値	テキストは要素幅に合わせて改行
nowrap	テキストを改行させない
balance	各行の文字数を均等にするようにテキストを改行
pretty	一文字（一単語）だけ改行しないように調整
stable	wrapと同じ動作

「text-wrap」の値は様々ありますが、文章の最後の一文字だけ改行してしまうことを避けるような場合は、「balance」や「pretty」を使用すると解消できます。

それぞれの値での実際の改行位置の変化は以下のようになります。

See the Pen
CSS text-wrap: balance; by BLACKFLAG (@BlackFlag)
on CodePen.

「text-wrap」の対象ブラウザは以下です。

word-break

続いてCSSの「word-break」プロパティです。

word-break – CSS: カスケーディングスタイルシート | MDN

「word-break」の値には以下のようなものがあります。

normal ※規定値	通常の改行
break-all	英単語などでも文字の途中で改行させる
keep-all	日本語（中国語等も含む）は改行させないが、英文は改行させる
break-word ※非推奨	単語の区切りで改行させるが、単語の途中でも改行する
auto-phrase	ブラウザが適切な位置で改行させる

「word-break」の値も様々ありますが、「text-wrap」のように文章中で一文字だけ改行することを制御するようなことは難しいので使い分けが必要です。

それぞれの値での改行位置の変化は以下になります。

See the Pen
CSS word-break by BLACKFLAG (@BlackFlag)
on CodePen.

「word-break」の対象ブラウザは以下です。

overflow-wrap

最後はCSSの「overflow-wrap」プロパティです。

overflow-wrap – CSS: カスケーディングスタイルシート | MDN

「overflow-wrap」の値には以下のようなものがあります。

normal ※規定値	単語間で改行
break-word	英単語などでも文字の途中で改行させる
anywhere	基本的に break-word と同じで英単語などでも文字の途中で改行させるが、コンテンツの最小サイズ計算時方法が異なる

「overflow-wrap」の値も様々ありますが、基本的にはURLのような連続する英数字の改行位置の制御になるので、日本語での影響はほとんどありません。

それぞれの値での改行位置の変化は以下になります。

See the Pen
CSS overflow-wrap by BLACKFLAG (@BlackFlag)
on CodePen.

「overflow-wrap」の対象ブラウザは以下です。

「text-wrap」と「word-break」と「overflow-wrap」それぞれで改行位置の制御は様々ですが、文章の末尾一文字だけ改行してしまうことを避けるには「text-wrap」を使用するのが最適かと思います。

「text-wrap: balance;」はページのレイアウトによって見栄えが大きく変わってしまうので、「text-wrap: pretty;」を長い文章に対しては常に入れて、一文字だけ改行してしまうような微妙な見た目が発生しないようにしておくのもいい気がしています。

以上が「text-wrap」と「word-break」と「overflow-wrap」での改行位置の制御でした。

文章を掲載する際の、改行バランスを制御する際にぜひ。。。

入力文字数によってテキストエリアを高さを可変できるCSSプロパティ「field-sizing: content;」

BLACKFLAG — Wed, 06 Nov 2024 00:15:41 +0000

Webページ上にあるテキストエリアに文字を入力する場合、デフォルトだと決められた高さ以上のテキストが入ると、スクロールバーが表示され、その後テキスト全体を確認するにはスクロール制御になります。

テキストエリアの高さが短かったりすると、このスクロール制御が使いづらくなったりしますが、中に入力される文字数によってテキストエリアの高さを可変できるプロパティ「field-sizing: content;」が便利なので備忘録メモとして紹介してみます。

field-sizing: content;

CSSでテキストエリアの高さ可変にするには「field-sizing」プロパティを使用します。

この「field-sizing」プロパティはデフォルトでは「fixed」の値が入っていますが、この値を「content」にすることで、入力された内容によって高さを可変させることが可能になります。

textarea {
	field-sizing: content;
}

「field-sizing: content;」プロパティを設定したテキストエリアの動作サンプルは以下です。
左はデフォルトの「field-sizing: fixed;」で入力されたテキストが高さを超えるとスクロール制御になり、右が「field-sizing: content;」で入力されたテキストの量によって高さが可変になります。

See the Pen
CSS [ field-sizing: content; ] by BLACKFLAG (@BlackFlag)
on CodePen.

この「field-sizing: content;」では、「max-height」と併用することで、無限に高さを伸ばすのではなく、高さの最大値を設定することも可能です。

textarea {
	field-sizing: content;
	min-height: 5lh;
	max-height: 10lh;
}

高さの最大値をせて地した場合の動作サンプルは以下です。

See the Pen
CSS field-sizing: content; [2] by BLACKFLAG (@BlackFlag)
on CodePen.

「field-sizing: content;」プロパティの対象ブラウザについては以下です。
※現時点（2024年11月）ではSafariやFirefoxは未対応です。

まだChromeやEdgeのみの対応ですが、「field-sizing: content;」によってテキストエリアの使い勝手がよくなる場面は多くあるので、プログレッシブエンハンスメントの設計として活用していくと良いと思います。

「field-sizing: content;」プロパティで高さ可変のテキストエリアを設置する際にぜひ。。。

AIを使った様々なツールやサービスを紹介するまとめサイト「AIナビ」

BLACKFLAG — Tue, 08 Oct 2024 00:15:34 +0000

ChatGPT、Gemini、Apple Intelligenceなどなど、AIツールの進化がめまぐるしいですが、世界中のAIツール・サービスを収集し、機能や使い方と合わせて紹介してくれているAIツールのまとめサイト「AIナビ」がとても便利だったのでご紹介。

AIナビ – AIツールのまとめサイト

AIナビは、数千以上あるAIを使った様々なツールやサービスを、キーワードやカテゴリから探すことができます。

各ツールはそれぞれ、概要や用途、特徴、機能から使い方まで詳細に紹介してくれています。

世界中の新しいAIツール・サービスが日々追加され、すべて日本語で解説をしてくれているところがありがたいです。

各AIツールは「自動化」「マーケティング」「コンテンツ生成」「チャットボット」「開発」「アプリ開発」「生産性向上」「画像生成」といった70以上のカテゴリで分類されています。

フリーワード検索では単純にキーワードで検索するだけでなく、「イラストを書いて欲しい」など質問形式で検索できるところがとても使いやすく魅力的です。（検索機能自体にもAIを使用）

必要に応じたAIを使ったツールを探すことはもちろんのこと、世の中にどのようなAIツールがあるか情報収集としても活用できそうです。

AIツールの検索または作業効率化の検討する際にぜひ。。。