HTML レイアウト
HTMLマニュアルレイアウトは、Webサイトの見栄えを良くするために非常に重要です。
慎重にやってください。
Webサイトのレイアウト
ほとんどのサイトは、コンテンツをコラム (雑誌や新聞のように) に配置します。
<div> または <table> を使用して複数の列を作成できます。 CSSは、要素を配置したり、ページの背景やカラフルな外観を作成したりするために使用されます。
tableタグを使ってレイアウトを作れますが、tableタグはレイアウトのツールとしては推奨されません。表を作るタグです。
<div> タグを使うレイアウト
divタグは、HTML要素をグループ化するために使用されるブロックレベルの要素です。
次の例では、5つの div 要素を使用して複数列のレイアウトを作成しています。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>codinghaku.com</title>
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFE406;">
<h1 style="margin-bottom:0;">タイトル</h1></div>
<div id="menu" style="background-color:#78D4F0;height:200px;width:100px;float:left;">
<b>メニュー</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#BDFBC7;height:200px;width:400px;float:left;">
内容はここです。</div>
<div id="footer" style="background-color:#FFE406;clear:both;text-align:center;">
©All Rights Reserved.</div>
</div>
</body>
</html>
表示例
<table> タグを使うレイアウト
tableタグもレイアウトを簡単に作成できます。
次の例では、3つの行と2つの列を持つテーブルを使用しています。最初と最後の行は、colspan属性を使って2つの列を結合しています。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>codinghaku.com</title>
</head>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFE406;">
<h1>タイトル</h1>
</td>
</tr>
<tr>
<td style="background-color:#78D4F0;width:100px;">
<b>メニュー</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#BDFBC7;height:200px;width:400px;">
内容はここです。</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFE406;text-align:center;">
©All Rights Reserved.</td>
</tr>
</table>
</body>
</html>
表示例
外部スタイルシートを使って！
インラインスタイル
サンプルコードでのCSSの使用は、できるだけ避けてください。
タグにstyle属性を記述するのは最も簡単にスタイルを適用する方法です。この方法はインラインスタイルとも呼ばれます。
最も保守の効率が悪い方法です。一つのページ内で複数の編集が必要になります。CSSコードをコンテンツに混ぜてしまうため、読みにくくなります。コードとコンテンツを分離すれば、作業する人にとって保守が容易になります。
作業環境が非常に制限されている場合は、インラインスタイルの使用に頼らざるを得ないかもしれません。例えば、 コンテンツ管理システム（CMS）ではHTMLの本文しか編集できない場合があります。また、HTMLメールもインラインスタイルが使われています。
内部スタイルシート
内部スタイルシートも効率がよくないですが、1ページで完結しているWebページ使ってもいいです。
コメント