1. テキストのフォーマット
HTMLの学習を続けよう...
段落 (p)
<p>タグは段落(パラグラフ)を作るために使うよ。段落でテキストを論理的なブロックに分けることで、読みやすさと情報の理解を向上させる。
例:
<p>これは最初の段落です。いくつかの情報を含んでいます。</p>
<p>これは2番目の段落です。最初の段落とは区切られています。</p>
太字テキスト (b)
<b>タグはテキストを太字 (bold) にするために使用するよ。これで特定の言葉やフレーズの重要性を強調できる。
<p>これは <b>重要な</b> テキストです。</p>
斜体テキスト (i)
<i>タグはテキストを斜体 (italic) にするために使うよ。用語や本の名前、外国語の単語などを示す際に頻繁に使われる。
例:
<p>これは <i>用語</i> です、それは斜体で強調されています。</p>
2. 見出し (h1 - h6)
HTMLの見出しは、コンテンツを構造化し、ページに見出しの階層を作るために使うよ。6つのレベルの見出しがあって、<h1>が最も重要で大きく、<h6>が最も小さく重要度が低い。
-
<h1>— 最も重要で大きな見出し。通常ページの主要な見出しとして使われる。 -
<h2>—<h1>に続くサブ見出しとして使われる。 -
<h3>—<h2>の下位の見出し。 -
<h4>—<h3>の下位の見出し。 -
<h5>—<h4>の下位の見出し。 -
<h6>— 最も重要度が低く、小さな見出し。
例:
<h1>ページの主要な見出し</h1>
<h2>レベル2のサブ見出し</h2>
<h3>レベル3のサブ見出し,</h3>
3. headドキュメント内の追加タグ
HTMLの例で将来出会うであろうタグがいくつかあるから、少し説明するね。
1. タグ <title>
<title> タグは、ブラウザタブに表示される ページのタイトルを設定するよ。これがユーザーが最初に目にするものになる。ほとんどのページで必ず使われる。デフォルトではHTMLエディタで追加されるけど、学習プロジェクトでは特に重要じゃない。
2. タグ <meta charset="UTF-8">
<meta>タグは <head>内で、ドキュメントの文字エンコーディングを指定するよ。 UTF-8 — これはほとんどの言語をサポートする最も一般的な文字エンコーディング。文字エンコーディングについては後で少し説明する。
3. タグ <meta name="viewport" content="width=device-width, initial-scale=1.0">
このタグは同じく <head>内にあるよ。これは、 モバイルデバイスでページを正しく表示するのに役立つ。ビューポート(viewport)の幅をデバイス画面の幅と同じにして、ページの初期スケールを設定する。
4. タグ <link rel="stylesheet" href="styles.css">
<link/> タグは、 ページのスタイリングのための外部CSSファイルを接続するよ。 rel="stylesheet"属性はこれがスタイルシートであることを示し、href="styles.css"はスタイルファイルへのパスを指定する。
5. タグ <script src="script.js" defer></script>
<script> タグは、 ページにインタラクティブ性を追加するための外部JavaScriptファイルを接続するよ。src属性はスクリプトファイルへのパスを指定し、deferはHTMLドキュメントの読み込み後にスクリプトを実行するようブラウザに指示する。
GO TO FULL VERSION