最強のスマホ・パソコンライフ: 「h1やh2」などの見出し・段落、「divやspan」などのブロックレベル要素・インライン要素‐HTML・CSSを学ぶ

2021年3月24日水曜日

これまでに、<p>や<br>または<br />、<ui>、<li>などの要素について学ぶ機会がありましたが、他にもホームページを構成する主な要素がありますので説明します。

見出し

ブロガーBloggerでは見出し機能があります。

通常は「標準」となっていますが、クリックすると「主見出し」「見出し」「小見出し」「準見出し」「段落」「標準」とメニューがあり、文字にカーソルを合わせて表現したい見出し種類を選択します。文字が太字になったり大きくなったり強調されます。

「主見出し」は文字が大きく良く目立つように表示されます。下へ行くほど文字が小さくなりインパクトが小さいです。

<h1>文字を入力します</h1>・・・「主見出し」

<h2>文字を入力します</h2>・・・「見出し」

<h3>文字を入力します</h3>・・・「小見出し」

<h4>文字を入力します</h4>・・・「準見出し」

<h6>まであるのですが、私には必要ありません(笑)

<p>文字を入力します</p>・・・「段落」

<p><br /></p>・・・改行して段落を表しています

「<div>文字を入力します</div>」と「<span>文字を入力します</span>」は単体では意味を持ちません。この後に続く文字等をブロック化してスタイル等を適用することが出来ます。

ブロックレベルの要素でグループ化ができるので、見出しや段落、リストなどと同じく前後に改行が入ります。

使用例「後に続く文字や対象の位置を指定する。」

<div align="center">文字を入力します</div>・・・文字を中央に表示する

<div align="right">文字を入力します</div>・・・文字を右に表示する

<div align="left">文字を入力します</div>・・・文字を左に表示する

インライン要素でブロックレベル要素の中に記述して使用する。改行が入りません。

使用例「後に続く文字や対象の色を指定します」

<span style="color:blue">文字を入力します</span>・・・文字を青にします

<span style="color:white">文字を入力します</span>・・・文字を白にします

<span style="color:red">文字を入力します</span>・・・文字を赤にします

<p>文字を<span style="color:blue>入力</span>します</p>・・・「入力」の文字だけを青にします。