Simple HTMLHTMLリファレンス

Main Menu

おすすめリンク

Site Info.

HTMLリファレンス

CSSリファレンス

その他の記事

HTMLリファレンス インデックス

スポンサーリンク

HTMLタグリファレンス

Webサイトのレイアウト

HTML文書は主にブロックレベル要素とインラインレベル要素によって構成されます。ネット上に存在するWebサイトは、これらの要素の組み合わせやスタイリングの適用によって構成・表現されています。Webサイトをデザインする上で、HTMLの構造の理解は欠かすことが出来ません。

標準的なテンプレート構造

HTML文書は、Doctype宣言とHTML文書本体(HTMLタグ)から構成されます。
HTMLタグで囲まれた部分は、更にheadタグで囲まれたヘッダ部分とbodyタグで囲まれた文書の内容部分から構成されます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html lang="ja">	HTML文書本体の開始タグ
	<head>		開始ヘッダタグここにtitleやmetaタグを記述する
	</head>		終了ヘッダタグ
	<body>		開始ボディタグここに文書の内容を記述する
	</body>		終了ボディタグ
</html>			HTML文書本体の終了タグ

ブロックレベル要素Block level elements

Webサイトの構造ブロックレベル要素は幅と高さで構成される矩形領域で、Webサイトのページを構成する基本的なパーツの単位です。

単体で1つのブロックとして定義されている要素の他に、グループ化要素で複数の要素をまとめて1つのブロックとして扱うことができます。

代表的なブロックレベル要素
<h1~h6> <p> <address> <pre>
代表的なグループ化要素
<ul> <ol> <dl> <div> <span>

インライン要素Inline level elements

インライン要素は、主に行コンテンツ(文字や単語など、文章の一部区間)を構成するもので、ブロックの中身を構成するパーツとも言えます。

注意点としては、インライン要素の中にはブロックレベル要素を含ませることができないので、その場合にはCSSプロパティ'display: inline'を使用してブロックレベル要素をインライン要素に変換する必要があります。

代表的なインライン要素
<a> <img> <b> <i> <em> <br> <span>

グループ化Grouping

ブロックレベル要素やインライン要素は、複数の要素をまとめてグループ化することができます。グループ化タグには内包する要素の種類を問わない汎用グループ化タグと、テーブルやリストなどの特定の要素をグループ化するものに分けられます。

代表的なグループ化タグ一覧
タグ対象要素B/I
<div>主にブロックレベル要素を対象とした汎用グループ化要素Block
<span>インライン要素を対象とした汎用グループ化要素Inline
<table>テーブル関連要素のグループ化Block
<ul>汎用リストのグループ化 <li>Block
<ol>序列リストのグループ化 <li>Block
<dl>定義リストのグループ化 <dt> <dd>Block

フロートFloating

ブロックレベル要素、インライン要素はCSSの'float'プロパティを使ってそれぞれのレベル内においてフロートさせる (浮力を持たせる) ことができます。

要素内容は通常、記述順通りに表示されていきますが、フローティングを指定した要素は、周囲の要素(同じ親要素の範囲内)に対して浮力を持った状態となります。
結果として、左へのフローティングを指定した場合は他の要素が右側に回りこむように表示されます。

センタリング(中央寄せ)Centering

ブロックレベル要素とインライン要素(ブロック内のテキスト)とでは、センタリングの方法が異なります。ページ全体をセンタリングする場合には全体をdivで囲んでグループ化(ブロック化)し、左右marginにautoを指定します。

ブロックのセンタリング
div#container	{		ページ全体を包み、ブロック化する
	width:760px;		ページ全体の幅を指定
	margin-left:auto;	左マージンにautoを指定
	margin-right:auto;	右マージンにautoを指定
	}
テキストのセンタリング
p	{
	text-align: center;	p要素内のテキストをセンタリングする
	}

HTMLのコメントComment

要素の範囲外の任意の場所にコメントを挿入することができます。コメント文は先頭と最後をそれぞれ<!--および-->で囲みます。途中で改行されていても問題ありませんが、ハイフンを含ませることはできません。

<!-- コメント文 -->
スポンサーリンク
Copyright (C) 2010 Simple HTML. All Rights Reserved.