読みやすいサイト設計を!HTMLで段落分けを行う方法【初心者向け】

初心者向けにHTMLで段落分けを行う方法について解説しています。サイト内の文章を読みやすくするために段落は非常に重要です。実際にソースコードを書きながら説明しているので、HTMLに慣れていない方でもすぐ理解できるはずです。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

HTMLで文章を記入していると段落分けをしたい場面が出てくることがあると思います。段落分けを効果的に使用することができれば、ユーザーにとって読みやすい文章を作成することができます。

今回はHTMLで段落分けを行う方法について解説していきたいと思います。

HTMLについてそもそもよく分からないという方は、HTMLとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

段落分けを行うタグとその書き方

段落分けは<p>タグを使用することで可能になります。

<p>段落分けします</p>

段落分けの幅はCSSの設定にもよりますが、一行から1.5行分の空白が取られるのが一般的です。段落タグとよく似たものに<br>タグというものがあります。

<br>タグは改行タグと呼ばれ、改行を行うためのタグです。この<br>タグを複数使用することで、段落タグを擬似的に再現することもできます。

しかし、SEO(Search Engine Optimization)的に良くないことと、ソース的にも余分なソースが増えてしまいます。

改行タグはあくまで改行として使用し、<p>タグとの使い分けをしっかり行うようにしましょう。

 

実際に書いてみよう

それでは実際に段落分けを行っていきましょう。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <p>段落をします</p>
    <p>上に行間が開きます</p>
  </body>
</html>

サンプルの通り書くと段落分けを行うことができます。

また、CSSで以下のように指定すると、行間の広さを変更することができます。

line-height: 10px;

上の例の場合行間は10pxに設定されます。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

まとめ

今回はHTMLで段落分けを行う方法について解説していきました。

段落分けを行う<p>タグと、改行を行う<br>タグは、似ているようで、最初は使い分けが難しいと感じるかもしれません。

しかし、やっていく内にどんどん使い方がわかってくるので、しっかり理解を深めて行くようにしましょう。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。