背景画像を元にサイトを構成＠Webデザインのお勉強

背景画像を元にサイトを構成＠Webデザインのお勉強

サイトの構成は、大事かと思います。

背景画像を元にしたサイトの構成です。
背景画像を元に、以下の構成を作成します。

サイト名
コンテンツ	メニュー

まず、背景画像を作成します。

あとは、DIVタグを用いて、サイトに配置します。
position:absoluteにて、DIVタグの位置を移動します。

absoluteは、絶対位置を示します。
親の要素の左上からの位置を示します。

文章を表示する箇所は、overflow-y:scrollを用いています。
これでスクロールバーを表示します。
背景画像の高さ以上の文章を用いると構成が崩れるので、
スクロールバーで制御しています。

こんな感じです

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head lang="ja-JP">
<META http-equiv="Content-Type" content="text/html; charset=SJIS">
<META http-equiv="Content-Style-Type" content="text/css">
<style type=text/css>

div.main {
    display:block;
    background-repeat:no-repeat;
    background-image:url("./back001.jpg");
    width:800;
    height:565;
}

div.title {
    font-size:32px;
    position:absolute; top:15px;left:20px;
}

div.contents {
    position:absolute; top:90px; left:20px;
    height:470px;
    width:590px;
    overflow-y:scroll;
    scrollbar-base-color:#CCCCCC;
}

div.menu {
    position:absolute; top:90px; left:640px;
}

div.copy {
    position:absolute; left:200px;
}

</style>
</head>
<body>
<div class="main">

<div class="title">サイトのタイトル</div>

<div class="contents">
内容を記述<BR>
・<BR>
・<BR>
・<BR>
・<BR>
・<BR>
・<BR>
・<BR>
・<BR>
・<BR>
・<BR>
・<BR>
</div>

<div class="menu">
<a href="#">リンク１</a><BR>
<a href="#">リンク２</a><BR>
<a href="#">リンク３</a><BR>
</div>

</div>

<div class="copy">Copyright (C) Webデザインのお勉強. All Rights Reserved.</div>
</body>
</html>