ここでは、IT系企業の新入エンジニア研修向けにHTMLを解説しています。
デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、そんなあなたのためのページです。
新人エンジニアが最初に知っておきたいHTMLの学び方
なぜ、段落と改行を学ぶのか、その理由。
前回は、「見出しで文章の構造を表現する」方法を学びました。
今回は、段落と改行を使って文章をさらに読みやすくする方法を学びましょう。
段落を使って意味のまとまりごとに区切りをつけた記事は読みやすくなります。
そのため、当社の新人エンジニア研修でもこの知識は基本中の基本と言えます。
段落
段落とは、テキストのブロックのことです。
次のアウトプットは3段落の例です。
＜アウトプット＞
ひつまぶし
味噌カツ
手羽先
＜ソースコード＞
<p>ひつまぶし</p> <p>味噌カツ</p> <p>手羽先</p>
段落を作るには<p>を使います。
“P”はparagraph（段落）の頭文字です。
HTMLファイルに改行コードがあってもブラウザには無視されてしまうんですね。
そこで<P>を使います。
<P>には前後の行にマージンが入りますので、それが次の改行との違いです。
また、段落には複数の文が集まった文章のまとまりという意味があります。
したがって、単に改行したいときには次の<br>を使います。
改行
もしも、次の金子みすゞの詩を以下の＜アウトプット＞のように改行したい場合はどうしたらいいでしょうか？
朝焼け小焼だ、大漁だ大羽鰮（おおばいわし）の大漁だ。浜は祭りのようだけど、鰮（いわし）のとむらいするだろう。
＜アウトプット＞
朝焼け小焼だ、 大漁だ
大羽鰮（おおばいわし）の 大漁だ。
浜は祭りの ようだけど、
海のなかでは 何万の、
鰮（いわし）のとむらい するだろう。
以下のように単にソースコードの中で改行するだけでは改行位置に半角スペースが入るだけで、改行はされません。
＜ソースコード：改行したつもりの例＞
<p>朝焼け小焼だ、 大漁だ 大羽鰮（おおばいわし）の 大漁だ。</p> <p>浜は祭りの ようだけど、 海のなかでは 何万の、 鰮（いわし）のとむらいするだろう。</p>
＜アウトプット：改行したつもりの例＞
朝焼け小焼だ、 大漁だ 大羽鰮（おおばいわし）の 大漁だ。 浜は祭りの ようだけど、 海のなかでは 何万の、 鰮（いわし）のとむらい するだろう。
以上のように半角スペースが入るだけです。
そこで登場するのが<br>タグです。
＜ソースコード：改行できている例＞
<p>朝焼け小焼だ、 大漁だ <br> 大羽鰮（おおばいわし）の 大漁だ。</p> <p>浜は祭りの ようだけど、<br> <br> 海のなかでは 何万の、 <br> 鰮（いわし）のとむらい するだろう。</p>
このように<br>は単独で使い、閉じタグは必要ありません。
“br”はBreak（改行）の略です。
テキストや画像等をブラウザ上で改行させたいときに使用します。
よく見ると<br>と<p>では行間のスペースが違っていますね。
<p>の方が段落のまとまりですので、行間が広くなります。
なお、
- <br>は、<p>の中で使う
- <br>は2つ以上連続で使わない
ということを心がけてください。
(上記のイワシの詩は、文学的な表現で途中で改行を入れていますが…)
そうしないとブラウザのバージョンによって見え方が違ってしまいます。
<br>と同様に閉じタグがなく、単独で使うタグに水平線を表示する<hr>タグがあります。
horizontal rule（水平方向の罫線）の略語です。
<hr>
以下のような線です。
以上、今回は「段落と改行」を学びました。
次回は、「スタイルを設定して表現力アップする」方法について学びましょう。
【今回の復習Youtube】
段落と改行で見やすくする（新人エンジニア研修向け解説）最後までお読みいただきありがとうございます。
最後までお読みいただきありがとうございました。