I aim to creator.

ホームページレイアウトについて記事にして行きたいと思います。



まず前提として、HTML/CSSを扱える方を前提としています。

最近もまだテーブルタグで組まれたレイアウトのページを目にしますね。(^_^;)
未だにそんな作り方でホームページを作成している方は少なくないとは思います。

本来ホームページのレイアウトを組むには<div>要素がふさわしいです。
ですが、HTML5も復旧して、<header>タグや<footer>タグなどを使う時代になりました。そこで今回

はそれらを上手く利用してレイアウトを組んで行きたいと思います。

ちなみに初めて私がレイアウトの組み方を覚えた方法は、とにかくソースを見る事で理解出来ました。そのレイアウトをシンプルなソースで記載しているサイトが以下のサイトです。


TAG index - ホームページ作成情報



レイアウトを組んでみる

今回例として作るのは2カラムレイアウトです。

ここでレイアウトを組む時の考え方は、
箱の中に様々な箱を入れる感じをイメージします。
基本的にメイン要素があり、その中に書く要素(箱)を入れる感じをイメージして下さい。


この様に入れ子にして行きます。
#main内にheader,#content,footerがあります。

#content内にはサイドバーとなる要素と、メイン要素があります。これでHTMLでの構造決めは完了あとはCSSでこねこねするだけの作業となります。




今回はテストなので、HTML内に直接CSSを記述して行きます。

CSSの記述は画像の様な感じです。
至ってシンプルですね。

バックカラーの指定で何故「yellow」とか使っているのか気になると思いますが、

「#ffff00」等のコードで決めるのが面倒だったので、"イエロー"と入力してスペースを押したら出てくる"yellow"にしました。

でもこの方が初心者さんにも分かりやすいと思うの。




表示結果は上の画像の様になります。リセットCSS利用していないので、無駄な余白等が出来てしまいますが、これからはレイアウトを組む時に絶対スタイルをリセットしてから記述して下さい。

ブラウザによって違うスタイルが初期であり、それらをちゃんとリセットしないと、上手くCSSを適応させる事が出来ませんので、まず初めはリセットです。

ではこれでレイアウト組み方のお勉強は終了です。