HTMLプレビュー・学習ツール

初心者向けHTML入門

HTMLがよくわからなくても大丈夫。
コードを書いて、実際にどんなページになるのか確認しながら、少しずつHTMLを学んでみましょう。

HTMLは難しいプログラミングを最初から覚える必要はありません。まずは短いコードを書いて、表示結果を見てみるところから始めましょう。

このページの学び方：① コードを見る → ② 実際の表示を見る → ③ なぜそうなるか読む → ④ 自分で変えてみる

用語メモ：HTML＝Webページの「内容や構造」を作るもの／CSS＝色・大きさ・余白・配置など「見た目」を整えるもの／JavaScript＝ボタンを押したときなどの「動き」を付けるもの

15実際にHTMLを書いてみよう

左（スマホでは上）に書くと、右（スマホでは下）にすぐ表示されます。自由に書き換えてみましょう。

HTML入力欄

プレビュー

たとえば <h1>私のホームページ</h1> を <h1>私のAI素材サイト</h1> に書き換えると、表示される見出しも変わります。「>」と「<」の間が、画面に出る文字です。

練習課題（「入力欄に入れる」を押すと、上のエディターに答えの例が入ります）

STEP 1　HTMLの基本

STEP 2　CSSでデザイン

STEP 3　リンク・画像・カード

STEP 4　レスポンシブ対応（スマホでも見やすくする工夫）

STEP 5　JavaScript

STEP 6　実際のホームページ作成

まずは上のエディターで、小さなホームページを1ページ作ってみましょう。