★無料テンプレート付 簡単ホームページ講座★
まぐまぐメールマガジン登録・解除はこちら
無料ホームページテンプレート
メルマガ「無料テンプレート付 簡単ホームページ講座」の第22号からの連動ページです。
メルマガはテキストベースなのでホームページがどのように作成されていくのかが 視覚的に捕らえることができません。
そこでメルマガと連動してその号の講座の内容を視覚的に理解できるようにしました。
ご活用下さい。
■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━■
無料テンプレート付 簡単ホームページ講座
■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━■
■□■□ ２カラム(２段組)を構築する □■□■
_/_/_/_/_/_/ 第１回 文書構造 _/_/_/_/_/_/
同じレイアウトでリンクページを作成する方法の一つです
任意の場所に「part2」というフォルダを作成し
以下のソースをコピーして「ひな型.html」と名前をつけて保存して下さい。
*********************ここから*********************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="description" content="●●●●●●">
<meta name="keywords" content="●●,●●,●●,●●">
<title>●●●●●●</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>●●●●●●</h1>
</div><!--headerに対応した領域の終わりです-->
<div id="contents">
<div id="main">
</div><!--mainに対応した領域の終わりです-->
<div id="navi">
</div><!--naviに対応した領域の終わりです-->
</div><!--contentsに対応した領域の終わりです-->
<div id="footer">
</div><!--footerに対応した領域の終わりです-->
</div><!--wrapperに対応した領域の終わりです-->
</body>
</html>
*********************ここまで*********************
ここまではメルマガと同じ内容ですが、このソースをブラウザで確認しても何も表示されません。
そこで、どのような構造になっているのか図を使って説明します。
下図を見て下さい。
<body>全体を<wrapper>とい領域で包み込んであります。
次に<header>領域を作成してあります。
その次は<contents>という領域を作成しその中に
<main>と<navi>の2つの領域を作りました。
<contents>の領域を閉じて最後に<footer>の領域を作り
<wrapper>を閉じています。
わかってもらえましたか？
領域の作成は大事なことです、何回もソースをみて理解して下さいね。