見出しの設定

sample

<h1>見出しh1</h1>
<h2>
見出しh2</h2>
<h3>
見出しh3</h3>
<h4>
見出しh4</h4>
<h5>
見出しh5</h5>
<h6>
見出しh6</h6>

preview

見出しh1

見出しh2

見出しh3

見出しh4

見出しh5
見出しh6

explain

CSSを使ったりする上で、html文書は正しく、タグの役割を正しく使うことが重要です。

xhtmlであろうとなかろうと、始めからタグは正しく書く癖をつけたほうがいいです。

文章の構造を正しくマークアップするためには、きちんと「見出し(h1h2h3h4h5h6)」「本文」という構造を意識して組み立てましょう。

段落を定義する

sample

<h1>段落を定義する</h1>


<p>このページではHTMLを正しくマークアップするために、<br />
タグの役割をきちんと理解して使いこなそう!</p>

 

<p>改行と段落もきちんと区別することが大切です。</p>

preview

段落を定義する

このページではHTMLを正しくマークアップするために、
タグの役割をきちんと理解して使いこなそう!

改行と段落もきちんと区別することが大切です。

explain

段落ごとには<p>・・・</p>で囲います。

正しくマークアップする上で閉じタグ</p>は必須です。

特定の範囲指定

sample

<div align="left">1.ブロックレベル要素左寄せ</div>

<div align="center">2.ブロックレベル要素センター寄せ</div>

<div align="right">3.ブロックレベル要素→寄せ</div>

<div align="center">4.ブロックレベル要素<span class="tx_blue1">センター</span>
寄せ</div>

<div align="center">5.ブロックレベル要素<div class="tx_blue1">センター</div>>
寄せ</div>

preview

1.ブロックレベル要素センター寄せ
2.ブロックレベル要素センター寄せ
3.ブロックレベル要素センター寄せ
4.ブロックレベル要素センター寄せ
5.ブロックレベル要素
センター
寄せ

explain

<div>・・・ブロックレベル要素

<span>・・・インライン要素

"<div>"は、ブロックレベル要素であり、「ブロックで囲う」といった感じのもの。囲ってしまうので次に記載されたものは自動で改行されます。

"<span>"は、役割はブロックレベル要素と似ているもので、それの「改行されない」バージョンです。

両方とも単品ではあまり役割をもちません。
divに関してはalign="・・・"で左、真ん中、右寄せにできますが。)

基本的にCSSなどと組み合わせて使います。

Sampleの<div class="tx_blue1">class="tx_blue1"の部分はこのページで設定しているCSSで「テキストの色は青」と指定しています。