トムズのブログ -8ページ目

ie6のpositionには横幅必要！！

http://d.hatena.ne.jp/RPM/20080808/1218128134

参考サイト

#header {
position: relative; ←これにより、headerの左上を始点として設定できる
width: 800px; 　　　　　←ie６用に横幅を指定しておかないと、思った所に設置できない
}

#h1 {
position: absolute;　　　←上記で、headerが始点になっているので、headerの左上が始まり
top: 10px;　　　　　　　　←移動が自由に出来る
left: 100px;
}

インスタント写真風

写真、170×128を準備
※　htmlでも、上と同様のサイズを準備する（重要！！）

カンバスサイズの変更（位置は中央）
上下左右10ｐｘの間が空く
htmlで写真を配置する時に、padding:10px;の指定をする

カンバスサイズの変更→下だけ広げる（位置は上中央）
下に間ができ、インスタント写真風の白い余白が出来る！！
htmlで全体を表示させるために幅と高さ（190×170）指定する

アルバム風

■■■　html　■■■

<body>

-- wrape start -------------------------------------------
<div id="wrape">

-- head start -------------------------------------------
<div id="head">
<h1>はじめに</h1>
</div>

-- head end ----------------------------------------------

-- cont start -------------------------------------------
<div id="cont" class="clearfix">　　←clearfix　コレは#contの背景が表示されるように
<dl class="phot top_back">
<dt class="toms"><img src="../../素材/tom1.jpg" alt="トム１"/></dt>
<dd class="toms_coment">気持ちよさそう～</dd>
</dl>
<dl class="phot">
<dt class="toms"><img src="../../素材/tom1.jpg" alt="トム１"/></dt>
<dd class="toms_coment">気持ちよさそう～</dd>
</dl>
<dl class="phot">
<dt class="toms"><img src="../../素材/tom1.jpg" alt="トム１"/></dt>
<dd class="toms_coment">気持ちよさそう～</dd>
</dl>

............................................................................................................................................................................................................
<dl class="phot top_back">
<dt class="toms"><img src="../../素材/tom1.jpg" alt="トム１"/></dt>
<dd class="toms_coment">気持ちよさそう～</dd>
</dl>
<dl class="phot">
<dt class="toms"><img src="../../素材/tom1.jpg" alt="トム１"/></dt>
<dd class="toms_coment">気持ちよさそう～</dd>
</dl>
<dl class="phot">
<dt class="toms"><img src="../../素材/tom1.jpg" alt="トム１"/></dt>
<dd class="toms_coment">気持ちよさそう～</dd>
</dl>

...........................................................................................................................................................................................................

<dl class="phot top_back">
<dt class="toms"><img src="../../素材/tom1.jpg" alt="トム１"/></dt>
<dd class="toms_coment">気持ちよさそう～</dd>
</dl>
<dl class="phot">
<dt class="toms"><img src="../../素材/tom1.jpg" alt="トム１"/></dt>
<dd class="toms_coment">気持ちよさそう～</dd>
</dl>
</div>

-- cont end ----------------------------------------------

</div>

-- wrape end ----------------------------------------------
</body>
</html>

css

@charset "utf-8";
* {
margin: 0px;
padding: 0px;
}

body {
background-color: #FFCCCC;
}

#wrape {
background-color: #000000;
width: 700px;
margin-right: auto;
margin-left: auto;
}

h1 {
font-family: "ＭＳゴシック", "Osaka－等幅";
font-size: 36px;
background-image: url(../../素材/2.jpg);
background-repeat: repeat-x;
background-position: bottom;
color: #CCCCCC;
padding-bottom: 10px;
padding-left: 30px;
margin-right: 400px;
}

/*----------------------------------------------------------
■cont レイアウト
----------------------------------------------------------*/
#cont .phot {
background-image: url(../../素材/phot.jpg);
background-repeat: no-repeat;
height: 170px;　　→高さ・幅を指定することによって、psで作成した画像全部表示させる。
width: 190px;　　→
float: left;
margin: 20px;　　→下の画像より、ｄｌの周りは20ｐｘの隙間（margin）がある　レイアウトにより変動
}

.............................................................................................................

.clearfix:after {
content: "."; /* 新しい要素を作る */
display: block; /* ブロックレベル要素に */
clear: both;
height: 0;
visibility: hidden;
}

.clearfix {
min-height: 1px;
}

* html .clearfix {
height: 1px;
/*¥*//*/
height: auto;
overflow: hidden;
/**/
}

.............................................................................................................

.top_back {
margin-left: 30px;　　→レイアウトで変動する！！
}

.toms, ←まとめられる時は、カンマ（,）で区切る！！
.toms_coment {
padding-top: 10px;　　→background-image作成で、写真の枠組みとして、10ｐｘの余白（白）があるので、
padding-left: 10px;　　→paddingを設定することにより、写真を配置場所に移動できる。

}

.toms_coment {
font-family: "ＭＳＰ明朝", "細明朝体", "ヒラギノ明朝 Pro W3";
color: #660000;
font-size: 12px;　　→インスタント写真風、下の白い余白の部分に一言書き込める。
}