こんにちは！名無しのnです
HTMLを作ろう #1 き・ほ・ん 『名無しn講座』
はじめに
Webページを作りたいけど、何から始めればいいのか分からない…そんなあなたに、HTML、CSS、JavaScriptの基本を会話形式で楽しく学べる講座をお届けします。
登場キャラたちと一緒に、Webの世界に一歩踏み出してみましょう！
🎭 登場人物
- 自分：Web初心者。いろいろ知りたい好奇心旺盛タイプ。
- ソースケ：ソースコード愛にあふれる陽気なガイド役。
- スタイル先生：CSSとセマンティック構造の重要性を説く冷静な解説者。
💻 Scene1：HTMLってなに？
自分：
「そろそろWebページってのを作ってみたいな。でも、何から始めればいいのか分かんないや…。」
ソースケ：
「やあやあ！その悩みにズバッと応えるのがオレ、ソースケさ！まずは『HTML』から始めようじゃないか！」
自分：
「HTML？ よく聞くけど、どんな役割があるの？」
スタイル先生：
「HTMLはWebページの骨組みを作るためのマークアップ言語です。文章の構造や意味を定義するために使われます。」
ソースケ：
「そう！HTMLで見出し、段落、画像、リンク……そういった“パーツ”を組み立てていくんだ！」
🧱 Scene2：基本のHTML構造
自分：
「なるほど、実際のコードも見てみたいな！」
ソースケ：
「よっしゃ！コレがHTMLの“基本型”だ！」
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>はじめてのページ</title>
</head>
<body>
<h1>こんにちは！</h1>
<p>これは初めてのWebページです。</p>
</body>
</html>
スタイル先生：
「<!DOCTYPE html>は、HTML5であることを宣言する部分。
<meta charset="UTF-8">は文字コードの指定ね。日本語が文字化けしないように大事な一行です。」
自分：
「ふむふむ、ページのタイトルは<title>で決まるんだね！」
ソースケ：
「そのとおり！ブラウザのタブの名前になるんだぜ！」
✨ Scene3：タグの世界を冒険しよう
スタイル先生：
「HTMLには他にも多くのタグがあります。例を挙げてみましょう。」
| タグ | 役割 |
|---|---|
<h1>～<h6>
|
見出し。数字が大きいほど重要。 |
<p> |
段落 |
<a> |
リンク |
<img> |
画像を表示 |
<ul> / <ol>
|
箇条書きリスト |
ソースケ：
「タグってまるで魔法の呪文みたいだよな！“これが見出し〜”とか“ここに画像〜”って指示してるみたい！」
自分：
「うん、だんだん楽しくなってきたかも！」
📚 Scene4：まとめと次回予告！
スタイル先生：
「今日覚えたことは、HTMLがWebページの基礎構造を作るものであること。そして、いくつかの基本的なタグの使い方ですね。」
ソースケ：
「次回はCSSでこのページをド派手にデザインしていくぜ！色をつけたり、文字を飾ったり…楽しみにしてろよ！」
自分：
「やった〜！なんかサイト作れそうな気がしてきた！ありがとう、ソースケ！先生もありがとう！」
📝 おわりに
今回は「HTMLとは何か？」「HTMLの基本構造」「よく使うタグたち」について紹介しました！
次回はCSSの世界に突入して、見た目の魔法をかけていきましょう！
* この講座は「名無しn講座」シリーズとして続編も展開予定！
応援、コメントL大歓迎です！
情報
https://qiita.com/tags/%e7%84%a1%e3%81%97%e3%81%aen%e8%ac%9b%e5%ba%a7
をみてぇぇ