CSSレイアウトの構築

ホームページの作り方

CSSレイアウトの構築

CSSレイアウトは、うまく配置できないと悩んでいる方が多いので、難しいと思っている方が多いようですが、実はCSSレイアウトはとっても簡単なのです。基本となるレイアウトを組めるようになって、あなたもCSSレイアウトでホームページを作ってみましょう。

CSSレイアウトはで作る

ホームページレイアウトはざっくり大きく分けるのがポイント

いよいよホームページの作成を始めてみます。まずはじめにサンプルのWebページを参考にレイアウトを組むことから始めましょう。このサイトでは<div>とCSS(スタイルシート)でレイアウトを構築していきます。

まず、レイアウトは、わかりやすくするために大きくざっくり分割することがポイントになります。今回は最もシンプルで実用的なヘッダー、左コンテンツ、右メニュー、フッターの4つに分けるCSSレイアウトを作成していきます。

ホームページレイアウト div1

縦にdivタグを積み重ねる

<div> </div>

CSSレイアウトでは、<div>を使ってレイアウトを組みます。<div>は入れるものが決まっていない万能型のタグで、空箱のようなものなのでレイアウトを組むのに向いています。

まず、<div>で一つの空箱を作り、中に4つの<div>..</div>を入れてください。レイアウトが左右に配置されている部分がありますが、縦に4つの<div>を積み重ねてください。記載場所は<body>〜</body>の中です。

div

ホームページソース

<head>

<title></title>

</head>

<body>

<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

</body>

</html>

個別にスタイルを指定する

<div>に名前を付ける(id属性)

縦に組み合わせた<div>のボックスを左右に配置したり、横幅を指定したり、色を付けたりするには、CSS(スタイルシート)を使用します。

それぞれの<div>へ個別のCSS(スタイルシート)を指定するには、id属性を使って、それぞれの<div>へ個別の名前を付けて、スタイルシートを指定します。

<div id="site_box"> id名を「site_box」にした場合(半角英数字)

id名をCSS(スタイルシート)にも記述する

#site-box { スタイルを書き込むスペース }

divタグに付けたid名をCSSファイルに#(シャープ)を付けて書きこむことにより、id別にスタイルを指定する事が出来ます。

ホームページソース

XHTML

<html>

<head>

<title></title>

</head>

<body>

<div id="site-box">

<div id="a-box"></div>
<div id="b-box"></div>
<div id="c-box"></div>
<div id="d-box"></div>
</div>

</body>

</html>

CSS(スタイルシート)

#site-box {    }
#a-box {    }
#b-box {    }
#c-box {    }
#d-box {    }

check

さいたまで分譲住宅を探す

ページトップへ