はいどうもこんにちは、双極くんです。
今回なんですけども、HTMLの段落と見出しの書き方を学んで行きたいと思います。
段落
まずは段落です。これに使われるタグは
- p→パラグラフ(段落)の頭文字
です。
見出し
次に、見出しです。これに使われるタグは6段階用意されています。
本や文章で言えば、章や節といった意味合いで使われると思っていただければ良いと思います。
このタグは、大きい方から
- h1
- h2
- h3
- h4
- h5
- h6
と6段階あります。
このhとは、ヘッドライン(最も目立つように書かれた文字)という言葉のの頭文字をとったものです。
下記に参考としてLorem Ipsumについてご紹介します。
Lorem Ipsum
具体的にはこのような文章のことです。
- Lorem ipsum.
- Lorem ipusum dolor sit amet. consectetur adipiscling elit. Pellentesqre id ultrices massa. Proin dignissim augue tempor, pretium doler vitae, pulvinar tellus. Nullam scelerisque leo ac pellentesque porttitor. Praesent lacus nunc, consequat et vehicula in, eleifend eget velit. Maecenas ornare odio et odio porttitor pulvinar. Ut non uruna odio. Praesent adipiscing mollis mauris, a tincidunt felis feugiat id. Mauris vitae auque ante. Vestibulumante ipsum primis in faucibus orci luctus posuere cubilia Curae; Morbri tempor, nistl et fringilla auctor,ante tortor ornare leo, sit amet aliquet nunc nulla id mi.Maecenas mollis,odio eget fermentum porta, nisl sem congue nisi, nec tincidunt lorem justo in purus.
これはダミーとして使うために用意されたものです。この文章のことをローレンイプサムと言います。略してリプサムと言う事もあるようです。
この文章は単語自体が、どの言語でも意味を持たないという事をメリットとして、意味を考えてしまわずに、デザインだけをチェックすることが出来る文章として、良く使われます。
では、実際にこの文章を使って書いて行きましょう。
実践
段落について確認をしていく
今回はこのようなファイルをすでに用意しておきました。
前回の学習でも触れましたが、インデントをすることで、どこからどこまでがタグの内側なのか、分かるようにしています。
これは、後からの修正やメンテナンスを楽にしますので、この癖をつけるようにしてください！
では、pタグでパラグラフのブロックを用意しましょう。その内側に先ほど紹介したLorem Ipsum(ローレンイプサム)の文章を貼り付けてみます。
これを保存して、ブラウザで開いてみましょう。
このように表示されました。1つの段落として表示されている状態です。
ただ、これだけでは良く分かりません。実際に段落がいくつかあったらどう表示されるのか、上記ファイルのLorem Ipsum(ローレンイプサム)の文章をコピーして、あと２回ほど繰り返して書いてみましょう。
合計で３つの同じ文章の段落を記入しました。
これを保存して、ブラウザを更新してみましょう。
このように同じ文章が３回繰り返され、段落と段落に間が少し広く空いています。
これによって段落が切れていることが良く分かります。
この段落と段落に間が少し広く空いているのは、ブラウザの初期の設定に基づいているものです。私たちが何か書いたから段落と段落が少し空いたスタイルになったという訳ではありません。
では、再度HTMLファイルに戻って、今度は見出しについて確認をしていきましょう！
見出しについて確認をしていく
まず、見出しの一番大きなものを用意して行きましょう。
h1です。
そして、その中に、”これはh1です”と入力してみます。
これを保存して、ブラウザを更新してみましょう。
このように、一番上に”これはh1です”と表示されました。
同じように、h2、h3なども確認して行きましょう。
では、<h1>これはh1です</h1>の行をコピーして、あと５つ増やしてみます。
<h1>これはh1です</h1>
<h1>これはh1です</h1>
<h1>これはh1です</h1>
<h1>これはh1です</h1>
<h1>これはh1です</h1>
<h1>これはh1です</h1>
この様にします。
そして、次のように直して、閉じます。内容もタグに合わせて直します。
<h1>これはh1です</h1>
<h2>これはh2です</h2>
<h3>これはh3です</h3>
<h4>これはh4です</h4>
<h5>これはh5です</h5>
<h6>これはh6です</h6>
実際のファイルでは次のようになります。
これを保存して、ブラウザを更新してみましょう。
このようにしてサイズが少しずつ小さくなるような形で表示されました。これが見出しの大きさを表しています。
このhのタグですが、h1の次は必ずh2であるべきです。
そして、h2の次に来るものがh3であるべき…というのは、文書の構造のルールとして決まっています。
例えば、本の中に章が無いのに、いきなり節が登場する、というようなことがあれば、非常に違和感を感じるかも知れませんよね。
ですから、一番大きいブロックがあって、その中に小さいブロックが存在するという考え方のもとにh1の次はh2が来るというように表記して行きましょう！
まとめ
今回は、見出しと段落について学ぶことが出来ました。
ちなみに、VScodeでファイルをそのままコピーすると、Lorem Ipsumの文章が上手く記事の中に納まらなかったので、残念ながらスクショを載せることになってしまったので分かりにくかったかも知れませんね(^^;
このブログ自体も、基本的に見出しと段落で構成されている事が私でも分かります。
この見出しに使うｈタグと段落に使うpタグもHTMLに欠かせないものとして覚えておきましょう！
学び
準備をしておこう。チャンスはいつか訪れる。
