ホームページ作成の文章に利用する「段落」と「改行」のHTMLタグ!

ホームページ制作の文章に利用する 「段落」と「改行」のHTMLタグ!

ホームページを組み立てるにあたり必要なタグを少しずつ学んでいきます。ココでは文章(段落)を書くための「p」タグと文章を改行する「br」タグを紹介します。HTMLでは意味を知るとそこまで難しくはありません。自分でホームページが完成できるようにチャレンジしていきましょう。

こんにちは!あーるくんです。ヾ ^_^♪
Adobe提携校でWEBクリエイター講師を2年ほどしていました。しっかりと学べるように記事を書いていくので閲覧よろしくお願い致します。

もくじ

ホームページ作成の文章に利用する「段落」と「改行」のHTMLタグ!

文章を書くためのタグを勉強するんだね!

あーる君コアラ

まずは段落と改行を覚えるわ♪

あーる子コアラ

段落に必要な<p>タグ

文章を書くために必要なのが<p>タグです。 段落ごとにタグを書いてブラウザで表示します。HTMLの記述では<p>で始まり</p>で閉じます。下記の文章で確認してみましょう。

例:ブラウザで文章を閲覧したとき

ホームページを自分で作成して立ち上げるならどんなサイトを作りたいですか?自分だけの独自デザインで趣味のサイトを制作して、インターネット上で共有することもできます。

お店のホームページなどは宣伝にもとても役に立ちます。地域の掲示板やイベントなど使い方は様々です。どの場面にも利用できるのがホームページやウェブサイトの魅力ですね!

例:HTMLで見た時のソースコード

<p>ホームページを自分で作成して立ち上げるならどんなサイトを作りたいですか?自分だけの独自デザインで趣味のサイトを制作して、インターネット上で共有することもできます。</p>

<p>お店のホームページなどは宣伝にもとても役に立ちます。地域の掲示板やイベントなど使い方は様々です。どの場面にも利用できるのがホームページやウェブサイトの魅力ですね!</p>

例文を見ていただいたように文章は<p>で始まり</p>で閉じます。そうすることで「一つの段落」となります。文章を段落で切りたい場合には</p>タグで閉じます。

段落内での改行<br>タグ

段落内の文章を改行したいときに使うタグが<br>タグです。空要素と呼ばれるタグで終了タグがありません。

例:ブラウザで文章を閲覧したとき

ホームページを自分で作成して立ち上げるならどんなサイトを作りたいですか?
自分だけの独自デザインで趣味のサイトを制作して、インターネット上で共有することもできます。

お店のホームページなどは宣伝にもとても役に立ちます。
地域の掲示板やイベントなど使い方は様々です。どの場面にも利用できるのがホームページやウェブサイトの魅力ですね!

例:HTMLで見た時のソースコード

<p>ホームページを自分で作成して立ち上げるならどんなサイトを作りたいですか?<br>
自分だけの独自デザインで趣味のサイトを制作して、インターネット上で共有することもできます。</p>

<p>お店のホームページなどは宣伝にもとても役に立ちます。<br>
地域の掲示板やイベントなど使い方は様々です。どの場面にも利用できるのがホームページやウェブサイトの魅力ですね!</p>

こちらも例文のように<br>を記述した箇所で改行されます。独立したタグなので終了タグは必要ありません。

ここでは2つのタグを覚えましょう!

タグ意味
<p> </p>文章を書くためのタグ。段落ごとに開始タグと終了タグを用いて記述します。
<br>段落内の文章で改行したいときに使うタグ。独立したタグなので終了タグはありません。

Lesson.8