トップページの画面割りをしよう
ここからはindex.htmlの中身（トップページの内容）を作っていきます。ネットサーフィンをしていると 画面上にタイトルがあって、その下にホームページの内容とメニューがあるホームページが多いですよね？
タイトル、メニュー、内容を区分した画面割りを四角の枠（box）を使って作ります。まずは下のソースをコピーペーストしてみて下さい。
テスト用イメージ画像のトップページと同じものが出来るはずです。
index.htmlへのコピーペーストの仕方
- index.htmlのファイルを2回クリックすると真白な画面が出てきます。
- 真白な画面の何もない所で右クリックしてメニューを出します。
- メニューの中から、「ソースの表示」を選ぶとhtmlが書かれた画面が出てきます。
- コピーペーストはこの画面の<body>〜</body>の間に入れて下さい。
- ペーストしたら画面上部のメニューバーから「ファイル」→ 「上書き保存」を忘れずにしましょう。
- 保存できたら、１度ファイルを閉じて下さい。
index.htmlへコピー→
<div id="container">
<div id="banner"></div>
<div id="content"></div>
<div id="menu"></div>
<div id="foot"></div>
</div>
後、index.htmlの<head>〜</head>内に
を記入。最後のソースはindex.htmlにindex.cssを反映させる為に必要です。
＊<body>〜</body>内や<head>〜</head>内という指定がある場合は、必ずその間にソースをコピーして下さい。 コピーするスペースがない場合は、マウスをコピーしたい所に合わせ、キーボードのEnterキーを押すと改行されてスペースが空きます。
＊この時点では、index.htmlの画面は真白のままです。続けて、保管用フォルダ、cssファイルを作るでメモ帳で作ったcssファイルのindex.cssにも次のソースをコピーして下さい。
index.cssへのコピーペーストの仕方
- index.cssのメモ帳を2回クリックして開いた画面にコピーペーストして下さい。
- コピーペースト後に上書き保存も忘れずにしましょう。
- 最後にindex.htmlを開いて、画面割がテスト画像の様に出来ていれOKです(^^)。
#container{width:740px;
border-top:1px solid #3cb371;
border-left: 1px solid #3cb371;
border-right: 1px solid #3cb371;
border-bottom: 1px solid #3cb371;}
#banner{width:740px; height:100px;
background:#708090; margin-bottom:10px;}
#content{width:420px; height:400px; float:left;
background:#00ffff; margin-right:10px;}
#menu{width:280px; height:400px; float:right;
background:#ff00ff;}
#foot{width:740px; height:40px;
background:#708090; margin-top:10px;}
＊字が小さくて見にくい方はブラウザの文字サイズを変更できますのでお試し下さい。
＊うまく表示されましたか？表示できていない場合は、<head>〜</head>等の指定どおりの所にコピーされていないと思われますので、諦めずに確認してみて下さい。
合計:
 |