サイト作成完全ガイド

HTML、CSS、JavaScriptのすべてを初心者にもわかりやすく解説。
今日からあなたもWebデベロッパー！

✨ 完全無料 📱 レスポンシブ対応 🎨 実践的なコード例 🔍 検索機能付き

2,750+

HTMLタグ

2,125+

HTML属性

3,750+

CSSプロパティ

500+

CSS値と単位

400+

サイト作成テクニック

3,375+

JavaScript

☕

html.cafe完全対応

∞

可能性

📄 基本構造タグ

<!DOCTYPE html>

このページがHTML5で書かれていることをブラウザに教えるための宣言文です。すべてのHTMLファイルの一番最初に必ず書きます。

💡 使い方： HTMLファイルの1行目に書く。これがないとブラウザが正しく表示できません。

<!DOCTYPE html>

✅ 結果： ブラウザが「これはHTML5だ」と理解します

<html>

HTML文書全体を囲む一番大きな箱です。すべてのHTML要素はこのタグの中に入ります。

💡 使い方： DOCTYPE宣言の次の行に書いて、ファイルの最後に </html> で閉じます。

<html lang="ja"> ここにすべての内容を書く </html>

✅ ポイント： lang="ja" は日本語のページであることを示します

<head>

ページの裏側の設定を書く場所です。ここに書いた内容は画面には表示されませんが、ページのタイトルやスタイルなど重要な情報を設定します。

💡 使い方： <html>の直後に書きます。タイトル、文字コード、CSSなどを設定します。

<head> <meta charset="UTF-8"> <title>ページタイトル</title> <link rel="stylesheet" href="style.css"> </head>

✅ 結果： ページの基本設定が完了します

<title>

ブラウザのタブに表示されるページの名前を決めます。検索エンジンにも表示される重要な部分です。

💡 使い方： <head>の中に書きます。ページの内容がわかる名前をつけましょう。

<title>私のホームページへようこそ</title>

✅ 結果： ブラウザのタブに「私のホームページへようこそ」と表示されます

<meta>

ページの様々な情報を設定するタグです。文字化けを防いだり、スマホ対応をしたりできます。

💡 使い方： <head>の中に書きます。閉じタグは不要です。

<meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta name="description" content="これは私のサイトです">

✅ 結果： ページが正しく表示され、スマホでも見やすくなります

<body>

実際にブラウザに表示される内容をすべて書く場所です。テキスト、画像、ボタンなど、ユーザーが見るものはすべてここに書きます。

💡 使い方： <head>の後に書きます。ページの見える部分はすべてここに入れます。

<body> <h1>こんにちは！</h1> <p>これが私のウェブサイトです。</p> </body>

✅ 結果： 画面に「こんにちは！」と「これが私のウェブサイトです。」が表示されます

📝 テキスト関連タグ

見出しを作るタグです。h1が最も大きく重要で、h6が最も小さいです。ページのタイトルにはh1を使います。

💡 使い方： 大見出しにh1、中見出しにh2、小見出しにh3...という順番で使います。

<h1>メインタイトル（一番大きい）</h1> <h2>サブタイトル（2番目に大きい）</h2> <h3>小見出し</h3>

✅ 結果： サイズの違う見出しが表示されます

<p>

段落（文章のまとまり）を作るタグです。普通の文章を書くときに使います。

💡 使い方： 文章を書きたいときに使います。自動的に前後に余白が入ります。

<p>これは段落です。文章を書くときに使います。</p> <p>新しい段落を作ると、自動的に改行されます。</p>

✅ 結果： 2つの段落が余白を空けて表示されます

<a>

リンク（クリックすると別のページに移動）を作るタグです。

💡 使い方： href属性にリンク先のURLを書きます。

<a href="https://www.google.com">Googleへ移動</a>  <a href="https://www.google.com" target="_blank">新しいタブで開く</a>

✅ 結果： クリックするとGoogleに移動します

<img>

画像を表示するタグです。写真やイラストを表示できます。

💡 使い方： src属性に画像のファイル名を、alt属性に画像の説明を書きます。

<img src="cat.jpg" alt="かわいい猫の写真">  <img src="cat.jpg" alt="猫" width="300" height="200">

✅ 結果： 画像が表示されます

💡 alt属性は、画像が表示されないときや視覚障害者の方のために必ず書きましょう

クリックできるボタンを作ります。

💡 使い方： ボタンに表示したい文字を囲みます。

<button>クリックしてください</button> <button type="submit">送信</button> <button onclick="alert('押されました！')">アラート</button>

✅ 結果： クリックできるボタンが表示されます

<div>

要素をグループ化する箱です。レイアウトを整えたり、CSSでスタイルを適用したりするときに使います。

💡 使い方： 関連する要素をまとめて囲みます。class属性で名前をつけるとCSSで装飾できます。

<div class="container"> <h2>セクション1</h2> <p>ここにコンテンツ</p> </div> <div class="box"> <img src="photo.jpg" alt="写真"> <p>写真の説明</p> </div>

✅ 結果： 要素がグループ化され、CSSで一緒にスタイリングできます

<span>

インライン要素をグループ化します。文章の一部だけにスタイルを適用するときに使います。

💡 使い方： テキストの一部を囲んで装飾します。

✅ 結果： テキストの一部だけ色やスタイルが変わります

📋 セマンティックタグ（HTML5）

ページやセクションのヘッダー部分を表します。ロゴやナビゲーションを配置します。

💡 使い方： ページ上部のヘッダーコンテンツを囲みます。

✅ 意味： 検索エンジンがヘッダー部分だと理解します

<nav>

ナビゲーションリンクのセクションを表します。

💡 使い方： メニューやリンク集を囲みます。

<nav> <ul> <li><a href="#home">ホーム</a></li> <li><a href="#service">サービス</a></li> <li><a href="#contact">お問い合わせ</a></li> </ul> </nav>

✅ 結果： ナビゲーションメニューが明確になります

<main>

ページのメインコンテンツを表します。ページに1つだけ使用します。

💡 使い方： メインの内容を囲みます。

<main> <h1>記事タイトル</h1> <article> <p>記事の本文...</p> </article> </main>

✅ 重要： SEOに効果的です

独立したコンテンツ（記事、ブログ投稿など）を表します。

💡 使い方： 単独で成立するコンテンツを囲みます。

<article> <h2>ブログ記事のタイトル</h2> <p>公開日：2025年1月1日</p> <p>記事の内容...</p> </article>

✅ 用途： ブログ、ニュース記事、フォーラム投稿など

テーマ別のセクションを表します。

💡 使い方： 関連するコンテンツをセクションに分けます。

<section> <h2>私たちのサービス</h2> <p>サービスの説明...</p> </section> <section> <h2>お客様の声</h2> <p>レビュー...</p> </section>

✅ 結果： ページが論理的に構造化されます

<aside>

サイドバーや補足情報を表します。

💡 使い方： メインコンテンツと関連するが独立した情報を配置します。

<aside> <h3>関連リンク</h3> <ul> <li><a href="#">リンク1</a></li> <li><a href="#">リンク2</a></li> </ul> </aside>

✅ 用途： サイドバー、広告、関連記事など

ページやセクションのフッター部分を表します。

💡 使い方： 著作権情報、連絡先などを配置します。

✅ 結果： フッター情報が明確になります

画像や図表とそのキャプションをまとめます。

💡 使い方： 画像と説明文をセットで扱います。

<figure> <img src="chart.png" alt="売上グラフ"> <figcaption>2024年度の売上推移</figcaption> </figure>

✅ 結果： 画像と説明が関連付けられます

<mark>

テキストをハイライト（強調）します。

💡 使い方： 重要な部分を目立たせます。

<p>この<mark>重要な部分</mark>を覚えてください</p>

✅ 結果： 黄色いハイライトで表示されます

<time>

日付や時刻を表します。

💡 使い方： datetime属性で機械可読な形式を指定します。

✅ 効果： 検索エンジンが日時を理解します

折りたたみ可能なコンテンツを作ります。

💡 使い方： クリックで開閉するセクションを作ります。

<details> <summary>詳細を表示</summary> <p>ここに詳細情報が表示されます。</p> </details>

✅ 結果： アコーディオンメニューが作れます（JavaScriptなし）

ダイアログボックス（モーダル）を作ります。

💡 使い方： JavaScriptでshow()やshowModal()を呼び出します。

<dialog id="myDialog"> <h2>確認</h2> <p>本当に削除しますか？</p> <button onclick="myDialog.close()">キャンセル</button> </dialog> <button onclick="myDialog.showModal()">開く</button>

✅ 結果： ネイティブのモーダルダイアログ

進捗状況を表示します。

💡 使い方： value属性で進捗を指定します。

<progress value="70" max="100">70%</progress> <p>ダウンロード進捗: <progress id="download"></progress></p>

✅ 結果： プログレスバーが表示されます

<meter>

測定値やゲージを表示します。

💡 使い方： min、max、value属性で範囲を指定します。

<meter min="0" max="100" value="75">75%</meter> <p>ディスク使用量: <meter min="0" max="1000" value="850">850GB</meter></p>

✅ 結果： メーターゲージが表示されます

JavaScriptで使用するHTMLテンプレートを定義します。

💡 使い方： ページには表示されず、JSでクローンして使います。

<template id="card-template"> <div class="card"> <h3 class="title"></h3> <p class="description"></p> </div> </template> <script> const template = document.getElementById('card-template'); const clone = template.content.cloneNode(true); document.body.appendChild(clone); </script>

✅ 用途： 動的なコンテンツ生成

レスポンシブ画像を提供します。デバイスに応じて最適な画像を表示します。

💡 使い方： source要素で複数の画像を指定します。

✅ 結果： 画面サイズに応じて最適な画像が表示されます

<video>

動画を埋め込みます。

💡 使い方： src属性で動画ファイルを指定し、controls属性でコントロールを表示します。

<video controls width="640" height="360"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> お使いのブラウザは動画タグに対応していません。 </video>

✅ 結果： 動画プレーヤーが表示されます

<audio>

音声を埋め込みます。

💡 使い方： src属性で音声ファイルを指定します。

<audio controls> <source src="audio.mp3" type="audio/mpeg"> <source src="audio.ogg" type="audio/ogg"> お使いのブラウザは音声タグに対応していません。 </audio>

✅ 結果： 音声プレーヤーが表示されます

JavaScriptでグラフィックスを描画するキャンバスです。

💡 使い方： JavaScriptのCanvas APIで図形を描きます。

<canvas id="myCanvas" width="400" height="300"></canvas> <script> const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = 'red'; ctx.fillRect(50, 50, 100, 100); </script>

✅ 用途： ゲーム、グラフ、アニメーション

<svg>

ベクターグラフィックスを埋め込みます。

💡 使い方： SVG要素で図形を描きます。

✅ 特徴： 拡大しても綺麗なまま

別のウェブページを埋め込みます。

💡 使い方： src属性で埋め込むURLを指定します。

✅ 用途： YouTube、Google Maps、外部コンテンツ

<embed>

外部アプリケーションやプラグインコンテンツを埋め込みます。

💡 使い方： src属性でファイルを指定します。

✅ 用途： PDF、Flash（非推奨）など

外部リソースを埋め込みます。embedより柔軟です。

💡 使い方： data属性でリソースを指定します。

✅ 特徴： フォールバックコンテンツを指定できます

📝 フォーム関連タグ

<form>

入力フォームを作成します。

💡 使い方： action属性で送信先、method属性で送信方法を指定します。

✅ 結果： データを送信できるフォーム

<label>

入力欄のラベルを表示します。クリックすると対応する入力欄にフォーカスします。

💡 使い方： for属性で入力欄のIDを指定します。

<label for="email">メールアドレス:</label> <input type="email" id="email" name="email">  <label> 名前: <input type="text" name="name"> </label>

✅ 効果： アクセシビリティ向上、クリック範囲拡大

関連する入力欄をグループ化します。

💡 使い方： fieldsetで囲み、legendでタイトルを付けます。

✅ 結果： 枠線で囲まれたグループ

ドロップダウンリストを作成します。

💡 使い方： option要素で選択肢を指定します。

<label for="country">国:</label> <select id="country" name="country"> <option value="">選択してください</option> <option value="jp">日本</option> <option value="us">アメリカ</option> <option value="uk">イギリス</option> </select>

✅ 結果： プルダウンメニューが表示されます

selectの選択肢をグループ化します。

💡 使い方： label属性でグループ名を指定します。

✅ 結果： グループ分けされたドロップダウン

複数行のテキスト入力欄を作成します。

💡 使い方： rows属性で行数、cols属性で列数を指定します。

<label for="message">メッセージ:</label> <textarea id="message" name="message" rows="5" cols="40"></textarea>

✅ 結果： 複数行入力できるテキストエリア

入力候補のリストを提供します。オートコンプリート機能を実現します。

💡 使い方： input要素のlist属性で関連付けます。

✅ 結果： 入力候補が表示されます

計算結果や出力を表示します。

💡 使い方： JavaScriptで値を設定します。

✅ 結果： リアルタイムで計算結果が表示されます

📊 表（テーブル）タグ

<table>

表を作成します。

💡 使い方： tr（行）、th（ヘッダー）、td（データ）を組み合わせます。

✅ 結果： 表が表示されます

表をヘッダー、本体、フッターに分けます。

💡 使い方： 表を論理的にグループ化します。

✅ 効果： 印刷時にヘッダーが各ページに表示されます

表にタイトルを付けます。

💡 使い方： table要素の最初の子要素として配置します。

<table> <caption>月別売上表</caption> <tr> <th>月</th><th>売上</th> </tr> </table>

✅ 結果： 表の上にタイトルが表示されます

colspan と rowspan

セルを結合します。

💡 使い方： colspan（横結合）、rowspan（縦結合）を使います。

✅ 結果： セルが結合されます

🏷️ 基本的な HTML 属性

class="クラス名"

要素に名前（クラス）を付けて、CSSでスタイルを適用したり、JavaScriptで操作したりするための属性です。同じクラス名を複数の要素に付けることができます。

💡 使い方： タグの中に class="名前" と書きます。複数のクラスは空白で区切ります。

<div class="box">ボックス</div> <p class="text-red">赤い文字</p> <button class="btn btn-primary">ボタン</button> /* CSS でスタイル適用 */ .box { background-color: lightblue; padding: 20px; } .text-red { color: red; }

✅ 結果： CSSで指定したスタイルが適用されます

💡 ポイント： class名は自由に付けられますが、わかりやすい名前にしましょう（例：btn, container, card）

id="ID名"

要素に一意の識別名を付ける属性です。ページ内で同じIDは1つだけしか使えません。特定の要素を指定するときに使います。

💡 使い方： タグの中に id="名前" と書きます。CSSでは #ID名で指定します。

<div id="header">ヘッダー</div> <button id="submit-btn">送信</button> <section id="about">私について</section> /* CSS でスタイル適用 */ #header { background-color: navy; color: white; } #submit-btn { background-color: green; }

✅ 結果： 特定の要素だけにスタイルが適用されます

⚠️ 注意： 同じIDを複数の要素に使わないでください！

style="スタイル"

その要素だけに直接CSSスタイルを適用する属性です。簡単にスタイルを適用できますが、多用すると管理が大変になります。

💡 使い方： style="プロパティ: 値;" の形式で書きます。複数のスタイルはセミコロンで区切ります。

<p style="color: red;">赤い文字</p> <div style=" background-color: lightblue; padding: 20px; border-radius: 10px; font-size: 18px; "> スタイル付きボックス </div> <h1 style="color: #4a90e2; text-align: center;">見出し</h1>

✅ 結果： 指定したスタイルがその要素だけに適用されます

💡 ベストプラクティス： 基本的には外部CSSファイルを使い、styleは一時的な調整にのみ使いましょう

href="URL"

リンク先のURLを指定する属性です。<a>タグと一緒に使います。

💡 使い方： <a href="リンク先">テキスト</a> の形式で書きます。

<a href="https://www.google.com">Googleへ</a>  <a href="about.html">私について</a>  <a href="#section2">セクション2へジャンプ</a>  <a href="mailto:[email protected]">メールを送る</a>  <a href="tel:+81-90-1234-5678">電話をかける</a>

✅ 結果： クリックすると指定したURLに移動します

src="ファイルパス"

画像や外部ファイルの場所（パス）を指定する属性です。<img>、<script>、<iframe>などのタグで使います。

💡 使い方： ファイルの場所を正確に指定します。

<img src="cat.jpg" alt="猫の写真">  <img src="images/logo.png" alt="ロゴ">  <img src="https://example.com/photo.jpg" alt="写真">  <script src="script.js"></script>  <iframe src="https://www.youtube.com/embed/動画ID"></iframe>

✅ 結果： 指定したファイルが読み込まれて表示されます

alt="説明文"

画像が表示できないときの代わりのテキストを指定します。視覚障害者のための読み上げソフトでも使われる重要な属性です。

💡 使い方： <img>タグに必ず付けましょう。画像の内容を説明する文章を書きます。

✅ 結果： 画像が読み込めないときに説明文が表示され、アクセシビリティも向上します

♿ アクセシビリティ： altテキストは目の不自由な方のためにも必須です！

target="_blank"

リンクを新しいタブで開くための属性です。<a>タグと一緒に使います。

💡 使い方： <a>タグに target="_blank" を追加します。セキュリティのため rel="noopener" も一緒に付けましょう。

<a href="https://www.google.com" target="_blank" rel="noopener"> Googleを新しいタブで開く </a>  <a href="page.html">このタブで開く</a>

✅ 結果： リンクをクリックすると新しいタブで開きます

🔒 セキュリティ： target="_blank" を使う時は必ず rel="noopener" を付けてください！

placeholder="ヒント文字"

入力欄に薄く表示されるヒントテキストです。ユーザーが何を入力すべきか教えてくれます。

💡 使い方： <input>や<textarea>タグに付けます。

✅ 結果： 入力欄に薄いグレーの文字でヒントが表示されます（入力すると消えます）

disabled

ボタンや入力欄を無効化（クリックや入力ができない状態）にする属性です。値は不要です。

💡 使い方： タグに disabled と書くだけです。

<button disabled>クリックできません</button> <input type="text" value="編集不可" disabled>  <button id="submitBtn">送信</button> <script> document.getElementById('submitBtn').disabled = true; </script>

✅ 結果： グレーアウトされてクリックや入力ができなくなります

data-* 属性

独自のデータを要素に保存できる属性です。JavaScriptで値を取得して使うことができます。

💡 使い方： data-名前="値" の形式で自由に作れます。

<div data-user-id="12345" data-role="admin">ユーザー情報</div> <button data-action="delete" data-id="100">削除</button>  <script> const div = document.querySelector('div'); console.log(div.dataset.userId); // "12345" console.log(div.dataset.role); // "admin" </script>

✅ 結果： カスタムデータが保存され、JavaScriptから簡単にアクセスできます

📋 メタタグの属性（コード例に出てくる重要属性）

charset="UTF-8"

ページの文字コード（文字の種類）を指定する属性です。UTF-8は日本語を含む世界中の文字を表示できます。これがないと文字化けします。

💡 使い方： <meta charset="UTF-8"> の形で、<head>の最初の方に必ず書きます。

<head> <meta charset="UTF-8"> <title>私のページ</title> </head>

✅ 結果： 日本語や絵文字が正しく表示されます（文字化け防止）

⚠️ 重要： これがないと「譁�蟄怜喧縺�」のような文字化けが起こります！必ず書きましょう

name="viewport" content="width=device-width, initial-scale=1.0"

スマホやタブレットでページを正しく表示するための設定です。これがないとスマホで文字が小さく表示されます。

💡 使い方： <head>内に書きます。レスポンシブデザインに必須です。

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>スマホ対応ページ</title> </head>

✅ 結果： スマホで見やすいサイズで表示されます

📱 解説： width=device-width（デバイスの幅に合わせる）、initial-scale=1.0（拡大率100%）という意味です

name="description" content="ページの説明"

Googleなどの検索結果に表示されるページの説明文を設定します。SEO（検索エンジン最適化）に重要です。

💡 使い方： content属性にページの内容を簡潔に説明する文章を書きます（120文字程度が目安）。

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="初心者向けのHTML/CSS/JavaScript学習サイト。基礎から実践まで丁寧に解説します。"> <title>WebDev Master</title> </head>

✅ 結果： Google検索結果でタイトルの下にこの説明文が表示されます

🔍 SEO効果： わかりやすい説明を書くと、検索結果のクリック率が上がります

lang="ja"

ページの言語を指定する属性です。検索エンジンや音声読み上げソフトがページの言語を理解するために使います。

💡 使い方： <html>タグに付けます。日本語なら"ja"、英語なら"en"です。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>日本語のページ</title> </head> <body> <h1>こんにちは</h1> </body> </html>  <html lang="en">

✅ 結果： 検索エンジンが言語を正しく認識し、音声読み上げも正しい発音になります

🔗 リンクとファイル読み込みの属性

rel="stylesheet"

外部CSSファイルを読み込むための属性です。<link>タグと一緒に使います。

💡 使い方： href属性でCSSファイルの場所を指定し、rel="stylesheet" で「これはスタイルシートだよ」と伝えます。

<head> <meta charset="UTF-8"> <title>ページタイトル</title>  <link rel="stylesheet" href="style.css">  <link rel="stylesheet" href="css/main.css">  <link rel="stylesheet" href="https://cdn.example.com/style.css"> </head>

✅ 結果： CSSファイルが読み込まれて、ページにスタイルが適用されます

💡 ポイント： 複数のCSSファイルを読み込むこともできます（上から順番に適用されます）

rel="preconnect"

外部サイト（Google Fontsなど）への接続を事前に確立して、ページの読み込みを速くする属性です。

💡 使い方： 外部リソースを使う前に、<link rel="preconnect"> で接続を準備します。

✅ 結果： フォントなどの外部リソースが速く読み込まれます

⚡ パフォーマンス： 特にGoogle Fontsを使うときは必ず付けましょう！

crossorigin

別のドメイン（外部サイト）からリソースを安全に読み込むための属性です。特にフォントやAPIで使います。

💡 使い方： 外部リソースを読み込むときに付けます。値は不要な場合も多いです。

✅ 結果： 外部リソースが安全に読み込まれます

🔒 セキュリティ： CORSというセキュリティ機能に関連しています

📝 フォームとインタラクションの属性

type="..." （input要素）

入力欄の種類を指定する属性です。テキスト、メール、パスワード、数字など様々な種類があります。

💡 使い方： <input type="種類"> で入力フォームの種類を指定します。

<input type="text" placeholder="名前">  <input type="email" placeholder="[email protected]">  <input type="password" placeholder="パスワード">  <input type="number" min="0" max="100">  <input type="date">  <input type="checkbox"> 同意する  <input type="radio" name="gender" value="male"> 男性 <input type="radio" name="gender" value="female"> 女性  <input type="file">  <input type="submit" value="送信">

✅ 結果： 指定した種類の入力欄が表示されます（スマホでは適切なキーボードが出ます）

📱 スマホ対応： type="email" はメール用キーボード、type="number" は数字キーボードが出ます

type="..." （button要素）

ボタンの動作の種類を指定します。送信用、リセット用、通常のボタンの3種類があります。

💡 使い方： <button type="種類"> でボタンの動作を指定します。

✅ 結果： button（何もしない）、submit（フォーム送信）、reset（フォームクリア）の動作になります

onclick="JavaScript コード"

要素がクリックされたときに実行するJavaScriptを直接書ける属性です。簡単な処理に便利です。

💡 使い方： onclick="実行したいコード" の形で書きます。

<button onclick="alert('こんにちは！')">挨拶</button>  <p id="text">元のテキスト</p> <button onclick="document.getElementById('text').textContent = '変更後のテキスト'"> 変更 </button>  <button onclick="myFunction()">クリック</button> <script> function myFunction() { alert('関数が実行されました！'); } </script>

✅ 結果： クリックすると指定したJavaScriptが実行されます

💡 ベストプラクティス： 複雑な処理はJavaScriptファイルに書いて、addEventListener を使う方が管理しやすいです

value="値"

入力欄やボタンの初期値を設定する属性です。

💡 使い方： value属性で初期値を設定します。

<input type="text" value="初期テキスト">  <input type="text" value="編集不可" readonly>  <input type="submit" value="送信する"> <input type="button" value="クリック" onclick="alert('押されました')">  <input type="hidden" name="user_id" value="12345">

✅ 結果： 指定した値が入力欄に表示されます

name="名前"

フォーム送信時にデータの名前を指定する属性です。サーバーにデータを送るときに使います。

💡 使い方： 入力欄に name属性を付けると、その名前でデータが送信されます。

✅ 結果： フォーム送信時に name="値" の形式でデータが送られます

🖼️ 画像とメディアの属性

width="幅" height="高さ"

画像やメディアのサイズを指定する属性です。ピクセル単位で指定します。

💡 使い方： width（幅）とheight（高さ）を数値で指定します。

<img src="photo.jpg" alt="写真" width="300" height="200">  <img src="photo.jpg" alt="写真" width="500">  <iframe src="https://www.youtube.com/embed/動画ID" width="560" height="315" frameborder="0" ></iframe>

✅ 結果： 指定したサイズで画像が表示されます

💡 レスポンシブ対応： CSSで max-width: 100% を指定すると、スマホでもはみ出さなくなります

loading="lazy"

画像の遅延読み込み（スクロールして見える位置に来たら読み込む）を有効にする属性です。ページの読み込みが速くなります。

💡 使い方： <img>タグに loading="lazy" を追加するだけです。

<img src="photo1.jpg" alt="写真1" loading="lazy"> <img src="photo2.jpg" alt="写真2" loading="lazy"> <img src="photo3.jpg" alt="写真3" loading="lazy">  <img src="main-image.jpg" alt="メイン画像" loading="eager">

✅ 結果： スクロールして画像が見える位置に来たときに初めて読み込まれ、ページが速くなります

⚡ パフォーマンス： たくさん画像があるページでは必ず使いましょう！

📋 フォームの詳細属性（入力検証・制御）

action="送信先URL" method="送信方法"

フォームのデータをどこに、どのように送信するかを指定します。action は送信先、method は送信方法（GET または POST）です。

💡 使い方： <form> タグに action と method を指定します。

<form action="/login" method="POST"> <input type="text" name="username" placeholder="ユーザー名"> <input type="password" name="password" placeholder="パスワード"> <button type="submit">ログイン</button> </form>  <form action="/search" method="GET"> <input type="text" name="q" placeholder="検索キーワード"> <button type="submit">検索</button> </form>

✅ 結果： フォーム送信時に指定したURLにデータが送られます

🔒 セキュリティ： パスワードなどの機密情報は必ずPOSTを使いましょう（GETはURLに表示されます）

required

入力必須にする属性です。空欄のままフォーム送信しようとするとエラーメッセージが出ます。

💡 使い方： 入力欄に required と書くだけです（値は不要）。

✅ 結果： 空欄のまま送信しようとすると「このフィールドを入力してください」とエラーが出ます

✨ 便利： JavaScriptを書かなくても入力チェックができます

readonly

入力欄を読み取り専用（編集不可）にします。値は表示されますが変更できません。

💡 使い方： 入力欄に readonly と書きます。

<input type="text" value="変更できません" readonly>  <label>ユーザーID:</label> <input type="text" value="USER12345" readonly> <label>変更可能な項目:</label> <input type="text" value="変更できます">

✅ 結果： 値は表示されますが、クリックしても編集できません（グレーアウトせず選択はできます）

💡 disabled との違い： readonly はフォーム送信時にデータが送られますが、disabled は送られません

maxlength="最大文字数" minlength="最小文字数"

入力できる文字数の上限・下限を設定します。

💡 使い方： 数値で最大・最小文字数を指定します。

<input type="text" maxlength="10" placeholder="10文字まで">  <input type="password" minlength="8" maxlength="20" placeholder="パスワード（8〜20文字）" required>  <textarea maxlength="140" placeholder="140文字まで入力できます"></textarea>

✅ 結果： maxlength を超えて入力できなくなり、minlength 未満だと送信時にエラーが出ます

min="最小値" max="最大値" step="増減単位"

数値入力や日付入力の範囲と増減の単位を設定します。

💡 使い方： type="number" や type="date" と一緒に使います。

<input type="number" min="0" max="120" placeholder="年齢">  <input type="number" min="0" step="100" placeholder="価格">  <label>予約日:</label> <input type="date" min="2025-01-01" max="2025-12-31">  <input type="time" step="1800">

✅ 結果： 範囲外の値は入力できず、step で指定した単位で増減します

pattern="正規表現"

入力形式のルールを正規表現で指定します。電話番号や郵便番号などの形式チェックに使います。

💡 使い方： pattern属性に正規表現パターンを書きます。

<input type="text" pattern="\d{3}-\d{4}" placeholder="123-4567" title="123-4567の形式で入力してください">  <input type="tel" pattern="\d{10,11}" placeholder="09012345678">  <input type="text" pattern="[A-Za-z0-9]{8,}" placeholder="ユーザーID">  <input type="text" pattern="[ァ-ヴー]+" placeholder="フリガナ">

✅ 結果： パターンに合わない入力をすると送信時にエラーメッセージが表示されます

💡 ヒント： title属性で詳しい説明を書くと、エラー時に表示されます

autocomplete="on/off"

ブラウザの自動入力補完機能のオン・オフを切り替えます。

💡 使い方： "on"（有効）または "off"（無効）、特定の値（"email"、"username"など）を指定します。

<input type="text" name="name" autocomplete="name" placeholder="名前"> <input type="email" name="email" autocomplete="email" placeholder="メール">  <input type="password" autocomplete="off" placeholder="パスワード"> <input type="text" autocomplete="off" placeholder="ワンタイムコード">  <input type="text" autocomplete="postal-code" placeholder="郵便番号"> <input type="text" autocomplete="address-line1" placeholder="住所">

✅ 結果： ブラウザが過去の入力を記憶して自動補完します（offの場合は補完されません）

autofocus

ページ読み込み時に自動的にその入力欄にフォーカス（カーソルが入る）します。

💡 使い方： 入力欄に autofocus と書くだけです。

<form> <input type="text" name="search" placeholder="検索..." autofocus> <button type="submit">検索</button> </form>

✅ 結果： ページを開いた瞬間、自動的にこの入力欄にカーソルが入ります

⚠️ 注意： 1ページに1つだけ使いましょう。複数あると最初の1つだけが有効になります

accept="ファイル種類"

ファイル選択時に選べるファイルの種類を制限します。

💡 使い方： type="file" の入力欄で、受け入れるファイル形式を指定します。

<input type="file" accept="image/*">  <input type="file" accept="image/jpeg, image/png">  <input type="file" accept="application/pdf">  <input type="file" accept="video/*">  <input type="file" accept=".xlsx, .xls">

✅ 結果： ファイル選択ダイアログで指定した種類のファイルだけが選べるようになります

multiple

複数のファイルや選択肢を選べるようにします。

💡 使い方： type="file" や <select> に multiple と書きます。

<input type="file" multiple accept="image/*">  <input type="email" multiple placeholder="カンマ区切りでメールアドレス">  <select multiple name="hobbies" size="5"> <option value="reading">読書</option> <option value="music">音楽</option> <option value="sports">スポーツ</option> <option value="travel">旅行</option> </select>

✅ 結果： Ctrl（Mac: Command）を押しながら複数選択できます

rows="行数" cols="列数"

テキストエリア（複数行入力欄）のサイズを指定します。

💡 使い方： <textarea> に rows（行数）と cols（列数）を指定します。

<textarea rows="5" cols="30" placeholder="メッセージを入力..."></textarea>  <textarea rows="10" cols="50" placeholder="詳細な説明..."></textarea>

✅ 結果： 指定したサイズのテキストエリアが表示されます

💡 補足： CSSでwidth と height を指定する方が一般的です

🏷️ ラベルとアクセシビリティの属性

for="入力欄のID"

ラベル（説明文）と入力欄を関連付ける属性です。ラベルをクリックすると入力欄にフォーカスします。

💡 使い方： <label for="ID"> と <input id="ID"> を同じIDで結びつけます。

<label for="username">ユーザー名:</label> <input type="text" id="username" name="username">  <input type="checkbox" id="agree" name="agree"> <label for="agree">利用規約に同意します</label>   <input type="radio" id="male" name="gender" value="male"> <label for="male">男性</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">女性</label>

✅ 結果： ラベルをクリックすると入力欄が選択され、使いやすくなります

♿ アクセシビリティ： 視覚障害者のためにも必ず付けましょう

title="説明文"

マウスを載せたときに表示されるツールチップ（説明）を設定します。

💡 使い方： どの要素にも title属性を付けられます。

<button title="このボタンをクリックすると送信されます">送信</button>  <img src="icon.png" alt="設定" title="設定画面を開く">  <abbr title="HyperText Markup Language">HTML</abbr>  <a href="https://example.com" title="外部サイトに移動します">詳しくはこちら</a>

✅ 結果： マウスを載せると黄色い吹き出しで説明が表示されます

tabindex="順番"

Tabキーで移動する順番を指定します。

💡 使い方： 数値で順番を指定します（1, 2, 3...）。0は最後、-1は無効です。

<input type="text" tabindex="1" placeholder="最初"> <input type="text" tabindex="3" placeholder="3番目"> <input type="text" tabindex="2" placeholder="2番目">  <button tabindex="-1">無効なボタン</button>

✅ 結果： Tabキーで指定した順番に入力欄を移動できます

role="役割" aria-*="値"

スクリーンリーダー（視覚障害者用の読み上げソフト）に要素の役割を伝えるアクセシビリティ属性です。

💡 使い方： role で役割を、aria-* で追加情報を指定します。

<nav role="navigation" aria-label="メインメニュー"> <a href="#">ホーム</a> <a href="#">について</a> </nav>  <button role="button" aria-pressed="false">トグル</button>  <input type="text" aria-required="true" placeholder="名前（必須）">  <input type="password" aria-describedby="password-help"> <span id="password-help">8文字以上で入力してください</span>  <div role="status" aria-live="polite">読み込み中...</div>

✅ 結果： スクリーンリーダーが要素の役割や状態を正しく読み上げます

♿ 重要： アクセシビリティ向上のために、特にWebアプリでは重要です

🎬 動画・音声の属性

autoplay

動画や音声を自動再生します。

💡 使い方： <video> や <audio> に autoplay と書きます。

<video src="movie.mp4" autoplay></video>  <video src="movie.mp4" autoplay muted></video>  <audio src="music.mp3" autoplay></audio>

✅ 結果： ページを開くと自動的に再生が始まります

⚠️ 注意： 多くのブラウザは音声ありの自動再生をブロックします。muted（消音）と併用しましょう

controls

動画や音声の再生コントロール（再生ボタン、音量など）を表示します。

💡 使い方： controls と書くだけです。

<video src="movie.mp4" controls width="640" height="360"></video>  <audio src="podcast.mp3" controls></audio>

✅ 結果： 再生・一時停止・音量調整などのコントロールバーが表示されます

loop

動画や音声をループ再生（繰り返し再生）します。

💡 使い方： loop と書くだけです。

<video src="background.mp4" autoplay loop muted></video>  <audio src="bgm.mp3" autoplay loop></audio>

✅ 結果： 再生が終わると自動的に最初から再び再生されます

muted

動画や音声を消音（ミュート）にします。

💡 使い方： muted と書くだけです。

<video src="promo.mp4" autoplay muted loop></video>

✅ 結果： 音声なしで再生されます

poster="画像URL"

動画の再生前に表示されるサムネイル画像を指定します。

💡 使い方： poster属性に画像のURLを指定します。

✅ 結果： 再生前に指定した画像が表示されます

preload="読み込み方法"

動画の事前読み込み方法を指定します。

💡 使い方： "none"（読み込まない）、"metadata"（メタデータのみ）、"auto"（全て読み込む）のいずれかを指定します。

<video src="movie.mp4" controls preload="metadata"></video>  <video src="movie.mp4" controls preload="auto"></video>  <video src="movie.mp4" controls preload="none"></video>

✅ 結果： 指定した方法で動画を読み込みます

⚙️ スクリプトとリンクの高度な属性

async / defer

JavaScriptファイルの読み込み方法を制御します。ページの表示速度が向上します。

💡 使い方： <script> タグに async または defer を付けます。

<script src="analytics.js" async></script>  <script src="app.js" defer></script>  <script src="old-script.js"></script>

✅ 結果： async/defer を使うとページ表示が速くなります

⚡ 推奨： 基本的に defer を使いましょう。順番が重要でないスクリプトには async を使います

download="ファイル名"

リンクをクリックしたときに、ページ遷移せずにファイルをダウンロードします。

💡 使い方： <a> タグに download属性を付けます。

<a href="document.pdf" download>PDFをダウンロード</a>  <a href="report-2025.pdf" download="年次レポート.pdf">レポートをダウンロード</a>  <a href="photo.jpg" download="my-photo.jpg">画像を保存</a>

✅ 結果： クリックするとファイルがダウンロードされます

📊 テーブルの属性

colspan="列数" rowspan="行数"

テーブルのセル（マス）を結合します。colspan は横方向、rowspan は縦方向の結合です。

💡 使い方： <td> や <th> に colspan/rowspan で結合する数を指定します。

<table border="1"> <tr> <th colspan="2">2列結合の見出し</th> </tr> <tr> <td>セル1</td> <td>セル2</td> </tr> <tr> <td rowspan="2">2行結合</td> <td>セル3</td> </tr> <tr> <td>セル4</td> </tr> </table>

✅ 結果： セルが結合されて1つの大きなセルになります

scope="範囲"

テーブルの見出しセルが行・列のどちらの見出しかを明示します（アクセシビリティ向上）。

💡 使い方： <th> に scope="row" または scope="col" を指定します。

✅ 結果： スクリーンリーダーがテーブルを正しく読み上げます

🎭 その他の便利な属性

contenteditable="true"

どの要素でも編集可能にします。クリックして直接テキストを編集できます。

💡 使い方： どの要素にも contenteditable="true" を付けられます。

<h1 contenteditable="true">このテキストは編集できます</h1>  <div contenteditable="true" style="border: 1px solid #ccc; padding: 10px; min-height: 100px;"> ここにメモを書けます </div>

✅ 結果： クリックすると直接テキストを編集できます

draggable="true"

要素をドラッグ&ドロップできるようにします。

💡 使い方： draggable="true" を付けます。

<div draggable="true" style="background: lightblue; padding: 20px; width: 100px;"> ドラッグできます </div>

✅ 結果： 要素をドラッグできます（JavaScriptで処理を追加すると完全なドラッグ&ドロップが実現できます）

hidden

要素を非表示にします（DOMには存在するが画面に表示されない）。

💡 使い方： hidden と書くだけです。

<div id="secret" hidden> 隠された内容 </div> <button onclick="document.getElementById('secret').hidden = false"> 表示する </button>

✅ 結果： 要素が完全に非表示になります

💡 CSS の display: none との違い： hidden は意味的に「存在しない」、display: none は単に「見えない」です

spellcheck="true/false"

スペルチェック機能のオン・オフを切り替えます。

💡 使い方： 入力欄に spellcheck="true" または "false" を指定します。

<textarea spellcheck="true" placeholder="英語のテキスト..."></textarea>  <textarea spellcheck="false" placeholder="コードを入力..."></textarea>

✅ 結果： スペルミスがあると赤い波線が表示されます（有効時）

translate="yes/no"

ブラウザの自動翻訳機能で翻訳するかどうかを指定します。

💡 使い方： translate="no" で翻訳を防ぎます。

<h1 translate="no">WebDev Master</h1>  <p translate="yes">これは翻訳されます</p>

✅ 結果： Google翻訳などで translate="no" の部分は翻訳されません

frameborder="0" allowfullscreen

iframe（他のページの埋め込み）の枠線と全画面表示を制御します。

💡 使い方： <iframe> に frameborder と allowfullscreen を指定します。

<iframe src="https://www.youtube.com/embed/動画ID" width="560" height="315" frameborder="0" allowfullscreen ></iframe>  <iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450" frameborder="0" ></iframe>

✅ 結果： 枠線なしで埋め込まれ、全画面表示ボタンが使えます

🎨 文字のスタイル

color（文字の色）

文字の色を変えます。色の名前、カラーコード、RGB値で指定できます。

💡 使い方： 要素のstyle属性に書くか、CSSファイルで指定します。

<p style="color: red;">赤い文字</p> <p style="color: #0000ff;">青い文字</p> /* CSSファイル */ h1 { color: blue; }

✅ 結果： 指定した色で文字が表示されます

font-size（文字の大きさ）

文字のサイズを変更します。

💡 使い方： px（ピクセル）やem、remという単位で大きさを指定します。

<p style="font-size: 12px;">小さい文字</p> <p style="font-size: 16px;">普通の文字</p> <p style="font-size: 24px;">大きい文字</p>

✅ 結果： サイズの違う文字が表示されます

background-color（背景色）

要素の背景に色を付けます。

💡 使い方： 色の名前やカラーコードで指定します。

<div style="background-color: yellow; padding: 20px;"> 黄色い背景 </div> <div style="background-color: #ff6b6b; padding: 20px; color: white;"> 赤っぽい背景 </div>

✅ 結果： 背景に色が付きます

border-radius（角を丸く）

要素の角を丸くします。

💡 使い方： 丸みの大きさをpxで指定します。

<div style=" width: 200px; height: 100px; background-color: skyblue; border-radius: 10px; padding: 20px; "> 角が少し丸い </div>

✅ 結果： 角が丸くなります（50%で円になります）

box-shadow（影）

要素に影を付けて立体的に見せます。

💡 使い方： 横、縦、ぼかし、色の順で指定します。

✅ 結果： 要素に影が付いて浮いて見えます

🎨 色の指定方法

色の名前（color names）

英語の色名で指定する一番シンプルな方法です。140以上の色が用意されています。

💡 使い方： red、blue、greenなどの英単語で指定します。

/* よく使う色の名前 */ color: red; /* 赤 */ color: blue; /* 青 */ color: green; /* 緑 */ color: white; /* 白 */ color: black; /* 黒 */ color: gray; /* グレー */ color: yellow; /* 黄色 */ color: orange; /* オレンジ */ color: purple; /* 紫 */ color: pink; /* ピンク */ color: brown; /* 茶色 */ color: skyblue; /* 空色 */ color: lightgray; /* 薄いグレー */ color: darkblue; /* 濃い青 */

✅ 結果： 指定した色が適用されます

16進数カラーコード（HEX）

# に続けて6桁の英数字で色を指定する方法です。デザインツールでよく使われます。

💡 使い方： #RRGGBB の形式（赤・緑・青の順）で指定します。

/* よく使うカラーコード */ color: #ff0000; /* 赤 */ color: #00ff00; /* 緑 */ color: #0000ff; /* 青 */ color: #ffffff; /* 白 */ color: #000000; /* 黒 */ color: #808080; /* グレー */ color: #ffff00; /* 黄色 */ color: #ff6b6b; /* 柔らかい赤 */ color: #4ecdc4; /* ターコイズ */ color: #95e1d3; /* ミント */ color: #f38181; /* サーモンピンク */ color: #6c5ce7; /* 紫 */ /* 短縮形（同じ数字が続く場合） */ color: #f00; /* #ff0000 と同じ（赤） */ color: #0f0; /* #00ff00 と同じ（緑） */ color: #fff; /* #ffffff と同じ（白） */

✅ ポイント： デザインツール（Figma、Photoshopなど）からコピーして使えます

RGB・RGBA

赤（Red）、緑（Green）、青（Blue）の量を0〜255で指定する方法。RGBAは透明度も指定できます。

💡 使い方： rgb(赤, 緑, 青) または rgba(赤, 緑, 青, 透明度) で指定します。

/* RGB で色指定 */ color: rgb(255, 0, 0); /* 赤 */ color: rgb(0, 255, 0); /* 緑 */ color: rgb(0, 0, 255); /* 青 */ color: rgb(128, 128, 128); /* グレー */ /* RGBA で透明度も指定（0が透明、1が不透明） */ background-color: rgba(255, 0, 0, 0.5); /* 半透明の赤 */ background-color: rgba(0, 0, 0, 0.8); /* 80%不透明の黒 */ background-color: rgba(255, 255, 255, 0.3);/* 30%不透明の白 */ /* 重ね合わせの例 */ .overlay { background-color: rgba(0, 0, 0, 0.5); /* 暗いオーバーレイ */ }

✅ 結果： 透明度付きの色が使えて、重ね合わせができます

グラデーション（linear-gradient）

複数の色を滑らかに混ぜ合わせるグラデーションを作ります。

💡 使い方： linear-gradient(方向, 色1, 色2, ...) で指定します。

/* 上から下へのグラデーション */ background: linear-gradient(to bottom, #667eea, #764ba2); /* 左から右へのグラデーション */ background: linear-gradient(to right, red, yellow); /* 斜めのグラデーション */ background: linear-gradient(45deg, #f093fb, #f5576c); /* 3色以上のグラデーション */ background: linear-gradient(to right, red, yellow, green, blue); /* 虹色グラデーション */ background: linear-gradient( to right, violet, indigo, blue, green, yellow, orange, red ); /* モダンなグラデーション例 */ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

✅ 結果： 美しいグラデーション背景が作れます

📏 サイズの単位

px（ピクセル）

画面上の点（ピクセル）の数で大きさを指定します。固定サイズです。

💡 使い方： 数値 + px で指定します。

/* 文字サイズ */ font-size: 16px; /* 基本サイズ */ font-size: 24px; /* 大きめ */ font-size: 12px; /* 小さめ */ /* 幅と高さ */ width: 200px; height: 100px; /* 余白 */ padding: 20px; margin: 10px;

✅ ポイント： ボーダーや細かい調整に最適。レスポンシブには向きません

%（パーセント）

親要素のサイズに対する割合で指定します。画面サイズに合わせて変化します。

💡 使い方： 数値 + % で指定します。

/* 親要素の50%の幅 */ width: 50%; /* 画面全体の幅 */ width: 100%; /* 親要素の高さの80% */ height: 80%; /* 実用例：2カラムレイアウト */ .sidebar { width: 30%; } .main-content { width: 70%; }

✅ 結果： 画面サイズに応じて自動で調整されます

rem（レム）

ルート要素（html）の文字サイズを基準にした単位です。アクセシビリティに優れています。

💡 使い方： 数値 + rem で指定。通常 1rem = 16px です。

/* ルートのサイズ設定 */ html { font-size: 16px; /* 1rem = 16px */ } /* remでサイズ指定 */ h1 { font-size: 2rem; /* 32px */ } p { font-size: 1rem; /* 16px */ } small { font-size: 0.875rem; /* 14px */ } /* 余白もremで */ padding: 1.5rem; /* 24px */ margin: 2rem 0; /* 32px 0 */

✅ ベストプラクティス： モダンなサイトではremを推奨！ユーザーの設定を尊重できます

vh・vw（ビューポート単位）

画面（ビューポート）の高さ・幅を基準にした単位。100vh = 画面全体の高さ、100vw = 画面全体の幅です。

💡 使い方： 数値 + vh または vw で指定します。

/* 画面全体の高さ */ .hero { height: 100vh; background: linear-gradient(135deg, #667eea, #764ba2); } /* 画面の半分の高さ */ .section { height: 50vh; } /* 画面幅いっぱい */ .full-width { width: 100vw; } /* 実用例：フルスクリーンヒーロー */ .hero-section { height: 100vh; display: flex; align-items: center; justify-content: center; }

✅ 結果： どんな画面サイズでも画面いっぱいに表示されます

✨ よく使うCSS値

box-shadow（影の値）

要素に影を付けるときの値の指定方法です。複数の値を組み合わせます。

💡 使い方： 横縦ぼかし広がり色の順で指定します。

/* 基本の影 */ box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 柔らかい影 */ box-shadow: 0 4px 6px rgba(0,0,0,0.07); /* はっきりした影 */ box-shadow: 0 10px 20px rgba(0,0,0,0.3); /* カードの影 */ box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); /* 浮き上がる影 */ box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); /* 内側の影 */ box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); /* 色付き影 */ box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);

✅ ポイント： 4番目の値（広がり）は省略可能です

transform（変形の値）

要素を回転、拡大、移動などの変形ができます。

💡 使い方： transform: 変形の種類() で指定します。

/* 拡大 */ transform: scale(1.2); /* 1.2倍 */ transform: scale(0.8); /* 0.8倍（縮小） */ /* 回転 */ transform: rotate(45deg); /* 45度回転 */ transform: rotate(-90deg); /* -90度回転 */ /* 移動 */ transform: translateX(20px); /* 横に20px */ transform: translateY(-10px); /* 上に10px */ transform: translate(20px, 10px); /* 横20px、縦10px */ /* 複数の変形を組み合わせ */ transform: translate(20px, 0) rotate(10deg) scale(1.1); /* ホバー時の拡大アニメーション */ .card:hover { transform: scale(1.05); transition: transform 0.3s; }

✅ 結果： 要素が動的に変形します

transition（アニメーション時間）

変化をスムーズにアニメーションさせる時間を指定します。

💡 使い方： transition: プロパティ時間イージングで指定します。

/* 基本 */ transition: all 0.3s; /* 特定のプロパティだけ */ transition: background-color 0.5s; transition: transform 0.3s; /* 複数指定 */ transition: background-color 0.3s, transform 0.3s; /* イージング（動きの種類）付き */ transition: all 0.3s ease; /* 自然な動き */ transition: all 0.3s ease-in-out; /* 始まりと終わりがゆっくり */ transition: all 0.3s linear; /* 一定速度 */ /* 実用例：ボタンのホバー効果 */ .button { background-color: blue; transition: all 0.3s ease; } .button:hover { background-color: darkblue; transform: translateY(-2px); }

✅ 結果： 変化が滑らかになります（0.3s = 0.3秒）

📱 レスポンシブデザイン

メディアクエリ（@media）

画面サイズによってスタイルを変更する技術です。スマホ、タブレット、PCで最適な表示ができます。

💡 使い方： @media (条件) { スタイル } で画面サイズごとのスタイルを書きます。

/* 基本の構造 */ /* モバイルファースト（スマホ用を基本に） */ .container { width: 100%; padding: 10px; } /* タブレット以上（768px以上） */ @media (min-width: 768px) { .container { width: 750px; padding: 20px; } } /* PC（1024px以上） */ @media (min-width: 1024px) { .container { width: 1000px; padding: 40px; } } /* よく使うブレークポイント */ /* スマホ: 〜767px */ /* タブレット: 768px〜1023px */ /* PC: 1024px〜 */ /* 実用例：ナビゲーション */ .nav { flex-direction: column; /* スマホは縦並び */ } @media (min-width: 768px) { .nav { flex-direction: row; /* PCは横並び */ } }

✅ 結果： どの端末でも見やすいサイトになります

📱 ベストプラクティス： モバイルファーストで作りましょう！まずスマホ用を作ってから大画面用を追加します

レスポンシブ画像

画像を画面サイズに合わせて自動調整する技術です。

💡 使い方： max-width: 100% と height: auto を使います。

/* 基本のレスポンシブ画像 */ img { max-width: 100%; height: auto; } /* 親要素に合わせる */ .image-container img { width: 100%; height: auto; display: block; } /* アスペクト比を保ったまま切り抜き */ .cover-image { width: 100%; height: 300px; object-fit: cover; /* 画像を切り抜いて埋める */ } /* 画像を含む形で全体表示 */ .contain-image { width: 100%; height: 300px; object-fit: contain; /* 全体が見える */ }

✅ 結果： 画像が画面サイズに合わせて自動調整されます

📐 Flexbox レイアウト

display: flex（フレックスボックス）

要素を横並びや縦並びにする最も便利なレイアウト方法です。

💡 使い方： 親要素に display: flex を指定すると、子要素が自動で並びます。

/* 基本の横並び */ .container { display: flex; } /* 中央揃え（超重要！） */ .center { display: flex; justify-content: center; /* 横方向の中央 */ align-items: center; /* 縦方向の中央 */ } /* 両端揃え */ .space-between { display: flex; justify-content: space-between; /* 両端に配置、間は均等 */ } /* 縦並び */ .vertical { display: flex; flex-direction: column; } /* 折り返し */ .wrap { display: flex; flex-wrap: wrap; /* 入りきらない場合は次の行へ */ } /* 実用例：ナビゲーションバー */ .navbar { display: flex; justify-content: space-between; align-items: center; padding: 20px; }

✅ 結果： レイアウトが簡単に整います

gap（要素の間隔）

Flexboxの子要素間の隙間を簡単に設定できます。

💡 使い方： display: flex の親要素に gap を指定します。

/* 基本 */ .container { display: flex; gap: 20px; /* 要素間に20pxの隙間 */ } /* 縦横で違う値 */ .container { display: flex; gap: 10px 20px; /* 縦10px 横20px */ } /* 実用例：カードグリッド */ .card-grid { display: flex; flex-wrap: wrap; gap: 30px; } .card { width: calc(33.333% - 20px); /* 3列表示 */ }

✅ ポイント： marginより簡単で直感的です

🎯 Grid レイアウト

display: grid（グリッドレイアウト）

複雑な2次元レイアウトを作る最強の方法です。行と列を自由に配置できます。

💡 使い方： 親要素に display: grid を指定し、列や行を定義します。

/* 基本の3列グリッド */ .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; /* 3等分 */ gap: 20px; } /* 異なる幅の列 */ .grid { display: grid; grid-template-columns: 200px 1fr 300px; /* 固定・可変・固定 */ gap: 20px; } /* repeat で簡潔に */ .grid { display: grid; grid-template-columns: repeat(3, 1fr); /* 3列 */ gap: 20px; } /* 自動調整グリッド（超便利！） */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } /* これで画面幅に応じて自動で列数が変わります */ /* 実用例：ダッシュボード */ .dashboard { display: grid; grid-template-columns: 250px 1fr; /* サイドバー＋メイン */ grid-template-rows: 60px 1fr; /* ヘッダー＋コンテンツ */ gap: 20px; height: 100vh; }

✅ 結果： 複雑なレイアウトも簡単に作れます

✨ ホバー効果とアニメーション

:hover（ホバー効果）

マウスが要素の上に来たときのスタイルを設定します。インタラクティブなサイトに必須です。

💡 使い方： セレクタ:hover { スタイル } で指定します。transitionと組み合わせると滑らかに変化します。

/* ボタンのホバー効果 */ .button { background-color: #4CAF50; color: white; padding: 15px 30px; border: none; border-radius: 5px; transition: all 0.3s; } .button:hover { background-color: #45a049; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.3); } /* カードの浮き上がり効果 */ .card { transition: transform 0.3s, box-shadow 0.3s; } .card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.2); } /* リンクの下線アニメーション */ .link { position: relative; text-decoration: none; } .link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: blue; transition: width 0.3s; } .link:hover::after { width: 100%; }

✅ 結果： インタラクティブで魅力的なUIになります

@keyframes（キーフレームアニメーション）

複雑なアニメーションを作成できます。要素を動かしたり、回転させたり自由自在です。

💡 使い方： @keyframes でアニメーションを定義し、animation で適用します。

/* フェードイン */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .element { animation: fadeIn 1s ease; } /* スライドイン */ @keyframes slideIn { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .slide-element { animation: slideIn 0.5s ease; } /* 回転するローディング */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .loader { animation: spin 1s linear infinite; /* 無限ループ */ } /* バウンス効果 */ @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } .bounce-element { animation: bounce 1s ease infinite; }

✅ 結果： プロフェッショナルなアニメーションが作れます

backdrop-filter（ガラス効果）

背景にぼかしや色調整を加えて、モダンなガラスのような効果を作ります。

💡 使い方： backdrop-filter: blur() で背景をぼかします。半透明背景と組み合わせます。

/* ガラスモーフィズム（最新トレンド！） */ .glass-card { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 15px; padding: 30px; } /* 暗いガラス効果 */ .dark-glass { background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(15px); border-radius: 20px; } /* ナビゲーションバー */ .navbar { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); position: sticky; top: 0; }

✅ 結果： 2024年のトレンド「ガラスモーフィズム」デザインが実現します

🎨 デザインのベストプラクティス

カラーパレットの作り方

統一感のある色使いでプロフェッショナルなサイトを作る方法です。

💡 使い方： CSS変数（カスタムプロパティ）を使って色を管理します。

/* カラーパレットを定義 */ :root { /* メインカラー */ --primary: #6366f1; --primary-dark: #4f46e5; --primary-light: #818cf8; /* アクセントカラー */ --accent: #ec4899; /* グレースケール */ --white: #ffffff; --gray-100: #f3f4f6; --gray-500: #6b7280; --gray-900: #111827; /* ステータスカラー */ --success: #10b981; --warning: #f59e0b; --error: #ef4444; } /* 使用例 */ .button-primary { background-color: var(--primary); color: var(--white); } .button-primary:hover { background-color: var(--primary-dark); } .alert-success { background-color: var(--success); color: var(--white); }

✅ ポイント： 色を一箇所で管理でき、変更も簡単です

🎨 ツール： coolors.co や Adobe Color で美しいカラーパレットを作れます

余白（ホワイトスペース）の使い方

適切な余白でプロフェッショナルなデザインにする技術です。

💡 使い方： 8の倍数ルールを使うと統一感が出ます。

/* 余白のルール（8の倍数） */ :root { --spacing-xs: 8px; --spacing-sm: 16px; --spacing-md: 24px; --spacing-lg: 32px; --spacing-xl: 48px; --spacing-2xl: 64px; } /* 使用例 */ .card { padding: var(--spacing-lg); /* 32px */ margin-bottom: var(--spacing-md); /* 24px */ } .section { padding: var(--spacing-2xl) 0; /* 上下64px */ } /* 悪い例 */ .bad { padding: 13px 19px 22px 15px; /* バラバラで統一感なし */ } /* 良い例 */ .good { padding: 16px 24px; /* 8の倍数で統一感 */ }

✅ 結果： プロっぽい整ったデザインになります

タイポグラフィ（文字の整え方）

読みやすく美しい文字組みの技術です。

💡 使い方： フォントサイズ、行間、行の長さを最適化します。

/* 基本設定 */ body { font-family: 'Noto Sans JP', sans-serif; font-size: 16px; line-height: 1.6; /* 行間は1.5〜1.8が読みやすい */ color: #333; } /* 見出しのスケール */ h1 { font-size: 2.5rem; /* 40px */ line-height: 1.2; margin-bottom: 1rem; } h2 { font-size: 2rem; /* 32px */ line-height: 1.3; margin-bottom: 0.75rem; } h3 { font-size: 1.5rem; /* 24px */ line-height: 1.4; } /* 読みやすい段落 */ p { max-width: 65ch; /* 1行65文字まで（読みやすさの限界） */ margin-bottom: 1em; } /* Google Fontsの使用例 */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap'); body { font-family: 'Poppins', sans-serif; }

✅ 結果： 読みやすく美しいテキストになります

🎭 CSS Transform テクニック集

transform: rotate()（回転）

要素を回転させます。角度はdeg（度）で指定します。

💡 使い方： transform: rotate(角度deg) で回転させます。

/* 45度回転 */ .rotate-45 { transform: rotate(45deg); } /* アイコンのホバー回転 */ .icon { transition: transform 0.3s; } .icon:hover { transform: rotate(180deg); } /* ローディングスピナー */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .spinner { animation: spin 1s linear infinite; }

✅ 結果： 要素が回転します

transform: scale()（拡大縮小）

要素のサイズを変更します。1が元のサイズ、2で2倍、0.5で半分です。

💡 使い方： transform: scale(倍率) で拡大縮小します。

/* 1.2倍に拡大 */ .scale-up { transform: scale(1.2); } /* ボタンのホバー拡大 */ .button { transition: transform 0.3s; } .button:hover { transform: scale(1.1); } /* 横だけ拡大 */ .scale-x { transform: scaleX(1.5); } /* 縦だけ拡大 */ .scale-y { transform: scaleY(1.5); }

✅ 結果： 要素が拡大縮小します

transform: translate()（移動）

要素を移動させます。positionを使わずに位置を変更できます。

💡 使い方： transform: translate(X, Y) で移動します。

/* 右に50px、下に30px移動 */ .move { transform: translate(50px, 30px); } /* 上に浮かぶ効果 */ .card { transition: transform 0.3s; } .card:hover { transform: translateY(-10px); } /* 中央配置 */ .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

✅ ポイント： 中央配置の定番テクニックです

transform: skew()（傾斜）

要素を斜めに傾けます。斬新なデザインに使えます。

💡 使い方： transform: skew(X角度, Y角度) で傾けます。

/* X方向に20度傾ける */ .skew-x { transform: skewX(20deg); } /* Y方向に10度傾ける */ .skew-y { transform: skewY(10deg); } /* 平行四辺形のボタン */ .parallelogram { transform: skew(-20deg); padding: 15px 30px; } .parallelogram span { display: inline-block; transform: skew(20deg); }

✅ 結果： ユニークな斜めデザインになります

複数のtransform組み合わせ

複数のtransformを同時に適用できます。

💡 使い方： スペースで区切って複数指定します。

/* 回転＋拡大 */ .combo-1 { transform: rotate(45deg) scale(1.5); } /* 移動＋回転 */ .combo-2 { transform: translate(50px, 0) rotate(30deg); } /* カードの3Dめくれ効果 */ .card-flip { transition: transform 0.6s; } .card-flip:hover { transform: rotateY(180deg) scale(1.1); }

✅ 注意： 順番が重要です！結果が変わることがあります

transform-origin（変形の基準点）

回転や拡大の中心点を変更します。

💡 使い方： transform-origin: X Y で基準点を設定します。

/* 左上を基準に回転 */ .rotate-corner { transform-origin: top left; transform: rotate(45deg); } /* 右側を基準に拡大 */ .scale-right { transform-origin: right center; transform: scale(1.5); } /* ドアの開閉効果 */ .door { transform-origin: left center; transition: transform 0.5s; } .door:hover { transform: rotateY(-90deg); }

✅ 結果： より自然なアニメーションになります

3D transform: rotateX/Y/Z

3D空間での回転を実現します。立体的な効果が作れます。

💡 使い方： perspective と組み合わせて使います。

/* 3D回転の準備 */ .container-3d { perspective: 1000px; } /* X軸回転（上下に回転） */ .rotate-x { transform: rotateX(45deg); } /* Y軸回転（左右に回転） */ .rotate-y { transform: rotateY(45deg); } /* Z軸回転（平面回転） */ .rotate-z { transform: rotateZ(45deg); } /* カードフリップ */ .card-3d { transition: transform 0.6s; transform-style: preserve-3d; } .card-3d:hover { transform: rotateY(180deg); }

✅ 結果： 立体的な動きが実現します

perspective（遠近法）

3D transformに奥行き感を与えます。

💡 使い方： 親要素に perspective を設定します。

/* 遠近法を適用 */ .scene { perspective: 500px; /* 小さいほど強い遠近感 */ } /* 3D空間の要素 */ .cube { transform-style: preserve-3d; transform: rotateX(30deg) rotateY(45deg); } /* カルーセルの3D効果 */ .carousel { perspective: 1000px; } .carousel-item { transition: transform 0.5s; } .carousel-item:hover { transform: translateZ(50px); }

✅ ポイント： 値が小さいほど遠近感が強くなります

backface-visibility（裏面の表示制御）

3D回転したときの裏面を隠すかどうかを制御します。

💡 使い方： backface-visibility: hidden で裏面を非表示にします。

/* フリップカードの表面 */ .card-front { backface-visibility: hidden; position: absolute; } /* フリップカードの裏面 */ .card-back { backface-visibility: hidden; transform: rotateY(180deg); } /* カード全体 */ .flip-card { position: relative; transform-style: preserve-3d; transition: transform 0.6s; } .flip-card:hover { transform: rotateY(180deg); }

✅ 結果： きれいなカードフリップアニメーションができます

matrix()（行列変換）

すべての2D transformを1つで表現できる高度な方法です。

💡 使い方： transform: matrix(a, b, c, d, e, f) で複雑な変形を一度に指定します。

/* 回転＋拡大＋移動を1つで */ .matrix-transform { transform: matrix(1.5, 0.5, -0.5, 1.5, 30, 30); } /* これは以下と同等： */ .equivalent { transform: scale(1.5) rotate(30deg) translate(30px, 30px); } /* 3D版 */ .matrix-3d { transform: matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1); }

✅ 注意： 高度な技術なので、通常は他のtransformを使う方が簡単です

🎨 CSS Filter エフェクト

filter: blur()（ぼかし）

要素をぼかします。背景ぼかしやフォーカス効果に使います。

💡 使い方： filter: blur(ピクセル数) でぼかします。

/* 軽いぼかし */ .blur-light { filter: blur(2px); } /* 強いぼかし */ .blur-heavy { filter: blur(10px); } /* ホバーでフォーカス */ .image { filter: blur(5px); transition: filter 0.3s; } .image:hover { filter: blur(0); } /* ローディング中の背景 */ .loading-bg { filter: blur(8px); pointer-events: none; }

✅ 結果： 要素がぼやけます

filter: brightness()（明るさ）

要素の明るさを調整します。

💡 使い方： filter: brightness(%) で明るさを変更します。

/* 暗くする */ .dark { filter: brightness(50%); } /* 明るくする */ .bright { filter: brightness(150%); } /* 画像のホバー効果 */ .img-hover { filter: brightness(70%); transition: filter 0.3s; } .img-hover:hover { filter: brightness(100%); } /* 無効化されたボタン */ .button:disabled { filter: brightness(80%); cursor: not-allowed; }

✅ 結果： 明るさが変わります（100%が通常）

filter: contrast()（コントラスト）

色の明暗差を強調します。

💡 使い方： filter: contrast(%) でコントラストを調整します。

/* コントラスト強化 */ .high-contrast { filter: contrast(150%); } /* コントラスト弱化 */ .low-contrast { filter: contrast(50%); } /* 写真のような効果 */ .photo-effect { filter: contrast(120%) brightness(110%); } /* ホバーで鮮明に */ .image { filter: contrast(80%); transition: filter 0.3s; } .image:hover { filter: contrast(100%); }

✅ 結果： 画像がくっきり or ぼんやりします

filter: grayscale()（グレースケール）

要素を白黒にします。

💡 使い方： filter: grayscale(%) で白黒度を指定します。

/* 完全に白黒 */ .grayscale { filter: grayscale(100%); } /* 50%白黒 */ .half-gray { filter: grayscale(50%); } /* ホバーでカラーに戻る */ .image { filter: grayscale(100%); transition: filter 0.3s; } .image:hover { filter: grayscale(0%); } /* 無効な要素 */ .disabled { filter: grayscale(100%); opacity: 0.6; }

✅ 結果： 白黒になります

filter: hue-rotate()（色相回転）

色を変更します。カラフルな効果を作れます。

💡 使い方： filter: hue-rotate(角度deg) で色を回転させます。

/* 90度回転 */ .hue-90 { filter: hue-rotate(90deg); } /* 180度回転（反対色） */ .hue-180 { filter: hue-rotate(180deg); } /* アニメーション */ @keyframes rainbow { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } } .rainbow { animation: rainbow 3s linear infinite; } /* ホバーで色変化 */ .icon:hover { filter: hue-rotate(45deg); }

✅ 結果： 色が変わります

filter: saturate()（彩度）

色の鮮やかさを調整します。

💡 使い方： filter: saturate(%) で彩度を変更します。

/* 鮮やかに */ .vibrant { filter: saturate(200%); } /* 彩度を下げる */ .desaturate { filter: saturate(30%); } /* ホバーで鮮明に */ .image { filter: saturate(50%); transition: filter 0.3s; } .image:hover { filter: saturate(150%); } /* インスタ風フィルター */ .instagram { filter: saturate(120%) contrast(110%); }

✅ 結果： 色が鮮やかになったり、くすんだりします

filter: sepia()（セピア調）

古い写真のようなセピア色にします。

💡 使い方： filter: sepia(%) でセピア度を指定します。

/* 完全セピア */ .sepia { filter: sepia(100%); } /* 軽いセピア */ .light-sepia { filter: sepia(50%); } /* ヴィンテージ風 */ .vintage { filter: sepia(80%) contrast(90%) brightness(110%); } /* ホバーで通常に */ .image { filter: sepia(100%); transition: filter 0.3s; } .image:hover { filter: sepia(0%); }

✅ 結果： レトロな雰囲気になります

filter: invert()（色反転）

色を反転させます。ダークモードなどに使えます。

💡 使い方： filter: invert(%) で反転度を指定します。

/* 完全反転 */ .invert { filter: invert(100%); } /* 部分反転 */ .half-invert { filter: invert(50%); } /* ダークモード切り替え */ .dark-mode { filter: invert(100%) hue-rotate(180deg); } /* アイコンの色変更 */ .icon-white { filter: invert(100%); }

✅ 結果： 白黒が反転します

filter: opacity()（透明度）

要素を透明にします。opacity プロパティと似ていますが、filterとして使えます。

💡 使い方： filter: opacity(%) で透明度を指定します。

/* 半透明 */ .semi-transparent { filter: opacity(50%); } /* ほぼ透明 */ .almost-invisible { filter: opacity(10%); } /* フェードイン効果 */ .fade { filter: opacity(0%); transition: filter 0.5s; } .fade.show { filter: opacity(100%); } /* 複数フィルターと組み合わせ */ .combo { filter: opacity(80%) blur(2px); }

✅ ポイント： 通常は opacity プロパティの方が一般的です

filter: drop-shadow()（ドロップシャドウ）

要素の形に沿った影をつけます。box-shadowより柔軟です。

💡 使い方： filter: drop-shadow(X Y ぼかし色) で影を作ります。

/* 基本の影 */ .shadow { filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); } /* 大きな影 */ .big-shadow { filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5)); } /* カラフルな影 */ .colored-shadow { filter: drop-shadow(0 0 10px #ff00ff); } /* PNG画像の影（box-shadowではできない） */ .png-shadow { filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5)); } /* ホバーで影を強調 */ .card { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); transition: filter 0.3s; } .card:hover { filter: drop-shadow(0 8px 16px rgba(0,0,0,0.2)); }

✅ ポイント： 透過PNG画像にも影がつけられます！

複数filterの組み合わせ

複数のfilterを同時に適用して独自の効果を作れます。

💡 使い方： スペースで区切って複数のfilterを指定します。

/* インスタグラム風フィルター */ .instagram-filter { filter: contrast(110%) brightness(110%) saturate(130%); } /* ヴィンテージ効果 */ .vintage-filter { filter: sepia(50%) contrast(120%) brightness(110%); } /* ネオン効果 */ .neon-filter { filter: brightness(150%) contrast(120%) saturate(150%); } /* ドラマチック効果 */ .dramatic { filter: contrast(130%) brightness(90%) saturate(120%) drop-shadow(0 0 20px rgba(0,0,0,0.5)); } /* ホバーでフィルター変化 */ .image { filter: grayscale(100%) contrast(120%); transition: filter 0.5s; } .image:hover { filter: grayscale(0%) contrast(100%) saturate(120%); }

✅ 結果： プロ級の画像効果が作れます

SVG filterの参照

SVGで定義した高度なfilterを使えます。

💡 使い方： filter: url(#フィルターID) でSVGフィルターを参照します。

/* HTML内にSVGフィルターを定義 */ <svg style="display: none;"> <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="10" /> <feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"/> </filter> </svg> /* CSSで使用 */ .goo-effect { filter: url(#goo); } /* ぼかし効果 */ .blur-effect { filter: url(#blur); } /* 複雑なエフェクト */ .complex-effect { filter: url(#complex) brightness(110%); }

✅ 高度： SVGフィルターで超高度な効果が作れます

backdrop-filter（背景フィルター）

要素の背後にfilterをかけます。ガラス効果に必須です。

💡 使い方： backdrop-filter: blur() などで背景にフィルターをかけます。

/* ガラスモーフィズム */ .glass { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); } /* フロストガラス */ .frost { backdrop-filter: blur(20px) saturate(180%); background: rgba(255, 255, 255, 0.3); } /* ダークガラス */ .dark-glass { backdrop-filter: blur(15px) brightness(80%); background: rgba(0, 0, 0, 0.3); } /* モーダルの背景 */ .modal-backdrop { backdrop-filter: blur(5px) brightness(70%); background: rgba(0, 0, 0, 0.5); }

✅ トレンド： 2024年の最新デザインに必須です

filter: url() カスタムフィルター

完全にカスタマイズしたfilter効果を作成できます。

💡 使い方： SVGのfilter要素でカスタムフィルターを定義します。

/* グリッチ効果 */ <svg> <filter id="glitch"> <feTurbulence baseFrequency="0.02" numOctaves="3" /> <feDisplacementMap in="SourceGraphic" scale="50" /> </filter> </svg> .glitch { filter: url(#glitch); } /* 水彩画風 */ <filter id="watercolor"> <feTurbulence baseFrequency="0.05" /> <feColorMatrix type="hueRotate" values="90" /> <feGaussianBlur stdDeviation="2" /> </filter> .watercolor { filter: url(#watercolor); }

✅ プロ技： 独自のアート効果が作れます

🎪 高度なアニメーションテクニック

パララックス効果

スクロールに応じて要素が異なる速度で動く視差効果です。

💡 使い方： transform: translateY() と JavaScript を組み合わせます。

/* CSS */ .parallax { transition: transform 0.1s linear; } /* JavaScript */ window.addEventListener('scroll', () => { const scrolled = window.pageYOffset; const parallax = document.querySelector('.parallax'); parallax.style.transform = `translateY(${scrolled * 0.5}px)`; });

✅ 結果： 奥行きのあるスクロール体験

スムーススクロール

ページ内リンクをなめらかにスクロールします。

💡 使い方： scroll-behavior: smooth を使います。

/* CSSで簡単実装 */ html { scroll-behavior: smooth; } /* JavaScriptでより細かく制御 */ element.scrollIntoView({ behavior: 'smooth', block: 'start' });

✅ 結果： なめらかなスクロール

スティッキーヘッダー

スクロールしても固定されるヘッダーを作ります。

💡 使い方： position: sticky を使います。

.header { position: sticky; top: 0; z-index: 1000; background: white; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }

✅ 結果： 常に表示されるナビゲーション

カウントアップアニメーション

数字が0から目標値まで増えていくアニメーションです。

💡 使い方： JavaScriptで数値を徐々に増やします。

✅ 結果： 統計数値が動的にカウントアップ

タイピングエフェクト

文字が1文字ずつ表示されるタイプライター効果です。

💡 使い方： setInterval で文字を追加します。

function typeWriter(element, text, speed) { let i = 0; function type() { if (i < text.length) { element.textContent += text.charAt(i); i++; setTimeout(type, speed); } } type(); }

✅ 結果： タイプライター風の文字表示

無限スクロールカルーセル

要素が自動で横にスクロールし続けるアニメーションです。

💡 使い方： @keyframes で無限ループアニメーションを作ります。

@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .scroll-container { display: flex; animation: scroll 20s linear infinite; } /* 要素を2倍にして継ぎ目をなくす */ .scroll-container::after { content: ''; flex: 0 0 100%; }

✅ 結果： 途切れないスクロールアニメーション

モーフィングアニメーション

形が変化するアニメーションです。

💡 使い方： clip-path でアニメーションさせます。

@keyframes morph { 0% { clip-path: circle(50% at 50% 50%); } 50% { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } 100% { clip-path: circle(50% at 50% 50%); } } .morph { animation: morph 3s ease-in-out infinite; }

✅ 結果： 円から菱形に変化

パーティクルアニメーション

複数の小さな要素が動き回る効果です。

💡 使い方： 複数要素にランダムなアニメーションを適用します。

@keyframes float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(var(--x), var(--y)); } } .particle { animation: float var(--duration) ease-in-out infinite; } /* JavaScriptでランダム値を設定 */ particle.style.setProperty('--x', Math.random() * 100 + 'px'); particle.style.setProperty('--y', Math.random() * 100 + 'px');

✅ 結果： 動的なパーティクル効果

🖼️ レイアウトテクニック応用

カードグリッドレイアウト

レスポンシブなカードグリッドを作ります。

💡 使い方： auto-fit と minmax を使います。

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; padding: 20px; } .card { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }

✅ 結果： 自動調整されるカードレイアウト

マソンリーレイアウト

Pinterest風の不規則な高さのグリッドです。

💡 使い方： column-count を使います。

.masonry { column-count: 3; column-gap: 20px; } .masonry-item { break-inside: avoid; margin-bottom: 20px; } @media (max-width: 768px) { .masonry { column-count: 2; } } @media (max-width: 480px) { .masonry { column-count: 1; } }

✅ 結果： Pinterest風レイアウト

ホーリーグレイルレイアウト

ヘッダー・フッター固定、サイドバー＋メインの定番レイアウトです。

💡 使い方： Grid で完璧に実装できます。

.container { display: grid; grid-template-areas: "header header header" "nav main aside" "footer footer footer"; grid-template-columns: 200px 1fr 200px; grid-template-rows: auto 1fr auto; min-height: 100vh; } .header { grid-area: header; } .nav { grid-area: nav; } .main { grid-area: main; } .aside { grid-area: aside; } .footer { grid-area: footer; }

✅ 結果： 完璧な3カラムレイアウト

フルスクリーンセクション

各セクションが画面いっぱいに表示されます。

💡 使い方： height: 100vh を使います。

.section { height: 100vh; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; } .container { scroll-snap-type: y mandatory; overflow-y: scroll; height: 100vh; }

✅ 結果： スライドショー風のページ

🎯 パフォーマンス最適化テクニック

遅延読み込み（Lazy Loading）

画像を必要になるまで読み込まない技術です。

💡 使い方： loading="lazy" 属性を使います。

<img src="image.jpg" alt="画像" loading="lazy"> /* Intersection Observer API でより細かく制御 */ const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; observer.unobserve(img); } }); }); document.querySelectorAll('img[data-src]').forEach(img => { observer.observe(img); });

✅ 結果： ページ読み込みが高速化

Critical CSS インライン化

初期表示に必要なCSSだけを先に読み込みます。

💡 使い方： 重要なCSSを<head>内に直接書きます。

<head> <style> /* 初期表示に必要な最小限のCSS */ body { margin: 0; font-family: sans-serif; } .hero { height: 100vh; background: #667eea; } </style>  <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> </head>

✅ 結果： 初期表示が爆速に

will-change プロパティ

アニメーションを最適化するヒントをブラウザに与えます。

💡 使い方： 変化する前に will-change を指定します。

/* アニメーション前に設定 */ .element { will-change: transform, opacity; } /* ホバー時のみ適用 */ .card { transition: transform 0.3s; } .card:hover { will-change: transform; transform: translateY(-10px); }

✅ 注意： 使いすぎるとメモリを消費するので慎重に

contain プロパティ

要素の影響範囲を制限してレンダリングを最適化します。

💡 使い方： contain: layout/paint/size を指定します。

/* レイアウトを分離 */ .widget { contain: layout; } /* 描画を分離 */ .card { contain: paint; } /* 厳密な分離 */ .isolated { contain: strict; }

✅ 結果： 大規模サイトでパフォーマンス向上

content-visibility

画面外の要素のレンダリングをスキップします。

💡 使い方： content-visibility: auto を使います。

.section { content-visibility: auto; contain-intrinsic-size: 0 500px; }

✅ 結果： 長いページの表示が劇的に速くなります

CSS contain-intrinsic-size

要素のサイズヒントを与えてレイアウトシフトを防ぎます。

💡 使い方： content-visibility と併用します。

.lazy-section { content-visibility: auto; contain-intrinsic-size: 1000px; }

✅ 結果： スクロール時のガタつき防止

font-display swap

Webフォント読み込み中もテキストを表示します。

💡 使い方： @font-face で font-display を指定します。

@font-face { font-family: 'Custom Font'; src: url('font.woff2') format('woff2'); font-display: swap; }

✅ 結果： フォント読み込み中も文字が見える

プリロード・プリフェッチ

リソースを事前に読み込んで高速化します。

💡 使い方： link rel="preload/prefetch" を使います。

<link rel="preload" href="main.css" as="style"> <link rel="preload" href="hero.jpg" as="image">  <link rel="prefetch" href="next-page.html">  <link rel="dns-prefetch" href="https://fonts.googleapis.com">

✅ 結果： ページ遷移が瞬時に

🔐 セキュリティとアクセシビリティ

ARIA ラベル

スクリーンリーダー用の説明を追加します。

💡 使い方： aria-label 属性を使います。

✅ 結果： 視覚障害者も使いやすいサイトに

キーボード操作対応

マウス無しでも操作できるようにします。

💡 使い方： tabindex と focus を活用します。

<div tabindex="0" role="button">クリック可能</div> /* フォーカス時のスタイル */ .button:focus { outline: 3px solid #4A90E2; outline-offset: 2px; }

✅ 結果： キーボードだけで操作可能

コントラスト比の確保

読みやすい色の組み合わせを使います。

💡 使い方： WCAG基準（4.5:1以上）を守ります。

/* 良い例：十分なコントラスト */ .text { color: #333333; background: #FFFFFF; } /* 悪い例：薄すぎて読みにくい */ .bad-text { color: #CCCCCC; background: #FFFFFF; }

✅ ツール： WebAIMのコントラストチェッカーを使おう

prefers-reduced-motion

アニメーションを苦手な人のための配慮です。

💡 使い方： メディアクエリで分岐します。

/* 通常 */ .element { animation: bounce 1s infinite; } /* アニメーション軽減モード */ @media (prefers-reduced-motion: reduce) { .element { animation: none; transition: none; } }

✅ 結果： 誰にでも優しいサイトに

CSP（Content Security Policy）

XSS攻撃を防ぐセキュリティヘッダーです。

💡 使い方： meta タグまたはHTTPヘッダーで設定します。

✅ 結果： 不正なスクリプトの実行を防止

rel="noopener noreferrer"

外部リンクのセキュリティリスクを防ぎます。

💡 使い方： target="_blank" と併用します。

<a href="https://example.com" target="_blank" rel="noopener noreferrer"> 外部サイト </a>

✅ 結果： タブナビゲーション攻撃を防止

サブリソース整合性（SRI）

外部ファイルの改ざんを検出します。

💡 使い方： integrity 属性を使います。

✅ 結果： CDNファイルの改ざんを検出

🎨 モダンUI/UXパターン

スケルトンスクリーン

コンテンツ読み込み中にプレースホルダーを表示します。

💡 使い方： グレーの矩形でレイアウトを示します。

.skeleton { background: linear-gradient( 90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75% ); background-size: 200% 100%; animation: loading 1.5s infinite; } @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

✅ 結果： 体感速度が向上

インフィニットスクロール

スクロールで自動的にコンテンツを追加読み込みします。

💡 使い方： Intersection Observer を使います。

const observer = new IntersectionObserver((entries) => { if (entries[0].isIntersecting) { loadMoreContent(); } }); observer.observe(document.querySelector('.load-more-trigger'));

✅ 結果： SNS風の無限スクロール

プログレスバー

進捗状況を視覚的に示します。

💡 使い方： width を動的に変更します。

<div class="progress-bar"> <div class="progress" style="width: 60%"></div> </div> .progress-bar { width: 100%; height: 8px; background: #e0e0e0; border-radius: 10px; } .progress { height: 100%; background: linear-gradient(90deg, #667eea, #764ba2); border-radius: 10px; transition: width 0.3s; }

✅ 結果： 進捗が一目瞭然

トースト通知

画面隅に表示される一時的な通知です。

💡 使い方： 固定位置＋アニメーションで実装します。

.toast { position: fixed; bottom: 20px; right: 20px; background: #333; color: white; padding: 15px 20px; border-radius: 8px; animation: slideIn 0.3s, slideOut 0.3s 2.7s; } @keyframes slideIn { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOut { to { transform: translateX(400px); opacity: 0; } }

✅ 結果： 控えめで効果的な通知

ドロワーメニュー

横からスライドするメニューです。

💡 使い方： transform で実装します。

.drawer { position: fixed; top: 0; left: -300px; width: 300px; height: 100vh; background: white; transition: transform 0.3s; z-index: 1000; } .drawer.open { transform: translateX(300px); } .overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity 0.3s; } .overlay.show { opacity: 1; pointer-events: all; }

✅ 結果： スマホ定番のメニュー

🎓 完全初心者向け：ゼロからWebサイトを作る手順

このセクションでは、HTMLもCSSも全く知らない人でも、順番に進めれば必ずWebサイトが作れるように詳しく説明します。

ステップ1：最初のHTMLファイルを作る

まずは超シンプルなHTMLファイルから始めましょう。これがWebサイトの土台になります。

📝 手順： テキストエディタを開いて、以下のコードをコピーして「index.html」という名前で保存します。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>私の最初のWebサイト</title> </head> <body> <h1>ようこそ！</h1> <p>これが私の最初のWebサイトです。</p> </body> </html>

✅ 解説：
• <!DOCTYPE html> = これはHTML5で書きますという宣言
• <html lang="ja"> = 日本語のページですという指定
• <head> = ページの設定を書く部分（画面には表示されない）
• <meta charset="UTF-8"> = 文字化けを防ぐための設定
• <title> = ブラウザのタブに表示される名前
• <body> = 実際に画面に表示される内容を書く部分

💡 ポイント： このファイルをブラウザで開くと「ようこそ！」という見出しと文章が表示されます

ステップ2：見出しと段落を追加する

文章を整理するために、見出しと段落を使い分けましょう。

📝 手順： <body>の中身を以下のように書き換えます。

<body> <h1>私のプロフィール</h1> <h2>自己紹介</h2> <p>こんにちは！私は田中太郎です。</p> <p>プログラミングの勉強を始めたばかりです。</p> <h2>趣味</h2> <p>音楽を聴くことと、映画を見ることが好きです。</p> <h2>好きな食べ物</h2> <p>ラーメンとカレーが大好きです！</p> </body>

✅ 解説：
• <h1> = 一番大きな見出し（ページに1つだけ使う）
• <h2> = 中くらいの見出し（セクションのタイトル）
• <p> = 段落（文章を書く）
• h1 → h2 → h3 の順番に小さくなります

ステップ3：リストを作る

箇条書きや番号付きリストで情報を整理しましょう。

📝 手順： 「趣味」セクションをリストに変更します。

<h2>趣味</h2> <ul> <li>音楽を聴くこと</li> <li>映画を見ること</li> <li>ゲームをすること</li> </ul> <h2>スキル（習得順）</h2> <ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ol>

✅ 解説：
• <ul> = 順番のないリスト（箇条書き、黒い点●が付く）
• <ol> = 順番のあるリスト（番号付き、1. 2. 3.が付く）
• <li> = リストの各項目

ステップ4：画像を追加する

写真やイラストを表示してページを華やかにしましょう。

📝 手順： 画像ファイルをHTMLファイルと同じフォルダに置いて、以下のコードを追加します。

✅ 解説：
• src="ファイル名" = 画像ファイルの場所
• alt="説明文" = 画像が表示されないときの代替テキスト（必須！）
• width="数値" = 画像の幅（ピクセル単位）

💡 ヒント： 画像ファイル名は「photo.jpg」「icon.png」のように英語で付けましょう

ステップ5：リンクを追加する

他のページやWebサイトへのリンクを作りましょう。

📝 手順： <a>タグでリンクを作ります。

<h2>SNS</h2> <p> <a href="https://twitter.com/yourname">Twitter</a> | <a href="https://instagram.com/yourname">Instagram</a> | <a href="https://github.com/yourname">GitHub</a> </p>  <a href="https://google.com" target="_blank">Googleで検索</a>  <a href="mailto:[email protected]">メールを送る</a>

✅ 解説：
• <a href="URL">テキスト</a> = リンクの基本形
• target="_blank" = 新しいタブで開く
• href="mailto:〜" = メールアプリを起動

ステップ6：CSSで見た目を整える（基本）

HTMLだけだと白黒で質素なので、CSSで色やデザインをつけましょう。

📝 手順： <head>の中に<style>タグを追加します。

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>私の最初のWebサイト</title> <style> /* ページ全体の設定 */ body { font-family: 'Meiryo', sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; background-color: #f5f5f5; } /* 見出しの色 */ h1 { color: #2c3e50; border-bottom: 3px solid #3498db; padding-bottom: 10px; } h2 { color: #34495e; margin-top: 30px; } /* リンクの色 */ a { color: #3498db; text-decoration: none; } a:hover { color: #2980b9; text-decoration: underline; } </style> </head>

✅ 解説：
• <style>タグの中にCSSを書きます
• body { } = ページ全体のスタイル
• max-width: 800px = 最大幅を800pxに制限（読みやすさ向上）
• margin: 0 auto = 左右中央揃え
• :hover = マウスを載せたときのスタイル

ステップ7：ボックスデザインを追加

内容を囲んだボックスを作って、見やすく整理しましょう。

📝 手順： 内容を<div>で囲んで、CSSでデザインします。

<div class="profile-box"> <h2>自己紹介</h2> <p>こんにちは！私は田中太郎です。</p> </div>  <style> .profile-box { background-color: white; border-radius: 10px; padding: 20px; margin: 20px 0; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } </style>

✅ 解説：
• <div class="名前"> = ボックスを作る（classで名前を付ける）
• background-color = 背景色
• border-radius = 角を丸くする
• padding = 内側の余白
• box-shadow = 影をつける

ステップ8：ボタンを作る

クリックできるボタンを作ってページに動きを加えましょう。

📝 手順： <button>タグとCSSでデザインします。

<button class="my-button">クリックしてね</button>  <style> .my-button { background-color: #3498db; color: white; border: none; padding: 12px 30px; font-size: 16px; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; } .my-button:hover { background-color: #2980b9; transform: translateY(-2px); } </style>

✅ 解説：
• cursor: pointer = マウスを載せると指マークになる
• transition = 色変化をスムーズに
• transform: translateY(-2px) = 上に2px浮き上がる効果

ステップ9：レスポンシブデザイン（スマホ対応）

スマホでも綺麗に表示されるように調整しましょう。

📝 手順： メディアクエリを使ってスマホ用のスタイルを追加します。

✅ 解説：
• @media (max-width: 600px) = 画面幅が600px以下のとき
• max-width: 100% = 画像が画面からはみ出さない
• スマホでは文字を小さく、余白を狭くすると読みやすい

ステップ10：JavaScriptで動きをつける

ボタンをクリックしたら何かが起こるようにプログラムを書きましょう。

📝 手順： <body>の最後に<script>タグを追加します。

<button id="greetButton">挨拶する</button> <p id="message"></p>  <script> const button = document.getElementById('greetButton'); const message = document.getElementById('message'); button.addEventListener('click', function() { const now = new Date(); const hour = now.getHours(); if (hour < 12) { message.textContent = 'おはようございます！'; } else if (hour < 18) { message.textContent = 'こんにちは！'; } else { message.textContent = 'こんばんは！'; } }); </script>

✅ 解説：
• getElementById('ID名') = IDで要素を取得
• addEventListener('click', function) = クリック時の処理
• new Date() = 現在の日時を取得
• getHours() = 時刻（0〜23）を取得
• 時刻によって表示する挨拶を変えるプログラムです

完成！あなたのWebサイトの全体像

ここまでのすべてを組み合わせた完全なHTMLファイルです。これをコピーして使えます！

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>私のプロフィール</title> <style> body { font-family: 'Meiryo', sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; background-color: #f5f5f5; } h1 { color: #2c3e50; border-bottom: 3px solid #3498db; padding-bottom: 10px; } h2 { color: #34495e; margin-top: 30px; } .profile-box { background-color: white; border-radius: 10px; padding: 20px; margin: 20px 0; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .my-button { background-color: #3498db; color: white; border: none; padding: 12px 30px; font-size: 16px; border-radius: 5px; cursor: pointer; transition: all 0.3s; } .my-button:hover { background-color: #2980b9; transform: translateY(-2px); } a { color: #3498db; text-decoration: none; } a:hover { text-decoration: underline; } @media (max-width: 600px) { body { padding: 10px; } h1 { font-size: 24px; } } </style> </head> <body> <h1>私のプロフィール</h1> <div class="profile-box"> <h2>自己紹介</h2> <p>こんにちは！私は田中太郎です。</p> <p>プログラミングの勉強を始めたばかりです。</p> </div> <div class="profile-box"> <h2>趣味</h2> <ul> <li>音楽を聴くこと</li> <li>映画を見ること</li> <li>ゲームをすること</li> </ul> </div> <div class="profile-box"> <h2>SNS</h2> <p> <a href="https://twitter.com">Twitter</a> | <a href="https://instagram.com">Instagram</a> </p> </div> <button id="greetButton" class="my-button">挨拶する</button> <p id="message" style="font-size: 20px; color: #27ae60;"></p> <script> const button = document.getElementById('greetButton'); const message = document.getElementById('message'); button.addEventListener('click', function() { const hour = new Date().getHours(); if (hour < 12) { message.textContent = 'おはようございます！'; } else if (hour < 18) { message.textContent = 'こんにちは！'; } else { message.textContent = 'こんばんは！'; } }); </script> </body> </html>

🎉 完成！ このコードをコピーして「index.html」として保存し、ブラウザで開いてみましょう。動くWebサイトができています！

💡 次のステップ： html.cafeにアップロードすれば、世界中の人に見てもらえます！

🏗️ 実践：よくあるWebサイトパターン

パターン1：ランディングページ（商品紹介ページ）

商品やサービスを紹介する1ページ完結型のサイトです。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>最高のコーヒー | Coffee Paradise</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Helvetica', sans-serif; } /* ヒーローセクション（最初の大きな画像エリア） */ .hero { height: 100vh; background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('coffee-bg.jpg') center/cover; display: flex; align-items: center; justify-content: center; text-align: center; color: white; } .hero h1 { font-size: 4rem; margin-bottom: 20px; } .cta-button { background: #e67e22; color: white; padding: 15px 40px; font-size: 1.2rem; border: none; border-radius: 50px; cursor: pointer; transition: transform 0.3s; } .cta-button:hover { transform: scale(1.1); } /* 特徴セクション */ .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; padding: 80px 20px; max-width: 1200px; margin: 0 auto; } .feature { text-align: center; padding: 30px; } .feature-icon { font-size: 3rem; margin-bottom: 15px; } </style> </head> <body> <section class="hero"> <div> <h1>最高のコーヒー体験を</h1> <p style="font-size: 1.3rem; margin-bottom: 30px;"> 厳選された豆から淹れる至福の一杯 </p> <button class="cta-button">今すぐ注文する</button> </div> </section> <section class="features"> <div class="feature"> <div class="feature-icon">☕</div> <h3>厳選された豆</h3> <p>世界中から選りすぐりの豆だけを使用</p> </div> <div class="feature"> <div class="feature-icon">🚚</div> <h3>迅速配送</h3> <p>ご注文から24時間以内にお届け</p> </div> <div class="feature"> <div class="feature-icon">💯</div> <h3>品質保証</h3> <p>満足いただけなければ全額返金</p> </div> </section> </body> </html>

✅ 構成要素：
• ヒーローセクション = インパクトのある最初の画面
• CTA（Call To Action）ボタン = 「今すぐ購入」などの行動喚起ボタン
• 特徴セクション = 商品の強み3つ
• Grid レイアウト = 自動的にカード配置

パターン2：ブログ記事ページ

記事を読みやすく表示するページです。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTMLの基礎を学ぼう | プログラミングブログ</title> <style> body { font-family: 'Georgia', serif; line-height: 1.8; color: #333; max-width: 700px; margin: 0 auto; padding: 40px 20px; } .article-header { margin-bottom: 40px; } .article-title { font-size: 2.5rem; margin-bottom: 15px; line-height: 1.2; } .article-meta { color: #666; font-size: 0.9rem; } .article-content p { margin-bottom: 1.5em; } .article-content h2 { margin-top: 2em; margin-bottom: 1em; color: #2c3e50; } .article-content code { background: #f4f4f4; padding: 2px 6px; border-radius: 3px; font-family: 'Courier New', monospace; } .article-content blockquote { border-left: 4px solid #3498db; padding-left: 20px; margin: 20px 0; color: #555; font-style: italic; } </style> </head> <body> <article> <header class="article-header"> <h1 class="article-title">HTMLの基礎を完全マスターする方法</h1> <div class="article-meta"> 投稿日: 2025年10月15日 | カテゴリ: プログラミング </div> </header> <div class="article-content"> <p> HTMLはWebページを作る基礎となる言語です。この記事では、初心者でも分かるように丁寧に解説します。 </p> <h2>HTMLとは何か？</h2> <p> HTMLは「HyperText Markup Language」の略で、 Webページの構造を作る言語です。 </p> <blockquote> HTMLを覚えれば、自分のWebサイトを作れるようになります。 </blockquote> <h2>最初のHTMLファイル</h2> <p> まずは<code><!DOCTYPE html></code>から始めます。これでHTML5の文書であることを宣言します。 </p> </div> </article> </body> </html>

✅ 構成要素：
• <article> = 記事全体を囲む（意味的に正しいHTML）
• <header> = 記事のヘッダー部分
• メタ情報 = 投稿日、カテゴリなど
• <blockquote> = 引用文
• <code> = コード表示
• 最大幅700px = 読みやすい文章の幅

パターン3：お問い合わせフォーム

ユーザーから情報を受け取るフォームページです。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>お問い合わせ</title> <style> body { font-family: sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; } .form-container { background: white; padding: 40px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); max-width: 500px; width: 100%; } h1 { text-align: center; color: #333; margin-bottom: 30px; } .form-group { margin-bottom: 20px; } label { display: block; margin-bottom: 8px; color: #555; font-weight: 500; } input, textarea { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px; transition: border-color 0.3s; } input:focus, textarea:focus { outline: none; border-color: #667eea; } .submit-btn { width: 100%; padding: 15px; background: #667eea; color: white; border: none; border-radius: 5px; font-size: 18px; cursor: pointer; transition: background 0.3s; } .submit-btn:hover { background: #5568d3; } </style> </head> <body> <div class="form-container"> <h1>お問い合わせ</h1> <form> <div class="form-group"> <label for="name">お名前 *</label> <input type="text" id="name" name="name" required> </div> <div class="form-group"> <label for="email">メールアドレス *</label> <input type="email" id="email" name="email" required> </div> <div class="form-group"> <label for="subject">件名</label> <input type="text" id="subject" name="subject"> </div> <div class="form-group"> <label for="message">メッセージ *</label> <textarea id="message" name="message" rows="5" required></textarea> </div> <button type="submit" class="submit-btn">送信する</button> </form> </div> </body> </html>

✅ 構成要素：
• Flexbox で中央配置 = display: flex; align-items: center
• required 属性 = 必須入力項目
• :focus 疑似クラス = 入力中の枠線色変更
• グラデーション背景 = linear-gradient()
• フォーム検証 = type="email" で自動メール形式チェック

🔍 要素を見つける

document.getElementById()

IDで要素を見つけます。1つの要素だけを取得したいときに使います。

💡 使い方： IDの名前を指定して要素を取得します。

<div id="message">こんにちは</div> <button onclick="changeText()">文字を変える</button> <script> function changeText() { const elem = document.getElementById('message'); elem.textContent = '文字が変わりました！'; } </script>

✅ 結果： ボタンを押すと文字が変わります

addEventListener('click')

要素がクリックされたときに何かをするように設定します。

💡 使い方： addEventListener('イベント名', 関数) の形で使います。

<button id="myButton">クリックしてね</button> <script> const button = document.getElementById('myButton'); button.addEventListener('click', function() { alert('ボタンがクリックされました！'); }); </script>

✅ 結果： ボタンをクリックするとメッセージが表示されます

document.querySelector()

CSSセレクタで要素を見つけます。より柔軟に要素を取得できます。

💡 使い方： CSSセレクタを文字列で指定します。

<div class="box">ボックス1</div> <div class="box">ボックス2</div> <p id="text">テキスト</p> <script> // クラスで取得（最初の1つ） const box = document.querySelector('.box'); // IDで取得 const text = document.querySelector('#text'); // タグ名で取得 const firstDiv = document.querySelector('div'); // 複雑なセレクタ const firstBoxInDiv = document.querySelector('div .box'); </script>

✅ ポイント： querySelector は最初に見つかった1つだけを返します

document.querySelectorAll()

条件に合うすべての要素を取得します。

💡 使い方： 複数の要素をまとめて操作したいときに使います。

<div class="card">カード1</div> <div class="card">カード2</div> <div class="card">カード3</div> <script> // すべての.cardを取得 const cards = document.querySelectorAll('.card'); // すべてに処理を適用 cards.forEach(card => { card.style.backgroundColor = 'lightblue'; card.addEventListener('click', () => { alert('カードがクリックされました！'); }); }); </script>

✅ 結果： 条件に合うすべての要素を配列のように扱えます

📝 変数と値の使い方

const（定数）

値を保存する箱を作ります。一度入れたら変更できません（基本的にconstを使うのがおすすめ）。

💡 使い方： const 名前 = 値; の形で書きます。

// 文字列を保存 const name = '太郎'; const message = 'こんにちは、' + name + 'さん'; // 数値を保存 const age = 20; const nextAge = age + 1; // 21 // 真偽値（trueかfalse） const isStudent = true; const isAdult = age >= 20; // true // 配列を保存 const colors = ['赤', '青', '緑']; // オブジェクトを保存 const user = { name: '花子', age: 25 }; console.log(message); // "こんにちは、太郎さん"

✅ ポイント： 再代入不要な値はconstを使いましょう

let（変数）

後から値を変更できる箱です。カウンターなど、値が変わるものに使います。

💡 使い方： let 名前 = 値; の形で書きます。後から変更できます。

// カウンター let count = 0; count = count + 1; // 1 count += 1; // 2（省略形） count++; // 3（1増やす） // 値の入れ替え let message = 'おはよう'; console.log(message); // "おはよう" message = 'こんにちは'; console.log(message); // "こんにちは" // ボタンクリックで数を増やす例 let clickCount = 0; button.addEventListener('click', () => { clickCount++; console.log('クリック回数: ' + clickCount); });

✅ 使い分け： 変更するならlet、変更しないならconst

テンプレートリテラル

バッククォート（`）を使って、変数を文字列に簡単に埋め込めます。

💡 使い方： `文字列 ${変数}` の形で書きます。

✅ 結果： 読みやすくて書きやすい文字列が作れます

🔧 関数の作り方

function（関数定義）

繰り返し使う処理をまとめて名前を付けます。

💡 使い方： function 名前() { 処理 } の形で作ります。

// 基本の関数 function sayHello() { console.log('こんにちは！'); } // 関数を実行 sayHello(); // "こんにちは！" // 引数を受け取る関数 function greet(name) { console.log(`こんにちは、${name}さん！`); } greet('太郎'); // "こんにちは、太郎さん！" greet('花子'); // "こんにちは、花子さん！" // 値を返す関数 function add(a, b) { return a + b; } const result = add(3, 5); // 8 console.log(result); // 実用例：税込価格を計算 function calcTax(price) { return price * 1.1; } console.log(calcTax(1000)); // 1100

✅ 結果： 同じ処理を何度も書かずに済みます

アロー関数（=>）

短く書ける新しい関数の書き方です。モダンなJavaScriptでよく使われます。

💡 使い方： (引数) => { 処理 } の形で書きます。

// 通常の関数 function add1(a, b) { return a + b; } // アロー関数 const add2 = (a, b) => { return a + b; }; // さらに省略形（1行の場合） const add3 = (a, b) => a + b; // 引数が1つの場合 const double = x => x * 2; // イベントリスナーで使う button.addEventListener('click', () => { console.log('クリックされました！'); }); // 配列の処理で使う const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map(n => n * 2); console.log(doubled); // [2, 4, 6, 8, 10]

✅ ポイント： 短くてスッキリ書けます

✏️ DOM操作（要素の変更）

textContent（テキスト変更）

要素の中のテキストを変更します。

💡 使い方： 要素.textContent = '新しいテキスト'; で変更します。

<h1 id="title">古いタイトル</h1> <p id="message">古いメッセージ</p> <button onclick="changeText()">変更</button> <script> function changeText() { // テキストを変更 document.getElementById('title').textContent = '新しいタイトル'; document.getElementById('message').textContent = '新しいメッセージ'; } // 時刻を表示する例 const timeElement = document.getElementById('time'); setInterval(() => { const now = new Date(); timeElement.textContent = now.toLocaleTimeString(); }, 1000); </script>

✅ 結果： 画面の文字が変わります

innerHTML（HTML変更）

要素の中身をHTMLごと変更します。

💡 使い方： 要素.innerHTML = 'HTMLコード'; で変更します。

<div id="content"></div> <button onclick="addContent()">追加</button> <script> function addContent() { const content = document.getElementById('content'); // HTMLを追加 content.innerHTML = ` <h2>新しいコンテンツ</h2> <p>これはHTMLで追加されました</p> <ul> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ul> `; } // データから動的にHTMLを生成 const users = ['太郎', '花子', '次郎']; const list = document.getElementById('userList'); list.innerHTML = users.map(user => `<li>${user}さん</li>` ).join(''); </script>

✅ 注意： ユーザー入力をそのまま入れるとセキュリティリスクがあります

style（スタイル変更）

JavaScriptで要素のCSSスタイルを変更します。

💡 使い方： 要素.style.プロパティ = '値'; で変更します。

<div id="box">ボックス</div> <button onclick="changeStyle()">スタイル変更</button> <script> function changeStyle() { const box = document.getElementById('box'); // 色を変更 box.style.backgroundColor = 'lightblue'; box.style.color = 'white'; // サイズを変更 box.style.width = '200px'; box.style.height = '200px'; // その他のスタイル box.style.padding = '20px'; box.style.borderRadius = '10px'; box.style.fontSize = '24px'; } // ホバー効果の例 const card = document.querySelector('.card'); card.addEventListener('mouseenter', () => { card.style.transform = 'scale(1.1)'; card.style.boxShadow = '0 10px 30px rgba(0,0,0,0.3)'; }); card.addEventListener('mouseleave', () => { card.style.transform = 'scale(1)'; card.style.boxShadow = '0 2px 5px rgba(0,0,0,0.1)'; }); </script>

✅ ポイント： CSS名はキャメルケース（backgroundColor）で書きます

classList（クラス操作）

要素のクラスを追加・削除・切り替えします。スタイル変更の推奨方法です。

💡 使い方： classList.add/remove/toggle でクラスを操作します。

✅ ベストプラクティス： styleより、classListでCSSクラスを操作する方が管理しやすいです

🎯 イベント処理

よく使うイベント

ユーザーの操作に反応する様々なイベントがあります。

💡 使い方： addEventListener('イベント名', 関数) で設定します。

✅ 主なイベント： click, input, keydown, mouseenter, mouseleave, submit

📊 配列の操作

配列の基本

複数の値をまとめて扱うデータ構造です。

💡 使い方： [ ] で囲んで値を並べます。

// 配列の作成 const fruits = ['りんご', 'バナナ', 'オレンジ']; const numbers = [1, 2, 3, 4, 5]; // 要素へのアクセス（0から始まる） console.log(fruits[0]); // "りんご" console.log(fruits[2]); // "オレンジ" // 要素数を取得 console.log(fruits.length); // 3 // 要素を追加 fruits.push('ぶどう'); // 最後に追加 fruits.unshift('いちご'); // 最初に追加 // 要素を削除 fruits.pop(); // 最後を削除 fruits.shift(); // 最初を削除 // 特定の位置の要素を削除 fruits.splice(1, 1); // インデックス1から1個削除

✅ ポイント： インデックスは0から始まります

forEach（ループ処理）

配列の各要素に対して処理を実行します。

💡 使い方： 配列.forEach(要素 => { 処理 }) の形で書きます。

✅ 結果： すべての要素に同じ処理を適用できます

map（配列変換）

配列の各要素を変換して新しい配列を作ります。

💡 使い方： 配列.map(要素 => 新しい値) で新しい配列を返します。

const numbers = [1, 2, 3, 4, 5]; // 2倍にする const doubled = numbers.map(n => n * 2); console.log(doubled); // [2, 4, 6, 8, 10] // 文字列に変換 const strings = numbers.map(n => `数値: ${n}`); console.log(strings); // ["数値: 1", "数値: 2", ...] // HTMLを生成 const users = ['太郎', '花子', '次郎']; const html = users.map(user => ` <div class="user"> <h3>${user}さん</h3> </div> `).join(''); document.getElementById('users').innerHTML = html;

✅ ポイント： 元の配列は変更せず、新しい配列を返します

filter（絞り込み）

条件に合う要素だけを抽出して新しい配列を作ります。

💡 使い方： 配列.filter(要素 => 条件) で絞り込みます。

✅ 用途： 検索、絞り込み、条件抽出に便利

🔀 条件分岐とループ

if文（条件分岐）

条件によって処理を変えます。

💡 使い方： if (条件) { 処理 } の形で書きます。

✅ 比較演算子： === (等しい), !== (等しくない), > (大きい), < (小さい), >= (以上), <= (以下)

for文（繰り返し）

指定した回数だけ処理を繰り返します。

💡 使い方： for (初期値; 条件; 増減) { 処理 } の形で書きます。

// 基本のfor文（10回繰り返し） for (let i = 0; i < 10; i++) { console.log(i); // 0, 1, 2, ... 9 } // 配列のループ const fruits = ['りんご', 'バナナ', 'オレンジ']; for (let i = 0; i < fruits.length; i++) { console.log(fruits[i]); } // 実用例：掛け算の九九 for (let i = 1; i <= 9; i++) { for (let j = 1; j <= 9; j++) { console.log(`${i} × ${j} = ${i * j}`); } } // HTML生成 let html = ''; for (let i = 1; i <= 5; i++) { html += `<div>アイテム ${i}</div>`; } document.getElementById('list').innerHTML = html;

✅ ポイント： 配列のループにはforEachの方が読みやすいことが多いです

☕ html.cafeとは

html.cafe の特徴

html.cafeは、ブラウザ上でHTMLファイルを簡単に作成・編集・プレビューできる無料のオンラインエディタです。

💡 できること： HTMLファイルの作成、リアルタイムプレビュー、ファイルのダウンロード

【主な特徴】 ✅ ブラウザだけで完結 - インストール不要 - どこからでもアクセス可能 - 初心者でも簡単に始められる ✅ リアルタイムプレビュー - 書いたコードがすぐに表示される - デザインの確認が簡単 - 試行錯誤がしやすい ✅ 無料で使える - 登録不要 - 広告なし（サイトによる） - 学習に最適

✅ おすすめの使い方： HTML/CSS/JavaScriptの学習、簡単なWebページの作成、コードの実験

📝 html.cafeでの基本的な作業

新しいファイルを作る

html.cafeで新しいHTMLファイルを作成する手順です。

💡 手順： エディタにコードを書いて、プレビューで確認します。

【基本的な流れ】 1. html.cafe にアクセス 2. エディタにHTMLコードを入力 3. 自動的にプレビューが表示される 4. 必要に応じて編集を続ける【最初のHTMLテンプレート】 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>私のページ</title> <style> /* ここにCSSを書く */ body { font-family: sans-serif; padding: 20px; } </style> </head> <body> <h1>こんにちは！</h1> <p>これは私の最初のWebページです。</p> <script> // ここにJavaScriptを書く console.log('ページが読み込まれました！'); </script> </body> </html>

✅ ポイント： このテンプレートをコピーして使うと便利です

CSSを追加する

html.cafeでスタイルを適用する方法です。<style>タグ内にCSSを書きます。

💡 方法： <head>内に<style>タグを追加して、その中にCSSを書きます。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>スタイル付きページ</title> <style> /* ページ全体のスタイル */ body { font-family: 'Hiragino Sans', 'Meiryo', sans-serif; background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 40px; min-height: 100vh; margin: 0; } /* カードのスタイル */ .card { background: white; color: #333; padding: 30px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); max-width: 600px; margin: 0 auto; } /* ボタンのスタイル */ .btn { background: #667eea; color: white; border: none; padding: 12px 30px; border-radius: 8px; cursor: pointer; font-size: 16px; } .btn:hover { background: #5568d3; transform: translateY(-2px); } </style> </head> <body> <div class="card"> <h1>美しいカード</h1> <p>CSSでスタイルを適用しました。</p> <button class="btn">クリック</button> </div> </body> </html>

✅ すぐに使える： このコードをそのままhtml.cafeに貼り付けると美しいページが表示されます

JavaScriptで動きをつける

html.cafeでインタラクティブな機能を追加する方法です。

💡 方法： </body>の直前に<script>タグを追加して、その中にJavaScriptを書きます。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>カウンターアプリ</title> <style> body { font-family: sans-serif; text-align: center; padding: 50px; background: #f0f0f0; } #count { font-size: 72px; font-weight: bold; color: #667eea; margin: 30px 0; } button { font-size: 18px; padding: 15px 30px; margin: 10px; border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s; } .plus { background: #10b981; color: white; } .minus { background: #ef4444; color: white; } .reset { background: #6b7280; color: white; } button:hover { transform: scale(1.05); } </style> </head> <body> <h1>カウンターアプリ</h1> <div id="count">0</div> <button class="plus" onclick="increment()">＋増やす</button> <button class="minus" onclick="decrement()">− 減らす</button> <button class="reset" onclick="reset()">リセット</button> <script> let count = 0; const countElement = document.getElementById('count'); function increment() { count++; updateDisplay(); } function decrement() { count--; updateDisplay(); } function reset() { count = 0; updateDisplay(); } function updateDisplay() { countElement.textContent = count; // 色を変える if (count > 0) { countElement.style.color = '#10b981'; } else if (count < 0) { countElement.style.color = '#ef4444'; } else { countElement.style.color = '#667eea'; } } </script> </body> </html>

✅ 完成！ このコードでボタンを押すと数字が増減する完全なアプリが作れます

🎨 すぐに使えるテンプレート

モダンなランディングページ

html.cafeで作れる美しいランディングページのテンプレートです。

💡 使い方： このコードをhtml.cafeにコピペするだけ！

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>私のポートフォリオ</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; } .hero { background: linear-gradient(135deg, #667eea, #764ba2); color: white; min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; } h1 { font-size: 3rem; margin-bottom: 20px; } p { font-size: 1.2rem; margin-bottom: 30px; opacity: 0.9; } .btn { background: white; color: #667eea; padding: 15px 40px; border: none; border-radius: 50px; font-size: 18px; font-weight: bold; cursor: pointer; transition: all 0.3s; } .btn:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.3); } </style> </head> <body> <div class="hero"> <div> <h1>こんにちは、私は太郎です</h1> <p>Webデベロッパー | デザイナー | クリエイター</p> <button class="btn" onclick="alert('お問い合わせありがとうございます！')"> お問い合わせ </button> </div> </div> </body> </html>

✅ 完成： プロフェッショナルなランディングページがすぐに作れます

Todoリストアプリ

実用的なTodoリストアプリのテンプレートです。

💡 機能： タスク追加、削除、完了チェックが全部できます！

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Todoリスト</title> <style> body { font-family: sans-serif; background: #f5f5f5; padding: 50px 20px; } .container { max-width: 500px; margin: 0 auto; background: white; padding: 30px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } h1 { color: #667eea; margin-bottom: 20px; } .input-group { display: flex; gap: 10px; margin-bottom: 20px; } input { flex: 1; padding: 12px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; } button { padding: 12px 25px; background: #667eea; color: white; border: none; border-radius: 8px; cursor: pointer; } .todo-item { padding: 15px; background: #f9f9f9; border-radius: 8px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; } .delete-btn { background: #ef4444; padding: 5px 15px; } </style> </head> <body> <div class="container"> <h1>📝 Todoリスト</h1> <div class="input-group"> <input type="text" id="todoInput" placeholder="新しいタスクを入力..."> <button onclick="addTodo()">追加</button> </div> <div id="todoList"></div> </div> <script> const input = document.getElementById('todoInput'); const list = document.getElementById('todoList'); function addTodo() { const text = input.value.trim(); if (!text) return; const item = document.createElement('div'); item.className = 'todo-item'; item.innerHTML = \` <span>\${text}</span> <button class="delete-btn" onclick="this.parentElement.remove()"> 削除 </button> \`; list.appendChild(item); input.value = ''; } // Enterキーでも追加できるようにする input.addEventListener('keypress', (e) => { if (e.key === 'Enter') addTodo(); }); </script> </body> </html>

✅ すぐ使える： 完全に動作するTodoアプリが完成します

💡 html.cafeでのヒントとコツ

効率的な作業方法

html.cafeでスムーズに作業するためのテクニックです。

💡 コツ： テンプレートを活用して、すばやく作業を進めましょう。

【おすすめの作業フロー】 1. 基本テンプレートから始める - 毎回同じ構造を書く必要なし - <!DOCTYPE>, <head>, <body>は共通 2. リアルタイムプレビューを活用 - 書いたらすぐ確認できる - デザインの試行錯誤が簡単 3. コメントを活用する  /* CSSのコメント */ // JavaScriptのコメント 4. 段階的に作る ① HTMLで構造を作る ② CSSでデザインを整える ③ JavaScriptで動きをつける 5. よく使うコードを保存 - お気に入りのボタンスタイル - カードデザイン - フォームのデザイン【デバッグのコツ】 // console.logでデバッグ console.log('ここが実行されました'); console.log('変数の値:', myVariable); // ブラウザのデベロッパーツール // F12キーで開く（Chrome/Firefox） // エラーメッセージをチェック

✅ 効率アップ： これらのテクニックで作業が3倍速くなります

よくあるエラーと解決法

html.cafeで遭遇しやすいエラーとその対処法です。

💡 解決： エラーが出たら、まずこれをチェック！

【よくあるエラー】 ❌ 「画面が真っ白」原因: JavaScriptエラー解決: F12でコンソールを開いてエラーを確認 ❌ 「スタイルが適用されない」原因: CSSの書き間違い、セレクタのミス解決: - クラス名のスペルをチェック - { } の閉じ忘れをチェック - ; (セミコロン)の忘れをチェック ❌ 「JavaScriptが動かない」原因: 関数名の間違い、IDの不一致解決:  <div id="box"></div> <script> // IDが一致しているか確認 const box = document.getElementById('box'); </script> ❌ 「日本語が文字化け」原因: 文字コード設定忘れ解決: <head>の中に必ず入れる <meta charset="UTF-8"> 【デバッグチェックリスト】 ✓ タグは正しく閉じている？ ✓ クラス名・ID名は合っている？ ✓ console.logで値を確認した？ ✓ ブラウザのコンソールにエラーは？ ✓ { } の対応は正しい？

✅ これで解決： 99%のエラーはこれでなくなります

💻 インタラクティブコードエディタ

ここでHTMLコードを書いて、すぐにプレビューを確認できます！html.cafeでも使えるコードです。

● ● ● index.html

📱 プレビュー

✨ 使い方

自動補完： < を入力すると、タグの候補が表示されます
テンプレート： 上部のボタンからサンプルコードを挿入できます
リアルタイム更新： コードを編集すると自動的にプレビューが更新されます
html.cafe対応： このコードはそのままhtml.cafeにコピーして使えます！

⌨️ キーボードショートカット

Ctrl + Enter プレビュー更新

Ctrl + / コメント切替

Tab インデント追加

Ctrl + D 行を複製

📁 外部ファイルの読み込み方

外部CSSファイルを読み込む

CSSを別ファイルに保存して読み込む方法です。複数のページで同じデザインを使いたいときに便利です。

💡 使い方： <head>の中に<link>タグを書きます。

<head> <link rel="stylesheet" href="style.css"> </head> /* CSSファイル（style.css） */ .title { color: blue; font-size: 32px; }

✅ 結果： style.cssに書いたスタイルが適用されます

Google Fontsを使う

Googleが提供する無料のフォントを使う方法です。おしゃれなフォントが使えます。

💡 使い方： Google Fontsのサイトからコードをコピーして貼り付けます。

<head> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet"> <style> body { font-family: 'Noto Sans JP', sans-serif; } </style> </head>

✅ 結果： Googleのフォントが適用されます

💡 Google Fontsのサイト: https://fonts.google.com/