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

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

HTMLの基礎「コメント/見出し/段落/改行」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • Youtube動画変換・ダウンロードおk!
  • このエントリーをはてなブックマークに追加

このページでは、

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

について説明します。

スポンサードリンク

HTML内にコメントを残す

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

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

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

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

このように記述します。複数行でもOKです。他にも、コメントを応用して、実行したくないタグをコメントにしてしまうことも可能です。これをコメントアウトするといった言い方をします。

<!--
<p>ここは実行したくない</p>
<p>ここは実行したくない</p>
<p>ここは実行したくない</p>
-->

見出しをつける

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

<h1>見出し</h1>

ここではh1タグなので、「見出し」という文字が大見出しになります。ブラウザで開いて確認すると通常の文字とのサイズの違いがわかるかと思います。また、見出しはその次の行との間隔が空くことで、より見出しだとわかりやすいように表示されます。

h1

h2

h3

h4

h5
h6

段落を分ける

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

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

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

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

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

1番目の段落です

2番目の段落です

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

改行を入れる

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

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

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

1行目です
2行目です

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

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

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。