【html &css】文章に見出しや改行・段落をつけよう!ブログをするなら必須項目!

スポンサーリンク


こんにちは。みやごん(@pokki1216)です。

前回はhtmlを使ってブラウザ上で文章を表示させましたね。

これだけでは、ただ文章が羅列されているだけになってしまうので、文章に見出しや改行・段落をつけて見栄えをよくしていきましょう!

htmlで文章に見出し・段落をつける

今回作る最終形がこちら

ただの文章ではなく見出しが付いていることがわかりますね。

段落もわかれていて読みやすくなっています。

では早速かいていきましょう!その前にhtmlの基本を知りたい方は【html&css】文章をブラウザで表示してみよう!文字化けに注意!をご覧ください。

文章に見出しをつける方法

まずは見出しをつけていきましょう!見出しをつけるには以下のコードを使います。

<html lang = "ja">
<head>
  <meta charset="UTF-8">

  <title>
    文章に見出し・段落をつける
  </title>
</head>
<body>
  <h1>見出し1</h1> <!-- ①大見出し -->
  <h2>見出し2</h2> <!-- ②中見出し -->
  <h3>見出し3</h3> <!-- ③小見出し -->
</body>
</html>

これをブラウザで表示させると以下のようになります。

見出しをつけるにはh1タグというものを使います。この時の数字が小さいほど大きい見出しを意味します。

h1→h2→h3となるほど小さくなるということですね。

これらを使い分けていくのですが、基本的な使い方として、h1タグは1回しか使いません!

これはなぜかというと、h1部分はブログでいう一番最初のところを意味するからです。

つまりブログタイトルですね。※htmlでかく”title”とは違います。

タイトルがいくつもあることはおかしいので1回しか使いません。

ブログ中で見出しとして使われているのは主にh2、h3タグです。h4を使う人もいるとは思いますが僕は使用したことがありません。

h2、h3はこのブログでいうと以下の部分です。

今回の学習では、h1とh2を使用します。

まず大見出しを作りましょう。

<html lang = "ja">
<head>
  <meta charset="UTF-8">

  <title>
    文章に見出し・段落をつける
  </title>
</head>
<body>
  <h1>ここに文章をかく</h1>
</body>
</html>

ヘッダーやタイトルを作る時と同様に、h1のコードとそれを閉じるコードの間に文章をかきます。

<h1>ここにかく</h1>

今回の最終形に向けてかいたコードがこちら

<html lang = "ja">
<head>
  <meta charset="UTF-8">

  <title>
    文章に見出し・段落をつける
  </title>
</head>
<body>
  <h1>文章に見出し・段落をつけよう</h1>
</body>
</html>

続いてh2タグもつけていきましょう。

h2もh1と同じようにかきます。

<html lang = "ja">
<head>
  <meta charset="UTF-8">

  <title>
    文章に見出し・段落をつける
  </title>
</head>
<body>
  <h1>文章に見出し・段落をつけよう</h1>
  <h2>見出しのつけ方</h2>
</body>
</html>

これらのコードはコピーできるので、もしできない場合にはコピー&ペーストでどこが違っているか確認しましょう。

では上のコードをブラウザで確認します。

できましたね!

これで見出しはオッケーです。

文章に改行や段落をつける方法

見出しができたので、本文に改行や段落のつけ方について学習します。

まず、よくある間違いがこちら。

<html lang = "ja">
<head>
  <meta charset="UTF-8">

  <title>
    文章に見出し・段落をつける
  </title>
</head>
<body>
  <h1>文章に見出し・段落をつけよう</h1>
  <h2>見出しのつけ方</h2>
  まず、h1で大きい見出しをつける <!-- テキスト上で自分で改行 -->
  次にh2で小さい見出しをつける
</body>
</html>

ちゃんと文章改行できてるし何が悪いんだ!!

と思いますが、これをブラウザで表示するとこうなります。

あれ、改行できてない・・

実は、基本的にプログラミングにおいて”enter”、”return”キーによる改行は改行とみなされません。

なので、改行するだけでもコードをかかないとダメなんですね。

改行するために必要なコードは下のコード

<br>

これを文章と文章の間に入れるだけです。

このコードを入れておけば、テキスト上で改行してなくても改行されます。例えば、

<html lang = "ja">
<head>
  <meta charset="UTF-8">

  <title>
    文章に見出し・段落をつける
  </title>
</head>
<body>
  <h1>文章に見出し・段落をつけよう</h1>
  <h2>見出しのつけ方</h2>
  まず、h1で大きい見出しをつける<br>次にh2で小さい見出しをつける
</body>
</html>

上のコードでは文章が完全に繋がっているようにみえますが、間に改行コードが入っているので見た目は下のようになります。

なので特にenterキーなどで改行する必要はないのですが、自分で何をかいているかわからなくなったりするので自分自身でわかりやすいようにかきましょう!

では次に段落についてです。

段落は、ご存知の通り話が変わるときに使用します。

ブラウザ上での見た目としては、改行も段落もあまり変わりませんが、[marker]コードをかくときにみやすくなる[/marker]のでここで覚えておきましょう。

段落は以下のコードでつけることができます。

<html lang = "ja">
<head>
  <meta charset="UTF-8">

  <title>
    文章に見出し・段落をつける
  </title>
</head>
<body>
  <h1>文章に見出し・段落をつけよう</h1>
  <h2>見出しのつけ方</h2>
  <p>ここに文章をかく</p>
  <p>ここに次の文章をかく</p>
</body>
</html>

pというタグではさむだけで段落をつけることができます。

今回の最終形に向けてかいたコードがこちら

<html lang = "ja">
<head>
  <meta charset="UTF-8">

  <title>
    文章に見出し・段落をつける
  </title>
</head>
<body>
  <h1>文章に見出し・段落をつけよう</h1>
  <h2>見出しのつけ方</h2>
  <p>まず、h1で大きい見出しをつける</p>
  <p>次にh2で小さい見出しをつける</p>
</body>
</html>

そうすると・・・

目的の形と一致します!

これで改行・段落の方法も完璧です!

最後に

今回は見出しや改行・段落をつける方法について学習しました。

最終的なコードを以下に示します。

<html lang = "ja">
<head>
  <meta charset="UTF-8">

  <title>
    文章に見出し・段落をつける
  </title>
</head>
<body>
  <h1>文章に見出し・段落をつけよう</h1>
  <h2>見出しのつけ方</h2>
  <p>まず、h1で大きい見出しをつける</p>
  <p>次にh2で小さい見出しをつける</p>
</body>
</html>

これらの内容もWebページを作るときには必ず使用するものなので、ぜひ覚えておいてください!

最後までありがとうございました。

ブログランキング・にほんブログ村へ

スポンサーリンク


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です