HTML・CSSチートシート
HTML・CSSチートシート：検索・印刷ができてデモ付き | We.Inc
よく使うHTMLタグとCSSプロパティを1枚のシートで検索できます。セマンティックなレイアウト、テキスト、フォーム、メディア、セレクター、単位、レイアウト、見た目の調整を、小さなライブデモと印刷しやすいレイアウトで確認できます。
HTML・CSSチートシート
このシートは、ほぼすべてのWebサイトで使われるHTMLタグとCSSプロパティを、役割ごとにまとめたものです。ドキュメントの設定、セマンティックなレイアウト、テキスト、リスト、メディア、フォーム、セレクター、単位、レイアウト、見た目のスタイルに分かれています。フィルターに入力して探し、小さなデモを開いて動作を確認し、「印刷」を押せばきれいな紙のコピーが作れます。
シートの内容
キーワードで絞り込むか、HTMLとCSSを切り替えると、入力に合わせて一覧が絞られます。デモ付きの項目では、サンドボックス化された小さなプレビューが開きます。印刷レイアウトでは操作部分が非表示になり、各グループの表がページ内でまとまるようになっています。
- フィルター欄に、タグ、プロパティ、やりたいこと（たとえばtable、sticky、email）を入力します。
- ボタンでHTMLかCSSに絞り込むか、両方を表示したままにします。
- 項目の「デモを表示」を押すと描画結果が見られ、「コピー」を押すと構文をコピーできます。
- 「印刷」を押すと、ページの装飾を除いた紙またはPDFのコピーが作れます。
- divを使う前にセマンティックな要素を検討しましょう。header、nav、main、footerを使えば、スクリーンリーダーにランドマークを無料で提供できます。
- すべてのフォームコントロールにはlabelが必要です。プレースホルダーのテキストは入力中に消えるため、代わりにはなりません。
- スタイルシートの最初で、すべての要素にbox-sizing: border-boxを指定しましょう。そうすれば幅が思いどおりの意味になります。
- 読む人の文字サイズ設定に従わせたいフォントサイズや余白にはremを、細い枠線にはpxを使うのがおすすめです。
よくある質問
HTMLタグはいくつありますか？
HTML Living Standardでは100を大きく超える要素が定義されていますが、日常的なページで使うのは数十個です。このシートでは、ほぼどのサイトでも出会うものを扱っています。完全な要素リファレンスはMDNにあります。
タグと要素の違いは何ですか？
タグは、<p>や</p>のように入力するマークアップです。要素は、そこからブラウザーが組み立てるもの全体で、開始タグ、その内容、終了タグから成ります。<img>や<br>のような空要素には終了タグがありません。
このチートシートは印刷できますか？
はい。「印刷」ボタンを押すとブラウザーの印刷ダイアログが開き、フィルター、ボタン、デモを除いて構文の表を残したレイアウトになります。デジタルで保存するには「PDFとして保存」を選んでください。
CSSとTailwindのようなフレームワーク、どちらを先に学ぶべきですか？
まずCSSプロパティを学びましょう。ユーティリティフレームワークはCSSプロパティの省略記法なので、p-4がpadding: 1remを意味すると知っていればフレームワークも使いやすくなります。また、開発者ツールでデバッグするときは必ず元のCSSが表示されます。
HTMLとCSSの役割分担
- HTMLは、各コンテンツが何であるか、つまり見出し、リスト、フォームのフィールド、ナビゲーションのブロックなのかを示します。CSSは、それがどう見えてどこに配置されるかを指定します。両者を分けておけば、1つのスタイルシートで何百ものページのデザインを変えられ、マークアップは検索エンジンや支援技術にとって読みやすいままです。
- どの要素を使うか迷ったら、そのコンテンツが印刷物で何と呼ばれるかを考えましょう。手順のリストならol、事実の集まりならdlかtable、補足の注記ならasideです。
CSSルールの読み方
- ルールは、セレクターの後に波かっこが続き、その中にセミコロンで区切ったプロパティと値の組を書きます。2つのルールが同じ要素を対象にしている場合は、詳細度の高いセレクターが優先されます。同じ詳細度なら、スタイルシートで後に書かれたほうが優先されます。
すべてを1つの小さなページにまとめる
セマンティックなマークアップと数行のCSS
ヘッダー、フォームを含むメインコンテンツ、フッターを、シートにあるいくつかのプロパティでスタイリングしたものです。
- すべてのページの1行目。標準モードを有効にする
- ルート要素。langでページの言語を指定する
- メタデータ、タイトル、CSSやスクリプトへのリンク
- 文字コード、viewport、説明文、ソーシャル用タグ
- スタイルシート、アイコン、プリロードを関連付ける
- JavaScriptを読み込む。deferを付けると解析後に実行する
- ページやセクションの導入部または上部のバー
- 主要なナビゲーションリンクのまとまり
- 固有のメインコンテンツ。1ページに1つ
- テーマごとのコンテンツのまとまり。通常は見出し付き
- 投稿や商品カードのような独立したコンテンツ
- サイドバーのような、関連はあるが副次的なコンテンツ
- 締めくくりの情報：連絡先、法的事項、リンク
- スクリプト不要のネイティブな開閉ウィジェット
- モーダルまたは非モーダルのダイアログボックス
- 順番どおりの見出し。h1は1ページに1つが基本
- 段落
- 強い重要性と強調。標準では太字と斜体
- ハイライトされたテキスト
- インラインのコードと整形済みブロック
- 長い引用
- 略語とその正式名称
- 機械が読める日付や時刻
- テキスト内の改行と、ブロック間の主題の区切り
- 順序なしリストと順序付きリスト
- 名前と値の組から成る説明リスト
- キャプション、ヘッダー、本体を持つ表形式のデータ
- 見出しセル。scopeで列または行と関連付ける
- リンク。新しいタブで開くにはtargetとrelを追加する
- 画像。alt、width、heightを指定するのが基本
- アートディレクションと画像形式のフォールバック
- キャプション付きの独立したメディア
- 埋め込み動画
- 別のページを埋め込む
- インラインのベクターグラフィック
- 入力欄をまとめて送信する
- コントロールに名前を付ける。クリックするとそのコントロールにフォーカスする
- テキスト、メール、数値、日付、チェックボックス、ラジオボタンなど
- ドロップダウンリスト
- 複数行のテキスト入力
- ボタン。意図しない送信を防ぐためtypeを指定する
- 関連するコントロールを見出しの下にまとめる
- 送信前の組み込みチェック
- 要素名、クラス、IDのセレクター
- 任意の深さの子孫と、直接の子のみ
- 直後の兄弟要素、またはそれ以降の任意の兄弟要素
- 属性の有無や値で一致させる
- ポインターが重なった状態とキーボードフォーカスの状態
- 位置で項目を選ぶ
- 親要素への一致とセレクターのグループ化
- 要素の前後に生成されるコンテンツ
- 絶対的なCSSピクセル
- ルートのフォントサイズ / 要素のフォントサイズに対する相対値
- 親要素に対する相対値（どの寸法かはプロパティによる）
- viewport単位。dvhはモバイルのツールバーに追従する
- 0の文字の幅。1行の長さの指定に便利
- グリッド内の空きスペースの割合
- 最小値と最大値の間で変化する可変の値
- 幅にpaddingとborderを含める
- 枠線の外側と内側の余白
- ボックスがレイアウトにどう関わるか
- 1次元の行または列
- 2次元の行と列
- ボックスを通常のフローから外す、またはその中で固定する
- 配置された要素の重なり順
- 収まらないコンテンツをどう扱うか
- 画面サイズや設定に応じたスタイル
- 文字色と背景
- 太さ、サイズ、行の高さ、書体を1行で指定
- 輪郭線と角丸
- ボックスの周りのドロップシャドウ
- 要素全体の透明度
- レイアウトに影響せずに移動、回転、拡大縮小、傾斜させる
- 状態間の変化をアニメーションにする
- カスタムプロパティ（CSS変数）
- ドキュメント
- セマンティックなレイアウト
- テキスト
- リストと表
- メディアとリンク
- フォーム
- セレクター
- 単位
- ボックスとレイアウト
- 見た目
コピー
デモを隠す
デモを表示
デモ：{name}
チートシート
印刷
フィルター
例：form、sticky、rem
言語
すべて
{total}件中{n}件
{group}のチートシート
タグまたはプロパティ
構文
役割
操作
一致するものがありません。短い語で試してください。
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る