【HTML】最低限のHTMLファイルの書き方 ― コピペで使えるテンプレート付き
この記事で解決すること 「HTMLを書いてみたいけど、何から始めればいいか分からない」 この記事では、HTMLファイルの最低限の構造と、コピペで使えるテンプレートを紹介します。 HTMLとは HTMLは、Webページの「骨組み」を作る言語です。ブラウザで見ているすべてのWebページは、HTMLで書かれています。 HTMLは「プログラミング言語」ではなく「マークアップ言語」です。計算や処理をするのではなく、「ここは見出し」「ここは段落」「ここは画像」と、コンテンツの構造を指定するだけです。 最低限のHTMLテンプレート 以下をコピペして、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>はじめてのWebページ</h1> <p>HTMLで作った最初のページです。</p> </body> </html> 保存したファイルをブラウザにドラッグ＆ドロップすると、Webページとして表示されます。 各行の意味 <!DOCTYPE html> 「このファイルはHTML5で書かれています」という宣言です。おまじないだと思ってください。必ず1行目に書きます。 <html lang="ja"> HTMLの始まりを示すタグです。lang="ja" は「このページは日本語です」という意味。 <head> の中身 ページの「裏方情報」を書く場所です。ブラウザの画面には表示されません。 <meta charset="UTF-8"> → 文字化けを防ぐ設定 <meta name="viewport" ...> → スマホで見たときにちゃんと表示される設定 <title> → ブラウザのタブに表示されるタイトル <body> の中身 ここに書いたものがブラウザに表示されます。 <h1> → 一番大きい見出し <p> → 段落（普通の文章） よく使うタグ一覧 <!-- 見出し（h1が最大、h6が最小） --> <h1>大見出し</h1> <h2>中見出し</h2> <h3>小見出し</h3> <!-- 段落 --> <p>これは段落です。</p> <!-- リンク --> <a href="https://example.com">リンクテキスト</a> <!-- 画像 --> <img src="photo.jpg" alt="写真の説明"> <!-- リスト --> <ul> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ul> <!-- 太字 --> <strong>太字のテキスト</strong> <!-- 改行 --> <br> <!-- 水平線 --> <hr> 実践：自己紹介ページを作ってみよう 以下をコピペして profile.html として保存し、ブラウザで開いてみてください。 ...