神戸学院大学 経営学部 林坂ゼミ

HTML 入門トップページ

« 戻る 次へ »

HTML 入門

基本的なタグをマスターしよう

ここからは基本的なタグの使い方をマスターします.なお以降のサンプルコードは抜粋で表示しているので index.html 等の <body> ... </body> の中に記述するようにしてください.

段落を作る

HTML文書の本文は <body> ... </body> の中に直接記述することが可能ですが,通常は段落ごとに <p> ... </p> で囲います.<p> タグで囲うことで,その内容が本文であるという意味付けが明確になります.それとともに段落後に改行され,段落の行間が広がってスクリーンで本文が読みやすくなります.また,HTML 文書内で改行してもブラウザには反映されないことにも注意してください.

index.html(抜粋)
<p>
  本文は段落 (paragraph) を意味する p タグで囲います.
  改行をしてもブラウザの表示では改行しません.
  本文は段落 (paragraph) を意味する p タグで囲います.
  改行をしてもブラウザの表示では改行しません.
</p>

<p>
  新たな p タグを配置すれば,新たな段落になるので,
  改行されて,行間も若干広がります.
  新たな p タグを配置すれば,新たな段落になるので,
  改行されて,行間も若干広がります.
</p>

ブラウザでの表示結果

本文は段落 (paragraph) を意味する p タグで囲います. 改行をしてもブラウザの表示では改行しません. 本文は段落 (paragraph) を意味する p タグで囲います. 改行をしてもブラウザの表示では改行しません.

新たな p タグを配置すれば,新たな段落になるので, 改行されて,行間も若干広がります. 新たな p タグを配置すれば,新たな段落になるので, 改行されて,行間も若干広がります.

なお,Visual Studio Code では Emmet による省略形が利用できます.たとえば p{本文です} と入力して Tab または Enter を押すことで,<p>本文です</p> のように展開されます.

目次に戻る