見出し <h>

解説
1. 見出しとは
2. hタグの書き方

問題に挑戦！

進捗を変更する

このページは無料で始められるオンラインプログラミング学習サービス「DigSkill」の一般公開ページです。
この前後のページを見たい方や学習内容に興味を持たれた方は、こちらをクリックしてコース一覧をご覧ください！

解説

1. 見出しとは

見出しとは、コンテンツのタイトルや、目次にあたる文章のことを指します。

例）見出しとは

<大見出>HTML ＆ CSSコース</大見出>
本コースではWebページ制作において必要不可欠な技術である、Webデザインについて学びます。

<小見出>HTMLとは</小見出>
HTMLは「Hyper Text Markup Language」の略です。
Webページの画面構造を定義する言語です。

<小見出>CSSとは</小見出>
CSSは「Cascading Style Sheets」の略です。
Webページの見た目を定義する言語です。

HTMLで見出しを表現するには、hタグを使います。
hタグは、見出しのレベルに応じて、「h1」～「h6」の6段階あります。

※h は Heading の略です。

2. hタグの書き方

構文：hタグ（見出しを表す）

<!-- 見出しレベル1 -->
<h1></h1>

<!-- 見出しレベル2 -->
<h2></h2>

<!-- 見出しレベル3 -->
<h3></h3>

<!-- 見出しレベル4 -->
<h4></h4>

<!-- 見出しレベル5 -->
<h5></h5>

<!-- 見出しレベル6 -->
<h6></h6>

例）見出しレベルに応じて文章をマークアップする

<h1>料理メモ</h1>
<h2>カレーのレシピ</h2>
<h3>材料</h3>
<p>人参, ジャガイモ, 玉ねぎ, ルー</p>
<h3>作り方</h3>
<p>1. 食材を刻みます</p>
<p>2. 食材を炒めます</p>

表示結果｜例）見出しレベルに応じて文章をマークアップする

コラム

デフォルトスタイルシート

デフォルトスタイルシートとは、HTMLの各タグに標準で設定されているスタイルのことです。デフォルトスタイルシートにより、CSSを指定していなくてもhタグのレベルに応じて文字の大きさが変わりますが、一般的に文字の太さや大きさはデフォルトのままは使わず、スタイルを上書きして使用します。
HTMLのタグは見た目ではなく、あくまで文書構造を定義することを意識しましょう。

問題

実践問題

(1)	VSCodeを起動し、ヘッダーメニューの「ファイル」から、「workspace_html_css」フォルダーを開いてください。
(2)	「workspace_html_css」フォルダー内の、「html_basic」フォルダー内に、「h_tag」フォルダーを新規作成してください。
(3)	「h_tag」フォルダー内に、「index.html」を新規作成し、フッターメニューの「Go Live」ボタンをクリックしてブラウザで表示してください。

設計書（1）

見出し（レベル1）	HTML ＆ CSSコース
見出し（レベル2）	HTMLとは
見出し（レベル2）	CSSとは

下記コードを該当ファイルにペーストし、各問に答えてください。

<!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>
    <!--
    （問1）「設計書（1）」を参考に、11, 13, 18行目を適切にマークアップしてください。 -->
    HTML ＆ CSSコース
    <p>本コースではWebページ制作において必要不可欠な技術である、Webデザインについて学びます。</p>
    HTMLとは
    <p>
        HTMLは「Hyper Text Markup Language」の略です。<br>
        Webページの画面構造を定義する言語です。
    </p>
    CSSとは
    <p>
        CSSは「Cascading Style Sheets」の略です。<br>
        Webページの見た目を定義する言語です。
    </p>
</body>
</html>

想定結果を表示

解答

（問1）解答を表示

<h1>HTML ＆ CSSコース</h1>
<p>本コースではWebページ制作において必要不可欠な技術である、Webデザインについて学びます。</p>
<h2>HTMLとは</h2>
<p>
    HTMLは「Hyper Text Markup Language」の略です。<br>
    Webページの画面構造を定義する言語です。
</p>
<h2>CSSとは</h2>
<p>
    CSSは「Cascading Style Sheets」の略です。<br>
    Webページの見た目を定義する言語です。
</p>

ソース全文を表示

<!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>
    <!--
    （問1）「設計書（1）」を参考に、11, 13, 18行目を適切にマークアップしてください。 -->
    <h1>HTML ＆ CSSコース</h1>
    <p>本コースではWebページ制作において必要不可欠な技術である、Webデザインについて学びます。</p>
    <h2>HTMLとは</h2>
    <p>
        HTMLは「Hyper Text Markup Language」の略です。<br>
        Webページの画面構造を定義する言語です。
    </p>
    <h2>CSSとは</h2>
    <p>
        CSSは「Cascading Style Sheets」の略です。<br>
        Webページの見た目を定義する言語です。
    </p>
</body>
</html>