HTMLの基礎「コメント/見出し/段落/改行」

HTMLの基礎「コメント/見出し/段落/改行」

HTMLの基礎「コメント/見出し/段落/改行」

このページでは、

  • HTML内にコメントを残す
  • 見出しをつける
  • 段落を分ける
  • 改行を入れる

について説明します。

HTML内にコメントを残す

HTMLのソースコードの中には、ブラウザで開いた時には表示されない”コメント”を残すことができます。

メモ書きのような用途で使えて、ソースコードの内容について説明を加えておいたりします。そうすることで、後でソースコードを見た時にどんな内容か一目でわかります。 コメントの入れ方は至って簡単で、”<!–“と”–>”の中にコメントを書くだけです。

“<!–” ~ “–>” の間に書かれた内容がコメントとして扱われるため、ブラウザでは表示されません。

<!--これはコメントです-->

このように記述します。複数行でもOKです。

<!--
<p>ここは表示したくない</p>
<p>ここは表示したくない</p>
<p>ここは表示したくない</p>
-->

見出しをつける

見出しは<h1></h1>~<h6></h6>で表現し、 デフォルトだとh1から数字が大きくなるにつれてフォントサイズが小さくなります。

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

ブラウザで開いて確認すると通常の文字とのサイズの違いがわかるかと思います。

段落を分ける

段落を表現するにはpタグを使います。pはparagraphの略で、段落を意味します(そのままですね)。

<p>ここが段落になります</p>

もう一つ段落を追加してみましょう。以下のように記述してみてください。

<p>1番目の段落です</p>
<p>2番目の段落です</p>

ブラウザで確認すると段落毎に少し行間が空いているのがわかると思います。pタグで段落を分けるとpタグが終了した次の行との間に間隔が空きます。

では、間隔を空けずに改行するにはどうすればいいでしょうか。次をご参照いただければと思います。

改行を入れる

段落を分けるのではなく改行を入れたい場合、brタグを使用します。brには終了タグがないので、<br>と記述するだけで改行されます。

<p>1行目です<br>2行目です</p>

ブラウザで確認すると、先ほどのpタグと違って改行された部分の行間が詰まっていると思います。このように単純に改行を入れたい場合は、brタグを使うと便利です。

今回説明した内容はHTMLを書くにあたって、非常に重要なものばかりです。色々と試してみて、確実に覚えましょう。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です