バナー画像

Webページは自由に文章等をレイアウトできる反面、漫然と文章や数式を書き続けていると「ここで改行しないと見づらくなる」とか「もっと行間を開けたほうがポイントがわかりやすい」といった場面が出てきます。しかし、HTMLが認識する「コンテンツ」は飽くまで「記述されている内容」であるため、改行位置や段落、レイアウトなどの見栄えについては逐次指定をしなければなりません。

ここでは、改行とそれに付随する行間のとり方を説明します。

HTMLで改行をする方法

レイアウトを指定しなかった場合、エディタでは折角見やすく段落ごとに整えたのにも関わらず、ブラウザの表示では「記述されている内容だけ」となってしまいます。

brタグで改行

br(break)タグは、改行したい場所に記述します。
brタグ1つにつき1回の改行が行われますので、続けてbrタグを記述するとその分空行が増えていきます。

pタグで改行

p(paragraph)タグは「段落」を表します。
指定された範囲の下に行間が確保されます。
厳密な用途としては改行ではありませんが、改行を含めたレイアウトの指定となります。

preタグで改行

pre(Preformatted Text)タグは「整形済みテキスト」を表します。
記述したHTMLをすでに整形されたものとして、等幅フォントで改行や空行をそのまま表示しますので、長い文章で途中にbrタグやpタグを入れるのが大変なときに便利です。
ただし日本語テキストでは、改行や空行が無視されてしまいますので、cssでpreタグにwhite-space属性としてpre-wrapを与える必要があります。
また、ブラウザによってwhite-space属性の挙動が違いますので、その違いも意識しなければなりません。

スタイルシートで改行幅を広げる

例えば数十行分の改行を続けたい場合、brタグを数十回も繰り返すのは大変です。
cssの margin-bottom(margin-top)を使って要素の下(上)に余白をつけることで指定した高さの余白が生まれ、改行と同じ効果があります。

まとめ

思いを込めれば込めるほど、多くの文字が画面を埋めていきます。書き手の思いとは裏腹に、読み手はウンザリ・・・とならないように、適度な「余裕」をもってWebページを作成しましょう。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。