Chapter4－一般的なレイアウト（２カラムレイアウト）その２

HTMLソースを説明していきます。後半でJavaScriptの説明もします。
HTMLソースsample4.htmlの注意事項を赤い字で記しています。付属のhtmlを使用して下さい。説明で青字を使っている箇所もあります。
このChapterからは重複する箇所は省略します。（但し、重要な箇所は残します）


<?xml version="1.0" encoding="Shift_JIS"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
上記の部分は如何なる場合も変更しないでください


<head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />　必須

<meta http-equiv="Content-Style-Type" content="text/css" />　必須

<meta http-equiv="Content-Script-Type" content="text/javascript" />必須

<link rev="made" href="mailto:xxx@xxx.com" />　 xxx@xxx.comにあなたのメールアドレスを

<meta http-equiv="imagetoolbar" content="no" />

<meta name="description" content="初心者がHTMLとスタイルシートを使いこなせるようになる事を目指すホームページ作成講座" />　ここにホームページの紹介文を短めに

<meta name="keywords" content="ホームページ,制作,講座,ネット,初心者,HTML,スタイルシート,css,テンプレート" />　キーワードを２０個ほど

<title>HTMLCSS.biz-ホームページ制作講座</title>　SEO的に最重要、最重要キーワードを記述

<link rel="start" href="sample4.html" />省略可

<link href="style4.css" rel="stylesheet" type="text/css" /> スタイルシート名を指定

<script type="text/javascript" src="random.js"></script>　外部javascriptの呼び出し

</head>


<body>


<div id="banner"> バナーブロックの開始

<h1>HTMLCSS.biz-ホームページ制作講座</h1>

<h2>初心者がHTMLとスタイルシートを使いこなせるようになる事を目指すホームページ作成講座</h2>

</div>


<div id="container">　コンテナーブロックの開始


<div id="contents">　コンテンツブロックの開始


<div class="topctr">　写真はここに入ります

<script type="text/javascript">randomImg();</script>　 javascriptの設定、変更しない

</div>


<p>「HTMLCSS.biz-ホームページ制作講座」はHTMLとスタイルシート(CSS)が始めての人が、本格的な商用ホームページやアフィリエイトサイトを作成出来るようになる事を目的としています。<br />

－－－－－－－－－－－－－－－－－中略－－－－－－－－－－－－－－－－－

</div>　コンテンツブロックの終了


<div id="leftsidebar">　左ナビゲーションブロックの開始


<ul>

<li><a href="../1/sample1.html">サンプル１－１カラムレイアウトその１</a></li>

－－－－－－－－－－－－－－－－－中略－－－－－－－－－－－－－－－－－

</div>　左ナビゲーションブロックの終了


<div id="footer">　フッターブロックの開始


<br />


<div class="ctr">　テーブル（表）をセンタリング


<table summary="seihinkousei">　ここから一つ目のテーブル（表）　色や幅はスタイルシートで設定します

<thead>

<tr>

<th abbr="kousei" colspan="2">　２列を連結します

</tr>

</thead>

<tbody>

<tr>

<td class="t0">このマニュアル</td>　横は２列です　縦、２段目

<td class="t1"></td>

</tr>

<tr>

<td class="t0">HTMLファイル</td>　縦、３段目

<td class="t1">sample1.html～sample8.html</td>

</tr>

<tr>

<td class="t0">スタイルシート</td>　縦、４段目

<td class="t1">style1.css～style8.css</td>

</tr>

</tbody>

</table>　ここまでが一つ目のテーブル（表）

<br />

テーブル（表）は大変良く使われるタグなのでテーブル（表）の説明をしておきます

２列、２行のテーブル（表）のHTMLは、

<table><tr><td>文字を</td><td>文字を</td></tr>

<tr><td>文字を</td><td>文字を</td></tr></table>

となります

ここではもう少し凝ったものになっています　<thead>とは表のヘッダ部分です　<tbody>とは表の本体部分です

<td(h) colspan="x">文字を</td(h)>のcolspan="x"とは列を結合する際に使います。２列の場合はxは２となります

<table summary="abouthtml">　 summary=""にはその表の概要を記します

<thead>

<tr>

<th abbr="abouthtml" colspan="3">HTMLについて</th>　３列を連結します

</tr>

</thead>

<tbody>

<tr>

<td class="t2">HTMLとは</td>　縦、２段目　横１列目

<td class="t0"><a href="http://ja.wikipedia.org/wiki/HyperText_Markup_Language">

HyperText Markup Language</a>の略です</td>　横２列目

<td class="t0">文書の論理的な構造を示す言語です</td>　横３列目

</tr>

<tr>

<td class="t2">HTMLは</td>　縦、３段目　横１列目

<td class="t0"><a href="http://www.w3.org/">W3C（World Wide Web Consortium）</a></td>　横２列目

<td class="t0">という非営利団体により規格が定められています</td>　横３列目

</tr>

<tr>

<td class="t2">XHTMLとは</td>　縦、４段目　横１列目

<td class="t0"><a href="http://ja.wikipedia.org/wiki/Extensible_HyperText_Markup_Language">

Extensible HyperText Markup Language</a>の略で</td>　横２列目

<td class="t0">XMLの文法で再定義されたコンピュータ言語です<br />W3Cにより規格が定められています</td>　横３列目

</tr>

</tbody>

</table>

<br />


<table summary="aboutcss">　この表は縦２段、横３列です　ご理解いただけましたか？

<thead>

<tr>

<th abbr="aboutcss" colspan="3">スタイルシート(CSS)について</th>

</tr>

</thead>

<tbody>

<tr>

<td class="t2">CSSは</td>

<td class="t0"><a href="http://ja.wikipedia.org/wiki/Cascading_Style_Sheets">Cascading Style Sheets</a>の略です</td>

<td class="t0">HTMLやXHTMLで見栄えを定義する仕様です<br />CSSはW3Cにより規格が定められています</td>

</tr>

</tbody>

</table>

<br />


</div>　センタリングの終了


</div>　フッターブロックの終了

</div>　コンテナーブロックの終了


<address>

Copyright ©2007-2008 あなたのホームページ名or会社名 All Rights Reserved.<br />

Powered by<span class="cont"><a href="http://www.htmlcss.biz">HTMLCSS.biz-ホームページ制作講座</a></span>著作権リンクの削除禁止

</address>

アクセス解析プログラムを入れる場合はここに

</body>

</html>

テーブル（表）についてもう少し説明します。

テーブル

このページのレイアウトですが、これをテーブル（表）で作成してみます。


<html>

<body>


<table width="200">

<tr>

<td colspan="2" height="30" bgcolor="#99ffff"></td>

</tr>

<tr>

<td width="40" height="100" bgcolor="#ffffcc"></td><td width="160" bgcolor="#ccffff"></td>

</tr>

<tr>

<td colspan="2" height="30" bgcolor="#99ffff"></td>

</tr>

</table>


</body>

</html>

これをコピーペーストして適当なhtmlに保存しクリックしてみてください。どうでしょうか、上の図とほぼ同様のテーブル（表）を表示したことが確認出来るはずです。
幅や長さ、色などはHTMLからでもスタイルシートからでも設定出来るのです。この部分のHTMLを教材としてtable.htmlにしてあります。

外部javascriptについて：
sample4.htmlではコンテンツ上部の写真を自動的に変えるために、外部javascriptを使っています。ファイル名はrandom.jsです。
修正する個所は１箇所です。


function randomImg() {
var img = new Array();

img[0] = "benz.jpg";
img[1] = "bmw.jpg";　　変えるのはここだけ　表示させる写真名を指定します　尚、写真数が多い場合は、
img[2] = "surf.jpg";　　img[x] = "x.jpg" xの値を増やします

var ran = Math.floor(Math.random() * img.length);
document.write('<img src="' + img[ran] + '">');
}

スタイルシートの説明にお進み下さい。メニューは上部にあります。

一般的なレイアウト－HTMLの説明

Chapter4－一般的なレイアウト（２カラムレイアウト）その２－HTMLの説明