I aim to creator.

今回初心者の方でも簡単に理解しやすいwebレイアウトの作り方を
紹介したいと思います。

いちょう僕も今までやってきたレイアウトに見落としていた事があったので^^;

---

さてまず準備からしましょう!!
ez-HTMLを利用している方は、基本的な準備でいいです。
メモ帳などをご利用の方は、単語登録などをオススメしますので

単語登録をして下さい

単語登録方法

赤い枠に囲まれている工具ボックスみたいな物を
クリックします。

こんな感じでメニューが現れます。
このメニューの

(単語/用例の登録)
をクリックします。

こんな感じの物が出てくる
と思います。


書き方は、簡単です。
下の例を見れば分かります。

例......

最後入力が終わったら

(登録)
をクリックして完了です。








他のやつでも大体一緒なので

使用するタグ
<div id="">～</div>
使用するCSS
float: left;
clear: left;
width: #;
background-color:
background-image: url(#);

background-repeat: repeat-y;
background-position: left center;

これだけのタグを単語登録して下さい。




さてさっそく作っていきましょう!!

今回の目標は、以下の画像の様にしてみましょう!






2カラムのレイアウトです。
自分の中では、

スッゲーーー簡単なので
皆さんもいけます。







さてまずは、HTMLタグを書いていきましょう!!
<div id="container"> <div id="header"> ヘッダー </div> <div id="side"> サイド </div> <div id="main"> メイン </div> <div id="footer"> フッター </div> </div>


HTMLの入力が終わったらCSSを書いて行きます。

<style type="text/css"> #container{ margin: 0 auto; width: 900px; background-color: #FFFFFF; background-image: url('img/aa.png'); background-repeat: repeat-y; background-position: left center; } #header{ width: 100%; background-color: #0066FF; } #side{ float: left; width: 200px; } #main{ float: left; width: 700px; } #footer{ clear: left; background-color: #FF33FF; } </style>

• container