株式会社アイネックスはソフトウェアの開発、ホームページの作成ツール企業です。

　　　　　横浜、東京に拠点を置き、検証システム／金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。

galleria

02-07)　1. positionを使い好きな場所に要素を配置する（DL要素）

　

positionを使い好きな場所に要素を配置する（DL要素）

金額（priceプロパティ）は position: absolute;の絶対位置で
表示位置（bottom: 0;left: 150px;）を指定する。

ｃｓｓの書き方 /*--------------------------------------------------
02-07-1. 写真の横にテキストを好きな位置に配置する
--------------------------------------------------- */
.box_251 dl{
  position: relative;
  width: 215px;
  height: 66px;
}
.box_251 dt{
  position: absolute;
  top: 0;
  left: 120px;
  font-size: small;
}
.box_251 dd.photo img{
  display: block;
  position: relative;
  margin: -20px 0 0 -20px;
}
.box_251 dd.price{
  position: absolute;
  bottom: 0;
  left: 150px;
  font-size: small;
}
HTMLの使用例 <li>
  <dl>
  <dt class="photo"><img src="sweets01.jpg" alt=""/></dt>
  <dd class="title">パウンドケーキ</dd>
  <dd class="price">380円</dd>
  </dl>
</li>
<li>
  <dl>
  <dt class="photo"><img src="sweets02.jpg" alt=""/></dt>
  <dd class="title">シフォンケーキ</dd>
  <dd class="price">580円</dd>
  </dl>
</li>
  • パウンドケーキ
    380円
  • シフォンケーキ
    580円
  • ブリュレ
    580
  • チーズケーキ
    580円
  • ティラミス
    580円
  • カスタードプリン
    380円

02-07)　2. positionを使い好きな場所に要素を配置する（DL要素）

　　　・・・　（修正）立体枠の追加、配置を簡単に

　　　・・・　（欠点）中央部分が重複して線が拡大する

positionを使い好きな場所に要素を配置する（DL要素）

画像を立体的に見せる為に、ｾﾙのデータ部の(dt.photo)の以下のプロパティを設定する。
position: absolute;
top: 5px;
left: 5px;
border-right:
border-bottom:

ｃｓｓの書き方 /*-------------------------------------------------------
02-07-2 写真の横にテキストを好きな位置に配置する
-------------------------------------------------------- */
.box_252{
width: 690px;
}
.box_252 li{
float: left;
border: 1px solid #000000; /* 画像単位に枠を指定する　*/
width: 219px;
height: 90px;
list-style-type: none;
}
.box_252 dl{
position: relative; /* 相対位置で指定(トップ) */
width: 300px;
height: 66px;
}
.box_252 dt.photo{
position: absolute; /* 絶対位置で指定 */
top: 5px; /*写真を下にずらす */
left: 5px; /* 写真を左にづらす */
border-right: 4px solid #808080 ; /* 右黒枠で写真を立体的に見せる */
border-bottom: 4px solid #808080 ; /*下枠で写真を立体的に見せる */
}
*html .box_252 dt.photo{ /*for IE6 hack*/
behavior: url(../js/iepngfix.htc);
}
.box_252 dd.title{
position: absolute; /* 絶対位置で指定 */
top: 10px;
left: 110px;
color:red;
font-size: small;
}
.box_252 dd.price{
position: absolute; /* 絶対位置で指定 */
bottom: 10px;
left: 150px;
font-size: small;
}
HTMLの使用例  <ul class="box_252">
<li>
<dl>
<dt class="photo"><img src="../images/cafe_sweets01.jpg" alt=""/></dt>
<dd class="title">パウンドケーキ</dd>
<dd class="price">380円</dd>
</dl>
</li>
<li>
<dl>
<dt class="photo"><img src="../images/cafe_sweets02.jpg" alt=""/></dt>
<dd class="title">シフォンケーキ</dd>
<dd class="price">580円</dd>
</dl>
</li>
<li>
<dl>
<dt class="photo"><img src="../images/cafe_sweets03.jpg" alt=""/></dt>
<dd class="title">ブリュレ</dd>
<dd class="price">580円</dd>
</dl>
</li>
--- 省略　---
</ul>
  • パウンドケーキ
    380円
  • シフォンケーキ
    580円
  • ブリュレ
    580円
  • チーズケーキ
    580円
  • ティラミス
    580円
  • カスタードプリン
    380円