『作って学ぶ HTML＆CSSモダンコーディング』（マイナビ出版）
P24
こんばんは、Misuzuさん♪
『作って学ぶ HTML＆CSSモダンコーディング』（マイナビ出版）のP24に出てくるタグの説明を、ひとつずつ丁寧にご説明しますね。
---
💡1. <h1> タグ — 見出し
意味：Heading（見出し）の略で、「ページ内の一番大きなタイトル」として使います。
使い方：文書の構造を示すために使われます。<h1>から<h6>まであり、数字が大きくなるほど小さな見出しになります。
例：
<h1>私のブログへようこそ</h1>
> 🔍【補足】1ページに<h1>は基本的に1つが推奨され、SEO（検索エンジン対策）的にも重要です。
---
💡2. <strong> タグ — 強調
意味：「強く意味を持たせる」テキストの強調。視覚的には通常太字になります。
使い方：重要な語句や警告など、意味的に強調したいときに使います。
例：
<p>これは<strong>とても重要</strong>なポイントです。</p>
> 🔍【補足】見た目の強調だけなら<b>でもできますが、<strong>は「意味的な強調」なので、スクリーンリーダーなどにも配慮されています。
---
💡3. <figure> タグ — 図版（画像や図表など）
意味：画像や図などの「独立した視覚コンテンツ」を入れるためのタグです。
使い方：画像とキャプション（説明文）をセットで表示するために使います。
例：
<figure>
<img src="flower.jpg" alt="花の写真">
<figcaption>満開の桜</figcaption>
</figure>
> 🔍【補足】中に<figcaption>（図のキャプション）を書くことで、視覚的にも意味的にもセットになります。
---
💡4. <p> タグ — 段落（ブロック要素）
意味：Paragraph（段落）の略で、「文章のひとまとまり」を表す基本的なブロック要素。
使い方：テキストを段落ごとに分けて整えるために使います。
例：
<p>これは最初の段落です。</p>
<p>これは次の段落です。</p>
> 🔍【補足】段落と段落の間には自動的に余白（マージン）が付きます。
---
📌まとめ
タグ 説明 役割
<h1> 見出し1 文書構造の最上位見出し
<strong> 強調 意味的に重要な強調
<figure> 図版 画像や図と説明のセット
<p> 段落 テキストのブロック分け
---
ご質問や例文の応用、他のタグについても知りたければ、いつでも聞いてくださいね♪
ChatGPT先生より📘
ーーーーーーーーーーーーーーーーーーーー
〔👩💼タグの実践〕
2025年8月6日(水)原爆記念日に思う: 浅田美鈴
人間の尊厳が守られなかった歴史の的な出来事でした。
 |
| 平和をいのります PAKUTASO フリー素材 2024 DL |
これは最初の段落です。
これは次の段落です。
