横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
positionを使い好きな場所に要素を配置する(ul要素)
一覧表の作成を行なう。
全体の枠(width: 720px;)と個別ガイダンスの枠(width: 160px;)、
回り込み(float: left;)を行なう。
cssの書き方 |
/*------------------------------------------------------- 03-17 ボックスを横に並べる -------------------------------------------------------- */ div.eventArea{ width: 720px; } .ebox_441{ float: left; margin: 0 0 10px 10px; border: 1px solid #2B2B35; width: 160px; padding: 4px; height: 300px; color: #FFFFFF; /* 白色 */ background-color: #010014; /* 黒色 */ } |
---|---|
HTMLの使用例 |
<div class="eventArea"> <img src="../images/fes_event_title.gif" alt="Event" width="94" height="28" /> <h4 class="subTitle">イベント内容</h4> <div class="ebox_441"> <dl> <dt><img src="../images/fes_event03.jpg" alt="" />星空バーベキュー</dt> <dd> <ul> <li class="date">Jul.30 18:00〜20:00</li> <li class="explain">星空を眺めながらバーべキュー。小雨決行。</li> <li class="entry"><a href="#"><span>バーベキュー申込</span></a></li> <li class="condition"> <img src="../images/fes_event_iconFew.png" alt="締切間近" width="40" height="40" /></li> </ul> </dd> </dl> <!--.eventBox1--> </div> <div class="ebox_441"> <dl> <dt><img src="../images/fes_event04.jpg" alt="" />おいしいコーヒーの入れ方教室</dt> <dd> <ul> <li class="date">Jul.31 15:30〜17:30</li> <li class="explain">ネイルドリップでのおいしいコーヒーの入れ方を教えます。</li> <li class="entry"><a href="#"><span>コーヒー申込</span></a></li> </ul> </dd> </dl> <!--.eventBox1--> </div> --- 省略 --- </div> |