定義・強調・改行・spanタグ

dl,dt,ddタグ

dl,dt,ddは定義用のセットタグで、テーブルタグのtr,th,tdと似ています。 

<!-- HTML -->
<dl>
<dt>2008.5.13</dt>
<dd>ホームページを開設しました。</dd>
<dt>2008.5.13</dt>
<dd>サーバーを変更しました。</dd>
<dt>2008.5.13</dt>
<dd>ドメインを取得しました。</dd>
</dl>

会社ページで言うと、更新情報とか概要とかに使うケースが多いです。

この状態でもいいのですが、上から下に並ばっていってしまうのがいやなら、CSSでdtとddを同じ列に来るように調整してあげましょう。 

/* CSS */
dl {
	width:500px;
	}
dt,dd {
	line-height:30px;
	border-bottom:dotted 1px #888;
	}
dt {
	width:100px;
	}
dd {
	margin-left:100px;
	margin-top:-30px;
	}

ポイントは、ddのスタイルでmarginにネガティブマージンが指定してあること。これを指定してdd要素を上に移動させてdtとddを重ね、重なってしまったddを右に移動させるためにmargin-leftを指定しています。

em、strongタグ

emもstrongも強調を表すタグで、くくられた文字はemの場合イタリックに、strongの場合太字になります。

テキストを太字にするタグはbタグになりますが、太くするだけならCSSのfont-weightプロパティを使えばよいので使う機会はないです。

この二つは太字とかイタリックとか見た目じゃなくて、強調されることでページ内での重要度が増し、検索エンジンにそのキーワードで拾われやすくなるというメリットがほとんどです。

emは強調、strongはより強い強調を表します。 

<!-- HTML -->
<strong>強い強調</strong>
<em>強調</em>

brタグ

このタグを打つと次の行から改行されて表示されます。

2連続で打てば2行、3連続で打てば3行・・・改行されます。 

<!-- HTML -->
<br />　<!--1行改行 -->
<br /><br /><br />　<!--3行改行 -->

spanタグ

divタグのインライン要素版で、それ自体には意味はありません。

文章の特定の文字だけにスタイルを適用したいときに多用します。 

<!-- HTML -->
<p>バラの花びらは<span>赤色</span>です。</p>

/* CSS */
span {
	color:#f00;
	}

こうすると「赤色」という文字だけが赤くなります。

コメントor補足情報orご指摘あればをお願いします。

（件名or本文内でキーワード検索できます）



  • << 前のページ
  • 次のページ >>
ページトップへ