1. Home
  2. HTMLレイアウト

HTMLレイアウト2024 年の最新の入門チュートリアル。このコースでは オンラインの例,サイトのレイアウト,HTMLレイアウト - <div>要素を使用して,例,HTMLレイアウト - テーブルを使用して、,例,HTMLレイアウト - 役に立つヒント,HTMLのレイアウトタグ, について学習できます。

HTMLレイアウト

サイトの外観を改善するために、ページレイアウトは非常に重要です。

慎重にあなたのページのレイアウトを設計してください。

例

オンラインの例

<div>要素を使用して、ページレイアウト
レイアウトに<div>要素を使用する方法。

ページレイアウト、<table>要素を使用します
レイアウトに<table>要素を使用する方法。

サイトのレイアウト

ほとんどのサイトは（雑誌や新聞のような）複数の列にコンテンツます。

ほとんどのサイトは、複数の列を作成するための<div>や<表>要素を使用することができます。 CSSは、要素を配置するか、ページの背景とカラフルな外観を作成するために使用されます。

ランプ 私たちは、美しいレイアウトを設計するためにHTMLテーブルタグを使用できますが、テーブルタグは、レイアウトツールとして使用することは推奨されていませんが - ないテーブルレイアウトツール。

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

div要素は、HTML要素をグループ化するために使用されるブロックレベル要素です。

次の例では、複数列のレイアウトを作成するために、5 div要素を使用しています。

例

<！DOCTYPE HTML> <HTML> <ヘッド> <メタ 文字セット = "UTF-8"> <タイトル> このチュートリアル（w3write.com）</タイトル> </ HEAD> <ボディ> <DIV ID = "コンテナ" スタイル = "幅：500pxなど"> <DIV ID = "ヘッダー" スタイル= "背景色：＃ FFA500;"> <H1 スタイル= "マージン底：0 ;"> メインページのタイトル </ H1> </ div>の <DIV ID = "メニュー" スタイル= "背景色：＃ FFD700;高さ：200pxの;幅：100pxに;フロート：左;"> <B> メニュー </ b>の<BR> HTML <BR> CSS <BR> JavaScriptを</ DIV> <DIV ID = "コンテンツ" スタイル= "背景色：#EEEEEE ;高さ：200pxの;幅：400ピクセル;フロート：左;"> ここにテキスト </ DIV> <DIV ID = "フッター" スタイル= "背景色：＃ FFA500;クリア：両方;テキスト整列：センター;"> 著作権©w3write.com </ DIV> </ DIV> </ BODY> </ HTML>

»をお試しください

上記のHTMLコードは、次の結果が得られます。

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

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

ほとんどのサイトは、複数の列を作成するための<div>や<表>要素を使用することができます。 CSSは、要素を配置するか、ページの背景とカラフルな外観を作成するために使用されます。

ランプ あなたは素敵なレイアウトを作成するためにHTMLテーブルを使用することができますが、目的は設計テーブルの表形式のデータを提示する場合であっても - ないテーブルレイアウトツールを！

次の例では、2つのテーブルの3行を使用しています - 最初と最後の行は、2つにまたがることはcolspan属性を使用しています。

例

<！DOCTYPE HTML> <HTML> <ヘッド> <メタ 文字セット = "UTF-8"> <タイトル> このチュートリアル（w3write.com）</タイトル> </ HEAD> <ボディ> <表 幅 = "500" 国境 = "0"> <TR> <TD COLSPAN = "2" スタイル= "背景色：＃ FFA500;"> <H1> メインページのタイトル </ H1> </ TD> </ TR> <TR> <TD スタイル= "背景色：＃ FFD700;幅：100pxに;"> <B> メニュー </ b>の<BR> HTML <BR> CSS <BR> JavaScriptを</ TD> <TD スタイル= "背景色：#eeeeee ;高さ：200pxの;幅：400ピクセル;"> ここにテキスト </ TD> </ TR> <TR> <TD COLSPAN = "2" スタイル= "背景色：＃ FFA500;テキスト整列：センター;"> 著作権©w3write.com </ TD> </ TR> </表> </ BODY> </ HTML>

»をお試しください

上記のHTMLコードは、次の結果が得られます。


HTMLレイアウト - 役に立つヒント

ヒント：CSSを使用しての最大の利点は、CSSコードを外部スタイルシートに格納されている場合、そのサイトは、保守が簡単になるということです。1つのファイルを編集することにより、すべてのページのレイアウトを変更することができます。 CSSの詳細については、私たちの訪問CSSのチュートリアルを 。

ヒント：により高度なレイアウトを作成するためには非常に時間がかかり、テンプレートを使用すると、迅速なオプションです。検索エンジンを介して、あなたは（あなたがこれらのビルド済みサイトのレイアウトを使用し、それらを最適化することができます）無料のウェブサイトのテンプレートの多くを見つけることができます。

HTMLのレイアウトタグ

标签描述
<div> 定义文档区块，块级(block-level)
<span> 定义 span，用来组合文档中的行内元素。

ホットチュートリアル

お問い合わせ

HTMLレイアウト
10/30