BreathTake/ホームページ作成の小技・CSS篇

*
ホームページ作成の小技タイトル・CSS篇・イメージ写真
CSSの小技 要素の位置指定

CSSの小技 要素の位置指定 見本

TENTEN

■文字の位置(画像の下端位置からの距離) :
■文字の位置(画像の左端位置からの距離) :

写真サイズ … 幅 600px 高さ 400px : 文字サイズ … 幅 90px 高さ 40px
左・上に移動させるにはマイナスを入力してください

CSSの小技 要素の位置指定 プログラムソース

<STYLE TYPE = "text/css">
<!--
.caption01_box {
   position : relative;# 相対配置
   top : -395px;
   left : 10px;

   position : absolute;にすると、絶対配置となります

   border-style : solid;
   border-color : powderblue;
   border-width : 1px;
   font-family : impact;
   font-size : 30px;
   color : red;
}

.pic_box {
   border-style : solid;
   border-color : powderblue;
   border-width : 1px;
   position : relative;
   top : 10px;
   left : 10px;
}
-->
</STYLE>

<IMG CLASS = "pic_box" SRC="cat.jpg">
<SPAN CLASS = "caption01_box">TENTEN</SPAN>
Copyright © 2011 BreathTake All Rights Reserved