ウェブサイト作りで使えるレイアウト用タグ
ここでは、文章のレイアウトのために使えるタグを紹介します。
hr タグ（横線）
●文章を横線で区切るために使用される hr タグ。
<hr>
＜表示例＞
このタグは開始タグのみで、終了タグを書く必要はありません。
xhtml で記入する場合は<hr />と書きます。
使用方法としては単に<hr>と書くだけではなく
属性の指定で変更できます。
しかし、HTML5では hrタグの以下の装飾要素が廃止になりました。
align,size,width,noshade
ですから、廃止されていない色指定を紹介します。
水平線の色指定
水平線は、カラーネームやカラーコード
による色指定ができます。
<hr color=”色”>
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>p タグでは段落を定義する際に改行を前後に入れますが、
div タグは改行が入りません。
div タグは主にスタイルシートで
囲った部分をグループとして
まとめて指定する目的で使用されています。
それで、全体的なレイアウトでのブロック分けに
使われています。
span タグ（インライン要素）
●ひとかたまりの範囲として表す span タグ。
<span></span>
spanタグそれ単体では特に意味を持たないタグで、
囲った部分をインライン要素として
指定することができます。
詳細な指定は、スタイルを適用します。
背景色を<span style="background-color: aquamarine">
アクアマリン（aquamarine：#7fffd4）</span>にします。背景色をアクアマリン（aquamarine：#7fffd4） にします。
spanタグは主にスタイルシートで
囲った部分にのみ指定する目的で
使用されています。
なので、強調するときや文字色変更など、
一部分だけの変更によく使われています。
先ほど、divタグとspanタグで
ブロックレベル要素とインライン要素という
言葉が出てきました。
同じひとかたまりでも違う要素なので、
ウェブブラウザ上の表示が変わってきます。
次回は、その違いについて説明します。
コメント