メニュー

サイト構成
背景画像を元にサイトを構成

CSS
DIVタグで枠を作成
DIVタグで見出しに枠を作成
画像に文字を表示
マウスフォーカスで背景画像変更
tableタグでボタンを作成

トップ
E-Mail
xml

ASP.Netのお勉強
VB.Netのお勉強
phpのお勉強
Excel マクロ・VBAのお勉強
ASP.Netで掲示板を作成しよう
AJAXのお勉強
Javaのお勉強
連想書籍検索
世界の観光地検索
路線図
総合サイトCocoaLiz
背景画像を元にサイトを構成@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="#">リンク1</a><BR>
<a href="#">リンク2</a><BR>
<a href="#">リンク3</a><BR>
</div>

</div>

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




Copyright (C) 2008 Webデザインのお勉強. All Rights Reserved.