FreeonlinetooltoconvertMarkdowntoHTMLinstantly.Supportstables,lists,andcodeblocks.Bidirect…
続きを読む

Markdown記法をHTMLに変換できるオンライン変換サイト。テーブル、リスト記法をサポート。HTML→Markdown逆変換も可能。 使い方▼テキストを入力してくださ…
続きを読む

メインカラーを入力するだけで、Munsell色彩理論ベースで調和の取れた4色パレット（ペール・プライマリー・ディープ・アクセントカラー）を自動生成。各色のWCAGAA/AAAコント…
続きを読む

レスポンシブなフォントサイズ値を一括生成するオンラインツール。ビューポートに応じたclamp()値を出力します。px/rem/em/pc/%の単位に対応。 使い方▼プロパ…
続きを読む

CSSセレクタの詳細度（Specificity）を計算するオンラインツール。複数セレクタを一括計算。:is()/:not()/:has()/:where()/:nth-child(…
続きを読む

テキスト内のRGB/RGBAカラーコードをWEBカラーコード（HEX）に一括変換。逆変換（HEX→RGB）にも対応。 使い方▼テキストを入力してくださいオプション設定&n…
続きを読む

テキスト内の改行やタブを様々な形式に一括変換。HTMLメールの作成、レイアウト調整での改行削除、データ整形など、日常的なテキスト処理を効率化します。 使い方▼テキストを入…
続きを読む

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

複数の置換ルール（JSON配列データ）から、テキストを一括で置換します。px↔rempc↔remem↔remrem↔calc 使い方▼テキストを入力してください▼置換ルー…
続きを読む

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

複数の置換ルール（JSON配列データ）から、テキストを一括で置換します。px↔rempc↔remem↔remrem↔calc 使い方▼テキストを入力してください▼置換ルー…
続きを読む

パイプ区切りのテキストをHTMLのtableタグに自動変換するツールです。テーブル、リスト記法をサポート。HTML→Markdown逆変換も可能。|→<dl>|→<…
続きを読む

パイプ区切りのテキストをHTMLのdlタグに自動変換するツールです。テーブル、リスト記法をサポート。HTML→Markdown逆変換も可能。|→<dl>|→<ta…
続きを読む

2つのフォントを比較して、CSSのsize-adjustプロパティの最適値を計算するオンラインツール。フォントメトリクス値、--font-top-offsetの値も取得。 …
続きを読む

画像をドロップするだけでimgタグを自動生成。width・height・aspect-ratioを正確に設定したHTMLコードを瞬時に作成。 使い方▼画像をドロップしてく…
続きを読む

HTMLタグを一括変換できるオンライン変換サイト。div→section、span→em記法など指定タグを任意タグに変換。 使い方▼テキストを入力してください …
続きを読む

テキストを変換します。▼テキストを入力してください タグに、 class  追加 タグに、 class &nb…
続きを読む

テキストを変換します。▼テキストを入力してくださいMarkdown記法を→HTMLに変換テキストを→URLエンコードに変換すべてのHTMLタグを除去全ての改行を削除単一改行を削除、…
続きを読む

illustratorで作成したImageMap用のSVGファイルを→HTMLコードに変換します。 使い方▼SVGファイルをドラッグ&ドロップしてくださいSVGフ…
続きを読む

テキストを変換します。▼テキストを入力してくださいMarkdown記法を→HTMLに変換すべてのHTMLタグを除去<>を→&lt;&gt;に変換全ての改…
続きを読む

テキストを変換します。▼テキストを入力してくださいMarkdown記法を→HTMLに変換すべてのHTMLタグを除去<>を→&lt;&gt;に変換全ての改…
続きを読む

おすすめのGoogleFonts（※GoogleFontsでないものもちょこちょこあります） Previewtext1  Previewtext2&n…
続きを読む

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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