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

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

galleria

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

 

使い好きな場所に要素を配置する(ol要素)。

.postit_241クラスのpositionプロパティでをposition: absolute; で絶対位置で指定し、
.postit_241 li.msgit01{ top:98px; left: 16px;}  
のli要素のクラス名に表示する相対位置を指定する。

cssの書き方 /*--------------------------------------------------
02-06 positionを使い好きな場所に好きな要素を配置する
ol要素、ul要素を指定する必要はない
--------------------------------------------------- */
.postit_241{
  position: relative; /* 相対位置を指定(必須) */
  margin: -5px 0 20px 4px;
  padding: 15px 10px 10px 10px;
  width: 408px;
  height: 360px;
  background-color: #FFFFFF; /* 色なし(白) */
}
.postit_241 p.map{
  width: 408px;
  height: 308px;
  margin: 0 0 10px 0;
}
.postit_241 li{
  position: absolute; /* 絶対位置で指定 */
  padding: 12px 5px 5px 5px;
  width: 128px; /* コメントの幅を指定 */
  color: #FFFFFF; /* 表示文字フォントの色(白) */
  font-size: small;
  list-style-type: none; /* 番号なし */
  line-height: 1.2;
  background-image:   url("../images/park_access_map_fukidashi.png"); /* 背景画像 */
  background-repeat: no-repeat;
  background-position: left top;
}
.postit_241 li.msgit01{ top:98px; left: 16px;}
.postit_241 li.msgit02{ top:95px; left: 260px;}
.postit_241 li.msgit03{ top:177px; left: 266px;}
.postit_241 p.access{font-size: small;} /* 相対位置を指定 */
HTMLの使用例  <div class="postit_241">
  <p class="map"><img width="408" height="308" alt="" src="../images/park_access_mapTrain.gif"/></p>
  <ol>
    <li class="msgit01">横浜駅北口改札を出て ・・</li>
    <li class="msgit02">交差点を右に ・・</li>
    <li class="msgit03">突き当たりが公園正門 ・・</li>
  </ol>
  <p class="access">夕焼け線横浜駅(急行停車) 徒歩5分</p>
</div>

  1. 星空駅北口改札を出てまっすぐ進みます。
  2. 本屋さんのある交差点を右に曲がります。
  3. 突き当たりが星空公園正門になります。

夕焼け線横浜駅(急行停車) 徒歩5分


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

positionを使い好きな場所に要素を配置する(UL要素)

cssの書き方 --------------
XHTMLの使用例  <div class="postit_241">
  <p class="map"><img width="408" height="308" alt="" src="../images/park_access_mapTrain.gif"/></p>
  <ul>
    <li class="msgit01">横浜駅北口改札を出てまっす ・・</li>
    <li class="msgit02">本屋さんのある交差点を右に ・・</li>
    <li class="msgit03">突き当たりが公園正門になります。</li>
  </ul>
  <p class="access">夕焼け線横浜駅(急行停車) 徒歩5分</p>
</div>

  • 星空駅北口改札を出てまっすぐ進みます。
  • 本屋さんのある交差点を右に曲がります。
  • 突き当たりが星空公園正門になります。

夕焼け線横浜駅(急行停車) 徒歩5分