【HTML入門】改行を有効に使って読みやすいWebページを作ろう!
  • facebookページ
  • twitterページ
  • 2018.10.11

    【HTML入門】改行を有効に使って読みやすいWebページを作ろう!

    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ページを作成しましょう。


    ポテパンが提供するサービスについて

    本メディア「ポテパンスタイル」を運営する株式会社ポテパンは、エンジニアキャリア領域で複数サービスを提供しています。

    ポテパンフリーランス

    ポテパンフリーランス

    フリーランスエンジニアの方に高単価案件をご紹介しております。弊社ではフリーランス案件を常時300件ほど保有しており、その中からあなたに適した案件をご案内いたします。また、これから独立してフリーランスになる方の無料個別相談も承っております。フリーランスになった後の案件獲得方法やお金面(税金や保険など)についてお答えいたします!フリーエンジニアになりたい方向けのコンテンツも盛りだくさんです。

    ポテパンキャリア

    ポテパンキャリア

    エンジニア職専門の転職エージェントです。ポテパンキャリアでは、技術のわかるエージェントがあなたの転職をサポートします。エージェント自身がエンジニアなので、あなたと同じ目線で仕事内容や今後のキャリアについて一緒に考えることができます。年収800万円以上のハイスペック転職をご希望の方は「ポテパンプロフェッショナル」もご用意しておりますのでご利用下さいませ。

    ポテパンキャンプ

    ポテパンキャンプ

    ポテパンキャンプでは、RubyにてゼロからオリジナルのECサイトを作り上げてる3ヶ月間の実践型カリキュラムを提供しております。すでに本スクールの卒業生は、エンジニア職として様々な企業様に就職しております。なお、本スクールは受講料10万円と他社スクールに比べ格安となっており、またポテパンからご紹介させていただいた企業へ就職が決まった場合は、全額キャッシュバックいたします。



    株式会社ポテパンは、企業とエンジニアの最適なマッチングを追求しています。気になるサービスがあれば、ぜひ覗いてみてください!

    ポテクラバナー ポテプロバナー

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE