ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

見出しの入力

見出し文字を入力してみよう

見出しタグを使って、「見出し文字」を入力してみましょう。

見出しを入力するには

見出しを入力するには、h要素を使用します。

<h1>見出し</h1>

h要素には1~6までのレベルがあり、1が最も強調され、6が最も小さい見出しとなります。
一般的に使用されるのは<h1>から<h4>までが多いようです。
必要に応じて使い分けてOKです。

[見出しの表示例]

見出し<h1>

見出し<h2>

見出し<h3>

見出し<h4>

見出し<h5>
見出し<h6>

それではさっそく、<body>の下に、見出しタグ<h1>を入力してみましょう!

[記述例]

<html>

<head>

<meta charset="utf-8">

<title>ホームページの勉強中</title>

</head>

<body>

<h1>簡単なページの制作</h1>

<p>HTMLの文字の入力</p>

<p>タグを使わずに文字を入力することも可能ですが、文法的には間違いです。<br>文字を入力する際は、必ず適切なタグで囲むよう気をつけましょう。</p>

</body>

</html>

h要素もほかのタグと同様に、終了タグを入力する必要があります。</h1>を忘れないようにしましょう。

入力が完了したら、ブラウザで確認してみましょう。以下のように表示されていれば成功です。

h1が表示された画面

<h1>で入力したので、「簡単なページの制作」がデカデカと表示されていますね。

h2の入力

ではついでにもうひとつ。
<h2>も入れてみましょう

<h2>文字の入力について</h2>

入力する場所はさきほどの<h1>~</h1>の下です。

[記述例]

<html>

<head>

<meta charset="utf-8">

<title>ホームページの勉強中</title>

</head>

<body>

<h1>簡単なページの制作</h1>

<h2>文字の入力について</h2>

<p>HTMLの文字の入力</p>

<p>タグを使わずに文字を入力することも可能ですが、文法的には間違いです。<br>文字を入力する際は、必ず適切なタグで囲むよう気をつけましょう。</p>

</body>

</html>

こちらも編集・保存が完了したら、ブラウザで確認してましょう!
以下のように表示されていれば成功です。

h2が表示された画面

<h2>で入力したので、<h1>よりも若干小さめな見出しが表示されましたね。

基本的に見出しは、上から順に<h1><h2><h3>・・・と使います。読みやすい文書構成にするためにも、見出しは正確に使いましょう。

覚えておきたいポイント

スペースが空いて表示される

見出しも<p>タグと同じように、上下に1行分のスペースが空いて表示されます。

見出しは重要

実は見出しタグは<title>タグと同様に非常に重要な要素です。適切に使用することで、GoogleやYahooで検索したときにホームページが上位に表示されやすくなる可能性があります。

リストの表示
« 前のページへ 文字の入力と改行

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。