jQueryMobileでスマホサイト(CSSで遊ぶ1)
イントロ長いぞ!! というお叱りの声が聞こえそうですが
簡単に CSSで遊ぶ 基本のコードをば。改造して 慣れましょう。
①見出しの位置と画像の関係
注意) 下記は HTML4 です
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello World</title>
<style type="text/css">
body {background-color:#FF9; font-size:65%;margin-left:0;}
#banner{
height:200px;
width:300px;
ine-height: 0px;
background-color: #ffffff;
background-image:url(fl.jpg);
<!--**************************
background-imageで指定した画像は表示する範囲を指定するのみで
画像自体のサイズを変更することはできません
ゆえに、その範囲に沿った画像を作成する必要があります
ここでは幅154 高さ149の画像を読み込んでいます
****************************-->
background-position: top right;
background-repeat: no-repeat;
}
#banner h1{
background-color: #000000;
width:100px;
font-size:5em;
color:#cccccc;
height:149px;
}
#main{
height:200px;
width:300px;
background-color: #ffffff;
background-image:url(fl.jpg);
background-position: top left;
background-repeat: no-repeat;
margin-top:0;
}
#main h2{
background-color: #FF00FF;
width:100px;
font-size:3em;
color:#cccccc;
padding-top:30px;
padding-left:100px;
height:50px;
}
<!--**************************
h1とh2の間には、デフォルトでmargin(隙間)がつきます。
隙間をうめたい場合はh1・h2にmargin-top:0;margin-bottom:0にして
上下のマージン（領域外の余白）をゼロに
****************************-->
</style>
</head>
<body>
<div id="banner"><h1>Hello</h1></div>
<div id="main"><h2>World</h2></div>
</body>
</html>
h1・h2にmargin-top:0;margin-bottom:0;
上下のマージン（領域外の余白）をゼロにした場合DIV間の配置は 隙間なく埋まった! しかし
自由に h2の配置ができない!! 上に余白入れたいのに!!
という アナタに朗報 positionをabsoluteにしましょう
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello World</title>
<style type="text/css">
body {background-color:#FF9; font-size:65%;margin-left:0;}
#banner{
height:200px;
width:300px;
background-color: #ffffff;
background-image:url(fl.jpg);
background-position: top right;
background-repeat: no-repeat;
}
#banner h1{
background-color: #000000;
width:100px;
font-size:5em;
color:#cccccc;
height:149px;
margin-top:0;
margin-bottom:0;
}
#main{
height:200px;
width:300px;
line-height: 0px;
background-color: #ffffff;
background-image:url(fl.jpg);
background-position: top left;
background-repeat: no-repeat;
margin-top:0;
margin-left:100px;
}
#main h2{position:absolute;
background-color: #FF00FF;
width:100px;
font-size:3em;
color:#cccccc;
padding-top:30px;
padding-left:100px;
height:50px;
margin-top:100;
margin-bottom:0;
margin-left:100px;
}
</style>
</head>
<body>
<div id="banner"><h1>Hello</h1></div>
<div id="main"><h2>World</h2></div>
</body>
</html>
