横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
使い好きな場所に要素を配置する(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> |
夕焼け線横浜駅(急行停車) 徒歩5分
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分