このツールの使い方と仕様
-
コーディングしたHTMLを左の枠に貼り付けるだけで、CSSのセレクタ（
{}付き）を自動生成します。 - 同じクラス名が複数回登場しても、自動で重複を排除して1つにまとめます。
- 出力順は、HTMLに登場した順番のまま出力されます。
-
※仕様上の注意：
divやspanタグは、直接スタイルを当てるとサイト全体でレイアウト崩れを起こす原因になるため、抽出されないように安全装置（除外設定）をかけています。
📱 よく使うメディアクエリ（スマホ・タブレット対応）
レスポンシブデザイン（スマホ対応）を行うための基本のブレイクポイントです。CSSファイルの最下部、または各パーツの記述の下にコピーして使ってください。
/* タブレット・スマホ用（横幅 768px 以下から適用） */
@media screen and (max-width: 768px) {
}
/* スマホ用（横幅 599px 以下から適用 ※実務で多い基準） */
@media screen and (max-width: 599px) {
}マニアックだけど実務で必ず救われる「条件指定」
「PCとタブレットの間の絶妙なサイズで崩れる」「スマホを横に向けた時だけコンテンツが被る」といった、検証時に発覚する厄介なバグをピンポイントで修正するための引き出しです。
/* 1. PCとタブレットの狭間（ノートPCやiPad Proの横向きなど） */
@media screen and (max-width: 1024px) {
/* 1000px付近で横並びの要素がギチギチになる場合などの退避用 */
}
/* 2. 特定のサイズ間でのみ適用（例：タブレットサイズ限定） */
@media screen and (min-width: 600px) and (max-width: 768px) {
/* スマホ(599px以下)でもなく、PC(769px以上)でもない、中間の時だけ効かせる */
}
/* 3. min-width（PCファースト、または100%幅の制限） */
@media screen and (min-width: 769px) {
/* スマホ向けに書いたCSSを、PCサイズになった時に上書き・解除したい場合。
または「PCの時だけメインビジュアルの横幅100%をやめて固定幅にしたい」時などに使います */
}
/* 4. landscape（スマホを横向きにした時の高さ潰れ対策） */
@media screen and (max-width: 896px) and (orientation: landscape) {
/* 昨今のスマホは縦長なため、横に向けると「極端に高さが狭い」状態になります。
height: 100vh; などを指定しているとコンテンツが見切れて完全に死ぬため、
この条件の時だけ height: auto; に解除する、といった救済措置に使います。*/
}💡 現場の小技：スマホで「見出しが変な位置で改行される」問題の対処法
PCでは1行で綺麗に収まっていた長い見出しが、スマホで見ると
「株式会社WebT
oolGen」
のように変な位置で改行されてしまう（または2行目が極端に短くなる）不格好な問題。
実務では以下の2つのアプローチで解決します。
フォントサイズを px ではなく
vw（画面幅に対する割合）で指定し、画面が縮むのに合わせて文字も小さくして無理やり1行に収める方法です。
※現在は、文字が小さくなりすぎるのを防ぐために
clamp() 関数
を使うのがモダンな主流です。
/* 基本は画面幅の4vwで可変するが、最小16px〜最大24pxの間でストップする魔法の指定 */
クライアントから「ここで改行して！」と指示された場合に最も確実な手法です。PC用・スマホ用の改行タグ（<br>）を用意し、CSSの
display プロパティで出し分けます。
<h2>私たちと一緒に<br class="sp-only">働きませんか？</h2>
.sp-only { display: none; } /* PCでは改行を隠す */
@media screen and (max-width: 599px) {
.sp-only { display: block; } /* スマホの時だけ改行をオンにする */
}
🧹 ゼロから書く前に！リセットCSSの導入
ブラウザ（ChromeやSafariなど）には、最初から「見出しの余白」や「リンクの青文字」といった独自のスタイル（デフォルトCSS）が当たっています。これらが残ったままだと「思った通りに余白が空かない！」という原因になるため、自作のCSSを読み込む前に、必ず「リセットCSS」を読み込ませるのがWeb制作の鉄則です。プロジェクトの規模や好みに合わせて、以下のいずれかを選んで読み込ませましょう。
- ① destyle.css（完全リセット型・現在の主流） 公式サイト（GitHub） 余白（margin/padding）からフォントサイズ、見出しの太字（bold）、リストの黒丸まで、本当に全てを「無（ゼロ）」にしてプレーンなテキストの塊にする、現在の主流と言える強力なリセットCSSです。ブラウザの余計なお世話を全て排除できるため、デザインカンプを忠実に再現するコーディングに最も向いています。
-
② ress（バランス・モダン型）
公式サイト（GitHub）
後述のNormalize.cssをベースにしつつ、全要素に
box-sizing: border-box;（幅や高さの計算にpaddingを含める魔法のコード）を標準で当ててくれるなど、「現代のコーディングで絶対に書くであろう設定」を先回りして当てておいてくれる気の利いたファイルです。適度にリセットしつつ、ボタンの基本形状などは残してくれます。 - ③ Normalize.css（差異吸収・温存型） 公式サイト 10年以上前から使われている老舗です。全てをゼロにするのではなく、「各ブラウザ間の表示のズレを無くしつつ、h1〜h6の文字の大きさや、リストの黒丸などの有用なデフォルトスタイルは綺麗に整えて残す」という思想です。ブログの投稿本文など、HTMLタグそのものの装飾を活かしたい場合に便利ですが、複雑なレイアウトを組む際には「あ、ここにマージン残ってた」と後から打ち消す作業が発生しがちです。
- ④ A Modern CSS Reset（超軽量・最新トレンド型） 解説記事（英語） イギリスの有名フロントエンド開発者が提唱している、わずか数十行の超軽量なリセットCSSです。古いブラウザへの対応を完全に捨て、「画像のはみ出し防止」や「スムーズスクロールの有効化」など、現代のWeb制作で本当に必要な設定だけを厳選しています。とにかくコード量を減らしてサイトを高速化したい上級者に好まれています。