②【実践編】5分でできる！初めてのHTML作成体験

前回の記事で、HTMLは「家の骨組み」だとお伝えしました。 今回は、実際にその骨組みを1つ組み立てて、自分のブラウザに表示させてみましょう。特別なソフトは不要。パソコンさえあれば今すぐできます！

ステップ1：メモ帳（テキストエディタ）を開こう

まずは、文字を入力するためのアプリを開きます。

  • Windowsの方： 「メモ帳」
  • Macの方： 「テキストエディット」
    • ※Macの場合は「フォーマット」メニューから「標準テキストにする」を選択してください。

ステップ2：魔法のコードをコピー＆ペースト！

以下のコードを、開いたメモ帳にそのまま貼り付けてみてください。

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>私の最初のページ</title>
  </head>
  <body>
    <h1>プログラミングの世界へようこそ！</h1>
    <p>これは、私が初めて作ったWebページです。</p>
  </body>
</html>

【ポイント】

  • <h1> は「一番大きな見出し」
  • <p> は「普通の文章（段落）」 という意味です。

ステップ3：名前をつけて保存する（ここが重要！）

ここが一番のポイントです。保存する時に、ファイル名を以下のように設定してください。

  • ファイル名： index.html
  • 保存場所： デスクトップなど、分かりやすい場所

※注意： 最後に .html をつけるのを忘れないでください。これが「これはWebページのファイルですよ！」という目印になります。

ステップ4：ブラウザで開いてみよう！

保存した index.html というファイルを、普段使っているブラウザ（ChromeやSafari、Edgeなど）にドラッグ＆ドロップしてみてください。

……どうですか？ 自分の書いた文字が、Webサイトのように大きく表示されたはずです！

今回のまとめ：HTMLの正体

さっき書いたコードをよく見ると、文字が < > という記号で囲まれていましたよね。これが「タグ」です。

  1. <p> で「ここから文章だよ」と合図して
  2. こんにちは と内容を書いて
  3. </p> で「ここで文章はおしまい」と閉じる

この繰り返しでWebサイトは作られています。

次はいよいよ「色」をつけよう！

骨組みができたので、次はCSSを使って、この文字に色をつけたり、真ん中に寄せたりして「お化粧」をしていきます。

「もっと色んなタグを知りたい！」「CSSで可愛くしたい！」と思った方は、ぜひ次の記事もチェックしてくださいね。

コメント

PAGE TOP