HTML/CSSをブラウザで学ぶ
HTML/CSSの基本、ライブプレビュー、レイアウト、レスポンシブ対応の記事をまとめた学習ハブです。コードを書いた直後に見た目を確認し、少しずつ変更しながら学べます。
HTML/CSSのおすすめ学習順序
- 見出し、文章、リンク、画像をHTMLで配置する
- 色、文字サイズ、余白をCSSで変更する
- classを使って複数の要素を整理する
- FlexboxとGridでレイアウトを作る
- メディアクエリでスマホ表示を調整する
AI Work StudioでHTML/CSSを確認する
HTMLタブで構造、CSSタブで見た目を編集し、「実行」を押してプレビューを確認します。変更が見えない場合は、class名とセレクタ、ファイル名、タグや括弧の閉じ忘れを確認してください。
よくあるつまずき
- HTMLとCSSでclass名が一致していない
- CSSファイルのパスやファイル名が異なる
- 閉じタグや閉じ波括弧が不足している
- 固定幅のためスマホで横にはみ出している
よくある質問
HTML/CSSの変更はどこで確認しますか？
AI Work Studioのプレビューで確認します。反映されない場合は実行またはプレビュー更新を押してください。
CSSが反映されないときは何を確認しますか？
HTMLとCSSのclass名、CSSファイルの読み込み、セレクタの書き方、閉じ括弧を確認します。
スマホ向けの表示も確認できますか？
短いページの確認はできます。画面幅に応じたレイアウトにはメディアクエリを使い、実機でも最終確認してください。