ここでは、IT系企業の新入社員向けにHTMLを解説しています。

デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、そんなあなたのためのページです。

3.段落と改行

段落

段落とは、テキストのブロックのことです。

次のアウトプットイメージは3段落の例です。

<アウトプットイメージ>

ひつまぶし

味噌カツ

手羽先

<ソースコード>

段落を作るには<p>を使います。

“P”はparagraph(段落)の頭文字です。

HTMLファイルに改行コードがあってもブラウザには無視されてしまうんですね。

そこで<P>を使います。

<P>には前後の行にマージンが入りますので、それが次の改行との違いです。

また、段落には複数の文が集まった文章のまとまりという意味があります。

したがって、単に改行したいときには<br>を使います。

改行

改行のアウトプットイメージを確認しましょう。

<アウトプットイメージ>

朝焼け小焼だ、 大漁だ
大羽鰮(おおばいわし)の 大漁だ。

浜は祭りの ようだけど、

海のなかでは 何万の、
鰮(いわし)のとむらい するだろう。

<ソースコード>

改行は<br>で付けることができます。

“br”はBreak(改行)の略です。

テキストや画像等をブラウザ上で改行させたいときに使用します。

前述の通り、HTMLソース中の改行はブラウザでは半角スペースとして表示され、改行されません。

そこで<br>を使うのです。

よく見ると<br>と<p>では行間のスペースが違っていますね。

<p>の方が段落のまとまりですので、行間が広くなります。

なお、

<br>は、<p>の中で使う
<br>は2つ以上連続で使えない

ということを心がけてください。

そうしないとSEO(Search Engine Optimization)対策上悪影響があると言われています。

 

ちなみに<br>は単独で使い、閉じタグは必要ありません。

 

 

 

以上、今回は「段落と改行」を学びました。

次回は、「リスト表示でみやすくする」方法について学びましょう。

 

新人エンジニア向けHTML講座の一覧に戻る