ハーマ先生
は～い！今日の講義を担当させていただくハーマ先生です！
ハーマ先生って誰やねんと思ったら記事の最下部に説明書いてあるから見てね～(投げやり)
世界一わかりやすい！～講義形式で学ぶサイト制作～:第11回
ハーマ先生
こんにちは、ウィーブ君！今日はHTMLについて、さらに深く理解していくよ。ウェブページを作成するうえで、HTMLは基本中の基本だし、その動作や特徴を知っておくとウェブ開発がもっと楽しくなるんだ。」
いいね！HTMLのタグとかは聞いたことあるけど、具体的にどんな役割があるのかよくわからないから、詳しく教えて！
ウィーブ・ウェブ君
1. HTMLの基本構造とは？
ハーマ先生
HTMLは基本的に、ウェブページの骨格を作るための言語なんだ。まずは、基本の構造から確認してみよう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルページ</title>
</head>
<body>
<h1>こんにちは、世界！</h1>
<p>これはHTMLの基本構造です。</p>
</body>
</html>
ハーマ先生
この基本構造の中で、いくつかの重要な要素があるよ。
<!DOCTYPE html>: 「これは、ブラウザに対して、このページがHTML5で書かれていると伝える宣言だよ。」<html lang="ja">: 「このタグはページ全体の開始を示しているんだ。lang="ja"は、このページが日本語で書かれていることを表すよ。」<head>タグ: 「ここには、メタ情報（文字エンコーディングやページのタイトルなど）が含まれる。ページ自体には表示されないけど、ブラウザに重要な情報を伝えるんだ。」<body>タグ: 「これはページの実際に表示される部分を含んでいるんだ。見出しやテキスト、画像などがここに置かれるんだよ。」
2. 見出しタグ：構造を整理するための基本タグ
なるほど。でも、ページに見出しをつけたいんだけど、それはどうやってやるの？
ウィーブ・ウェブ君
ハーマ先生
それなら、見出しタグを使うといいよ。HTMLには6つの見出しタグ（<h1>から<h6>）があるんだ。
<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
ハーマ先生
<h1>が一番大きくて重要な見出しで、<h6>になると小さな見出しになるよ。これでページの階層を視覚的に整理することができるんだ。
3. 段落タグ（<p>）と改行タグ（<br>）
じゃあ、文章を段落に分けたい場合はどうするの？
ウィーブ・ウェブ君
ハーマ先生
そのときは、段落タグ（<p>）を使うんだ。これで、文章をきちんと整形できるよ。
<p>これは段落です。HTMLでは段落をこのように定義します。</p>
でも、段落の途中で改行をしたいときはどうすればいいの？
ウィーブ・ウェブ君
ハーマ先生
その場合は、改行タグ（<br>）を使うといいよ。このタグを挿入すると、次の行に強制的に移動できるんだ。
<p>これは段落です。<br>ここで改行されます。</p>
4. リンク（<a>）と画像（<img>）の表示
次に、リンクや画像をページに追加する方法が知りたいな！
ウィーブ・ウェブ君
ハーマ先生
いい質問だね。リンクを作成するには、<a>タグを使うんだ。href属性でリンク先のURLを指定できるよ。
<a href="https://example.com">リンク先に飛ぶ</a>
ハーマ先生
クリックすると別のページに移動するんだね！
その通り。次に、画像を表示するには**<img>タグ**を使うよ。src属性で画像ファイルのパスを指定して、alt属性で画像が表示されなかったときの説明文を入れておこう。
ウィーブ・ウェブ君
5. フォーム（<form>）の基本
ウェブページでよく見るフォームもHTMLで作れるんだよね？
ウィーブ・ウェブ君
ハーマ先生
もちろん！フォームは**<form>タグ**で囲んで、さまざまな入力フィールドを組み合わせて作ることができるよ。
<form action="/submit" method="post">
<label for="name">名前:</label>
<input type="text" id="name" name="name">
<label for="email">メール:</label>
<input type="email" id="email" name="email">
<input type="submit" value="送信">
</form>
ハーマ先生
ここでは、<input>タグを使って、テキスト入力フィールドとメール入力フィールドを作っているんだ。submitボタンを押すと、データが指定された場所に送信される仕組みだよ
6. HTMLの属性の使い方
ハーマ先生
ところで、HTMLタグの中に属性が入っていることがあるけど、どういう意味があるの？
いい質問だね！属性は、タグに追加の情報を提供するものだよ。たとえば、idやclass属性がその代表例だ。
ウィーブ・ウェブ君
id属性
<p id="intro">この段落は一意のIDを持っています。</p>
- 説明: 「
id属性は、要素に一意の識別子を付与するためのものだよ。CSSやJavaScriptで特定の要素を操作するときに便利なんだ。」
class属性
<p class="highlight">この段落はクラス属性を持っています。</p>
<p class="highlight">この段落も同じクラス属性を持っています。</p>
- 説明: 「
class属性は、複数の要素に同じクラス名を与えて、スタイルや動作をまとめて適用できるんだ。ページ全体で同じスタイルを再利用したいときに使うといいね。」
まとめ
ハーマ先生
これで、基本的なHTMLタグとその使い方をしっかりと学べたね。HTMLは単純だけど、しっかり使いこなすことで、ウェブページを自由自在に作れるようになるんだよ。
うん、見出しや段落、リンクや画像の使い方がわかったから、実際に自分でページを作ってみたくなったよ！
ウィーブ・ウェブ君
ハーマ先生
次はCSSやJavaScriptを使って、さらにページを装飾したり、動きをつけてみよう！今日学んだことをしっかり活用して、素敵なサイトを作ってみてね。
HTMLの基本タグやその動作を理解することで、ウェブページの構築がスムーズになります。次のステップでは、CSSやJavaScriptを使って、ページのデザインやインタラクティブな機能を追加してみましょう！
コメント