HTML 基本チュートリアル

HTMLメディア

HTMLリファレンスマニュアル

HTML5 基本チュートリアル

HTML5 API

HTML5 メディア

HTML ビデオ（Video）再生 HTML ブロック

HTML レイアウト

合理的ページレイアウトは非常に重要であり、ページが美しいかどうかだけでなく、ユーザーの体験に影響を与えます；悪いページレイアウトでは、ユーザーの体験が非常に悪く、ユーザーを引き留めることも難しいです。

HTMLレイアウトの実現方法

1、HTMLのtableテーブルを使用してページのレイアウトを構築し、内容を追加します。
2、divを使用して、floatまたはflexとともにページをレイアウトします。

シンプルなtableレイアウトの例

例

!DOCTYPE　html>
<html>
<head>
　　　　<meta　charset="UTF-8">-8">
　　　　<title>テーブル</title>
</head>
<body>
　　<table　border="1"　cellspacing="1"　cellpadding="1"　align="center">
　　　　　　<tr>
　　　　　　　　　　<td　colspan="2"　align="center"　　style="background:　#0395e1">トップナビゲーション</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　　　<td　style="background:　#f25807"　align="center"　height="300px"　width="100px">
　　　　　　　　　　　　　　コンテンツ<br>サイドバー
　　　　　　　　　　</td>
　　　　　　　　　　<td　style="background:　red"　align="center"　width="400px">
　　　　　　　　　　　　　　メインコンテンツ
　　　　　　　　　　</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　　　<td　colspan="2"　style="background:　darkorchid"　align="center">ボトム</td>
　　　　　　</tr>
　　</table>
</body>
</html>

テストを見てみる ‹/›

オンラインのさらに多くの例

div要素を使用したウェブレイアウト
div要素を使用してレイアウトを追加する方法

table要素を使用したウェブレイアウト
table要素を使用してレイアウトを追加する方法

ウェブレイアウト

ほとんどのウェブサイトでは、内容を複数の列に配置します（雑誌や新聞のように）。

ほとんどのウェブサイトでは<div>または<table>要素を使用して多列を作成することができます。CSSは要素の位置を定義したり、ページに背景や豊かな色を追加するために使用されます。

HTMLのtableタグを使用して美しいレイアウトをデザインすることはできますが、tableタグはレイアウトツールとして使用することは推奨されません - テーブルはレイアウトツールではありません。

HTML レイアウト - div要素を使用して

div要素はHTML要素をグループ化するためのブロックレベルの要素です。

以下の例では、5つのdiv要素を使用して多列レイアウトを作成しています：

例

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本チュートリアル(oldtoolbag.com)</title>　
</head>
<body>
　
<div　id="container"　style="width:520px">
　
<div　id="header"　style="background-color:#FFA300;">
<h1　style="margin-bottom:0;">主要的ウェブページH1タイトル</h1></div>
　
<div　id="menu"　style="background-color:#FF9a00;height:200px;width:120px;float:left;">
<b>メニュー</b><br>
HTML<br>
CSS<br>
JavaScript</div>
　
<div　id="content"　style="background-color:#dddddd;height:200px;width:400px;float:left;">
ここに内容</div>
　
<div　id="footer"　style="background-color:#FFA300;clear:both;text-align:center;">
著作権　©　基本チュートリアル(oldtoolbag.com)</div>
　
</div>
　
</body>
</html>

テストを見てみる ‹/›

上記の HTML コードは以下の結果を生成します：

HTML レイアウト - テーブルを使用して

HTML <table> タグを使用することは、レイアウトを作成する簡単な方法です。

ほとんどのサイトでは、<div> や <table> 要素を使用して多列を作成できます。CSS は要素の配置やページの背景や豊かな色彩を設定するために使用されます。

HTML テーブルを使用して美しいレイアウトを作成することはできますが、テーブルの設計の目的はテーブル化されたデータを表示することです - テーブルはレイアウトツールではありません！

以下の例では、三行二列のテーブルを使用します - 最初と最後の行は colspan 属性を使用して両列を横跨ます：

例

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本チュートリアル(oldtoolbag.com)</title>　
</head>
<body>
　
<table　width="520"　border="0">
<tr>
<td　colspan="2"　style="background-color:#FFB500;">
<h1>主要なウェブページH1タイトル</h1>
</td>
</tr>
　
<tr>
<td　style="background-color:#FFB700;width:120px;">
<b>メニュー</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td　style="background-color:#DDDDDD;height:200px;width:400px;">
ここに内容</td>
</tr>
　
<tr>
<td　colspan="2"　style="background-color:#FFB500;text-align:center;">
著作権　©　基本チュートリアル(oldtoolbag.com)</td>
</tr>
</table>
　
</body>
</html>

テストを見てみる ‹/›

HTML レイアウト - 必須のCSS

CSS を使用する最大の利点は、CSS コードを外部スタイルシートに保存することで、サイトのメンテナンスが容易になり、スタイルの定義が柔軟になります。CSS スタイルシートファイルを変更することで、すべてのページのレイアウトを変更できます。CSS に関するさらに多くの情報を学びたい場合は、私たちのCSS チュートリアル。

HTML レイアウトタグ

タグ	説明
<div>	ドキュメントブロックを定義します、ブロックレベル(block-level)
<span>	spanを定義し、ドキュメント内のインライン要素を組み合わせます。

HTML ビデオ（Video）再生 HTML ブロック