ウェブサイト作りで使えるHTMLタグ(レイアウト用タグ)

HTML

ウェブサイト作りで使えるレイアウト用タグ

ここでは、文章のレイアウトのために使えるタグを紹介します。

hr タグ(横線)

●文章を横線で区切るために使用される hr タグ

<hr>

<表示例>


このタグは開始タグのみで、終了タグを書く必要はありません。
xhtml で記入する場合は<hr />と書きます。

使用方法としては単に<hr>と書くだけではなく
属性の指定で変更できます。

しかし、HTML5では hrタグの以下の装飾要素が廃止になりました。

align,size,width,noshade

ですから、廃止されていない色指定を紹介します。

水平線の色指定

水平線は、カラーネームやカラーコード
による色指定ができます。

<hr color=”色”>

<表示例><hr color=blue>

br タグ(改行)

●改行のために使用される br タグ

<br>

このタグも hr タグと同じように終了タグはありません。

xhtml で記入する場合は<br />と書きます。
ちなみにワードプレスブログでは改行が自動的に
挿入されます。

無料ブログでも設定を変更していなければ
自動的に改行が挿入されます。

p タグ(段落)

●段落に使用される p タグ

<p></p>

文章中の一つのまとまりである段落を作成する
HTMLタグです。

表示位置属性の指定
左寄せで表示:<p align=”left”></p>
中央揃えで表示:<p align=”center”></p>
右寄せで表示:<p align=”right”></p>
両端揃えで表示:<p align=”justy”></p>

詳細な指定は、スタイルシートで出来ます。

<p style="color:red">
  文字色を赤にします。
</p>
<表示例>

文字色を赤にします。

p タグの前後に、1行分改行が入ります。
改行目的での使用は避けてください。

p タグを改行目的で使用すると間延びしてしまいます。
改行目的の場合、br タグを使用してください。

div タグ(ブロックレベル要素)

●ひとかたまりの範囲として表す div タグ

<div></div>

divタグそれ単体では特に意味を持たないタグで、
囲った部分をブロックレベル要素として
グループ化することができます。

p タグと同じ表示位置属性の指定が出来ます。

左寄せで表示:<div align=”left”></div>
中央揃えで表示:<div align=”center”></div>
右寄せで表示:<div align=”right”></div>
両端揃えで表示:<div align=”justy”></div>

詳細な指定は、スタイルを適用します。

<div style="background-color: lightyellow">
  背景色を淡黄色にします
</div>
<表示例>
背景色を淡黄色(lightyellow:#ffffe0)にします

p タグでは段落を定義する際に改行を前後に入れますが、
div タグは改行が入りません。

div タグは主にスタイルシートで
囲った部分をグループとして
まとめて指定する目的で使用されています。

それで、全体的なレイアウトでのブロック分け
使われています。

span タグ(インライン要素)

●ひとかたまりの範囲として表す span タグ

<span></span>

spanタグそれ単体では特に意味を持たないタグで、
囲った部分をインライン要素として
指定することができます。

詳細な指定は、スタイルを適用します。

背景色を<span style="background-color: aquamarine">
アクアマリン(aquamarine:#7fffd4)</span>にします。
<表示例>
背景色をアクアマリン(aquamarine:#7fffd4) にします。

spanタグは主にスタイルシートで
囲った部分にのみ指定する目的で
使用されています。

なので、強調するときや文字色変更など、
一部分だけの変更によく使われています。

先ほど、divタグとspanタグで
ブロックレベル要素インライン要素という
言葉が出てきました。

同じひとかたまりでも違う要素なので、
ウェブブラウザ上の表示が変わってきます。

次回は、その違いについて説明します。

コメント

タイトルとURLをコピーしました