のはこごと

モノヅクリノハコの中の人の雑記です

【HTMLとCSSの基礎の基礎講座】その5:段落・区切り線・改行

5日目です。HTMLは少し見慣れてきたでしょうか?

そして自分はこの一人AdventCalendar企画、何日まで続くのでしょうか?

25日全部続けられたらいいいなーとは思いますが、ま、基本的にめんどくさがりなので

その辺の保証はできないという常に崖っぷち精神で本日も参りたいと思います。

 

さて、本日はいきなり完成形を見ていただこうと思います。

img1

 

まあ、よくある文章の形ですが、これをHTMLで見てみましょう。

はい、ドーン。

 

img2

 

一見大したことではなさそうですが、実はPCが読むためにはこんだけ書いている訳です。

では、ひとつずつ解説していきましょう。

 

<p></p>

パラグラフ、段落です。本文に使われるごく一般的なタグです。

これで書くと、段落の上下に1文字分の感覚が開きます。

 

<br>

ブレイク、改行(強制改行)です。とじタグはありません。html上ではいくらEnterキーを押そうとも、見た目が改行されるだけで、実際はこのタグを使わない限り、ブラウザサイズいっぱいまで文字が続きます。

 

<hr>

ホライゾンタルルール(←若干あやふや)、とじタグなし。

HTML5での意味付けは、区切り線・段落の区切りです。

5以前では、ただの水平線扱いでしたが、5になって意味がちょっと変わりました。

他にも5になり使用する意味が変わったタグというものが存在しますので、5より前の

ver.で主に触ってた方は注意しましょう。5から始めた方は、そういうものだと認識してOKです。

 

webサイトを構成する上で、

●サイトの全体を見てコンテンツの確認

●コンテンツの意味や目的を知る

●最低限必要なもの(不可欠なもの)

を考えて全体的な構成をマークアップしていく事はとても重要ですので、

ただ打つだけでなく、この構成にしたらこうなる…とイメージしながらマークアップしていく事はとても大切です。