書いて、壊して、直して学ぶ HTML & CSS
コードを書いた瞬間に結果を確認し、LESSON・MISSION・DEBUG・CHALLENGEを通して手を動かしながら学びます。
HTMLの見出しと文章
コードを編集して、結果を確認してみましょう。
完成例
CODE LAB : HTML & CSSでできること
CODE LAB : HTML & CSSは、HTMLとCSSを読むだけではなく、実際にコードを書き、表示結果を確認しながら学ぶための初心者向け学習ツールです。
ブラウザ上でHTMLとCSSを編集すると、その結果をリアルタイムプレビューで確認できます。コードを書き換えた直後に見た目の変化を確認できるため、「このタグやCSSプロパティを変えると何が起こるのか」を手を動かしながら試せます。
通常の練習だけでなく、課題に挑戦するMISSION、壊れたコードを修正するDEBUG、完成例を目標にUIを組み立てるCHALLENGEを通して、HTML/CSSの基本から実践的な考え方まで段階的に触れられる構成です。
基本的な使い方
- 取り組みたい練習や課題を選びます。
- HTMLエリアにタグや文章を書きます。
- CSSエリアで色、余白、境界線、レイアウトなどを調整します。
- リアルタイムプレビューで表示結果を確認します。
- 課題モードでは、条件を満たすようにコードを修正します。
コードを一度で正解させる必要はありません。変更して表示を確認し、うまくいかなければ戻して試す、という繰り返しを前提にしています。HTML/CSS初心者でも、結果を見ながら少しずつ仕組みを理解しやすい形です。
MISSIONで課題を解く
MISSIONは、指定された条件を満たすようにHTMLやCSSを書き換える練習です。例えば「Hello Worldを大見出しで表示する」「見出しの文字色を変える」「カードの角を丸くする」といった課題を通して、タグやCSSプロパティの使い方を確認します。
完成コードをそのまま読むのではなく、自分で条件を考えて修正するため、覚えた知識を実際に使う練習になります。
DEBUGで間違いを探して直す
DEBUGでは、意図的に壊れたHTMLやCSSを修正します。HTMLの閉じタグ不足や、CSSの記述ミスなど、実際のコーディングで起こりやすい問題を探して直す形式です。
「正しい書き方を覚える」だけでなく、「なぜ表示されないのか」「どこが間違っているのか」を考える練習になるため、自分でコードを書くときのトラブル対応にもつながります。
CHALLENGEでUI制作に挑戦
CHALLENGEは、ある程度HTML/CSSに慣れてきた人向けの実践モードです。プロフィールカードやボタン、カードレイアウトなど、完成イメージを参考にしながらHTMLとCSSで形を作っていきます。
単独のタグやプロパティだけではなく、複数の要素を組み合わせて一つのUIを作ることで、実際のWeb制作に近い流れを体験できます。
リアルタイムプレビューの見方
プレビューには、現在入力しているHTMLとCSSの結果が表示されます。文字色を変えたとき、marginやpaddingを調整したとき、レイアウト指定を変更したときなど、コードの変更と表示結果を見比べてください。
期待した表示にならない場合は、HTMLのタグ構造、classやidの指定、CSSのセレクタや記号などを確認します。小さな変更を一つずつ試すと、どのコードが表示へ影響しているのか分かりやすくなります。
HTML/CSS初心者におすすめの進め方
最初は、見出し、段落、リンク、リストなどのHTML基本タグと、color、background、font-size、margin、padding、borderなどの基本CSSから触るのがおすすめです。
慣れてきたらFlexboxやGrid、position、hover、transition、レスポンシブデザインなどへ進みます。読むだけで覚えようとせず、値を変えて表示がどう変化するかを試すことで理解しやすくなります。
スマートフォンで使う場合
PCではコードとプレビューを見比べやすく、スマートフォンではHTML / CSS / PREVIEWを切り替えながら練習する使い方を想定しています。長いコードを書く場合はPCの方が操作しやすいことがありますが、短い課題や表示確認はスマートフォンでも取り組めます。
安全性と注意事項
このツールはHTML/CSS学習を目的としており、初期仕様ではJavaScriptの自由入力を対象にしていません。入力したHTML/CSSは、可能な限りブラウザ内で処理する方針です。
プレビュー上の表示は学習用の確認結果です。実際のWebサイトでは、使用しているWordPressテーマ、既存CSS、画面幅、ブラウザなどの影響によって見え方が変わる場合があります。
また、外部サービスのログイン情報、個人情報、秘密情報などを練習コードへ入力しないでください。
FAQ
HTML/CSSをまったく知らなくても使えますか？
初心者が実際にコードを書きながら学ぶことを想定しています。まずは見出しや段落などの基本的なHTMLと、色や文字サイズなど分かりやすいCSSから試すと進めやすくなります。
コードを書き換えるとすぐに結果を確認できますか？
はい。HTMLやCSSの変更結果をリアルタイムプレビューで確認しながら練習することを中心にしたツールです。
MISSIONとDEBUGの違いは何ですか？
MISSIONは指定された目標を達成するコードを書く練習、DEBUGは間違っているコードを探して修正する練習です。異なる方向からHTML/CSSの理解を深められます。
JavaScriptも練習できますか？
初期仕様はHTML/CSS学習に絞っており、JavaScriptの自由入力は対象外です。
スマートフォンだけでも練習できますか？
スマートフォン利用も想定しています。画面サイズによってはPCの方がコード全体を見やすい場合がありますが、HTML / CSS / PREVIEWを切り替えながら学習できます。