logo

パレット - カラフルに🎨

Palette — ビジュアルページビルダー、デザインの専門知識は不要です。

ライブデモ パレットをダウンロード

Scroll
  1. ホーム
  2. Blog

HTML の第一歩 — レッスン 2 — p、div タグとその違い。br タグ

04/12/2019, by Ivan

前のレッスンでは、最初の html ドキュメントを作成しました。つまり、html コードをテキストエディターで書き、すべての変更はブラウザでページを更新して（通常は F5 キーで）確認することがもうわかっています。

さて、このレッスンでは引き続きテキストを扱い、テキストを包むためのタグ span、p、div を使用します。また、br タグも見ていきます。

<html>
  <head>
    <title>私の最初の HTML ドキュメント</title>
  </head>
  <body>
    <h1>私の最初の HTML ドキュメント</h1>

  </body>
</html>

これがこの先扱っていくコードです。

次のような行を追加しましょう。

<html>
  <head>
    <title>私の最初の HTML ドキュメント</title>
  </head>
  <body>
    <h1>私の最初の HTML ドキュメント</h1>
    <p>P タグ内の最初の行</p>
    <p>P タグ内の 2 番目の行</p>
    <div>DIV タグ内の最初の行</div>
    <div>DIV タグ内の 2 番目の行</div>
  </body>
</html>

ブラウザでドキュメントを開くと、p タグは文を別々の行に表示しますが、違いもあります。私のブラウザでは、デフォルトで P タグに上下の余白を設定しました。一方、div タグでは行同士がくっついています。というのも、p はテキストの段落のタグで、div タグはブロック、領域のタグだからです。つまり、テキスト用のタグが必要なら P タグを使い、特定の領域を区別する必要がある場合、例えばその領域に色の塗りつぶしや境界線を付けるなら、DIV タグを使います。

サイトにテキストがある場合、それは p または h1〜h6 タグの中になければなりません。もちろん、そのテキストが補助的なもの、つまりページの装飾のためのものでない限りです。したがって、テキストは次のようになるべきです。

<html>
  <head>
    <title>私の最初の HTML ドキュメント</title>
  </head>
  <body>
    <h1>私の最初の HTML ドキュメント</h1>
    <div>
          <p>P タグ内の最初の行</p>
      <p>P タグ内の 2 番目の行</p>
    </div>
  </body>
</html>

このように body>div>p という順序になります。覚えておいてください、p タグの中に div タグがあってはいけません。body>p>div は間違いです。

次に、テキストを別の行に改行する方法を見てみましょう。テキストの段落が巨大になることがあります。その場合、テキストをいくつかの段落に分けるか、改行タグ br を追加するかの選択肢があります。<br /> タグは単一タグなので、スラッシュを大なり記号の前に置きます。

<html>
  <head>
    <title>私の最初の HTML ドキュメント</title>
  </head>
  <body>
    <h1>私の最初の HTML ドキュメント</h1>
    <div>
      <p>HTML 言語は、イギリスの科学者ティム・バーナーズ＝リーによって、およそ 1989〜1991 年にジュネーブ（スイス）の欧州原子核研究機構の中で開発されました。HTML は、組版の専門家ではない人々が使えるような、科学技術文書を交換するための言語として作られました。HTML は、構造的・意味的要素（記述子）の小さなセットを定義することで、SGML の複雑さの問題をうまく解決しました。記述子はよく「タグ」とも呼ばれます。HTML を使えば、比較的シンプルでありながら美しく整えられたドキュメントを簡単に作成できます。ドキュメント構造の簡素化に加えて、HTML にはハイパーテキストのサポートが導入されました。マルチメディア機能は後で追加されました。当初、HTML 言語は、再生（表示）手段に依存しないドキュメントの構造化とフォーマットの手段として考案・作成されました。理想的には、HTML マークアップされたテキストは、さまざまな技術的装備を持つ機器（現代のコンピューターのカラー画面、オーガナイザーのモノクロ画面、サイズの限られた携帯電話の画面や、テキストの音声再生プログラム）で、スタイル的・構造的な歪みなく再生されるはずでした。しかし、現代の HTML の応用は、その本来の目的とはかけ離れています。例えば、今読んでいるページのフォーマットに何度も使われている <TABLE> タグは、ドキュメントにごく普通のテーブルを作成するためのものですが、ご覧のとおり、ここには 1 つもテーブルがありません。時が経つにつれ、HTML 言語のプラットフォーム非依存という基本的なアイデアは、マルチメディアおよびグラフィックデザインへの現代のニーズに、いわば犠牲として捧げられました。</p>
    </div>
  </body>
</html>

行が大きくなりすぎました。テキストドキュメント内でこれを分割しても、html には何の影響もありません。

<html>
  <head>
    <title>私の最初の HTML ドキュメント</title>
  </head>
  <body>
    <h1>私の最初の HTML ドキュメント</h1>
    <div>
          <p>HTML 言語は、イギリスの科学者ティム・バーナーズ＝リーによって、およそ 1989〜1991 年に開発されました。
      （テキストを複数行に分けて書いても）
      </p>
    </div>
  </body>
</html>

これではブラウザで何も変わらず、私たちを救ってくれません。そこで <br /> タグが役立ちます。各行の末尾にそれを置いてみましょう。

<html>
  <head>
    <title>私の最初の HTML ドキュメント</title>
  </head>
  <body>
    <h1>私の最初の HTML ドキュメント</h1>
    <div>
      <p>HTML 言語は、イギリスの科学者ティム・バーナーズ＝リーによって開発されました。<br />
      （各行の末尾に br タグを置く）<br />
      </p>
    </div>
  </body>
</html>

これでブラウザは改行する必要があることを理解します。<br /> タグがそれを知らせます。

また、テキストをいくつかの段落に分けることもできます。p タグを使ってみましょう。

<html>
  <head>
    <title>私の最初の HTML ドキュメント</title>
  </head>
  <body>
    <h1>私の最初の HTML ドキュメント</h1>
    <div>
      <p>（最初の段落のテキスト）<br />
      </p>
      <p>
      （2 番目の段落のテキスト）</p>
    </div>
  </body>
</html>

ブラウザでページを更新すると、テキストが 2 つの段落に分割されているのがわかります。