横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
positionを使い好きな場所に要素を配置する(ul要素)
全体の枠を .area_151のクラスのプロパティで枠幅をwidth: 720px;
大枠のガイダンス領域を .box2_151のクラスのプロパティで枠幅をwidth: 340px;float: left;
で中枠の画像の表示を継続する。
中枠は.box1_151のクラスのプロパティで枠幅をwidth: 160px;float: left;
画像の表示を継続する。
cssの書き方 |
/*------------------------------------------------------- 02-10 ボックスを横に並べる -------------------------------------------------------- */ .area_151{ width: 720px; } .box1_151{ float: left; width: 160px; height: 300px; margin: 0 0 10px 10px; padding: 4px; border: 1px solid #2B2B35; background-color: #010014; color: #FFFFFF; } .box2_151{ float: left; width: 340px; height: 300px; margin: 0 0 10px 10px; padding: 4px; border: 1px solid #2B2B35; background-color: #010014; color: #FFFFFF; } .columnLeft { margin: 30% 10px 5px 10px; text-align: left; } .columnRight{ margin: 5px 10px 0 10px; text-align: right; } .condition{ position: relative; top: -130px; left: -10px; } |
---|---|
HTMLの使用例 |
<div class="area_151" > <div class="box2_151"> <p class="columnLeft fntSz18"><br/>横浜祭 期間中イベント盛りだくさん。</p> <p class="columnRight fntSz18">みなさまのご参加、お待ちしております。</p> </div> <div class="box1_151"> <dl> <dt class="fntBold fntSz14"><img src="../images/fes_event01.jpg" alt="" />星空と花火</dt> <dd> <ul class="listStN"> <li>Aug.1 19:30〜20:10</li> <li class="marLft10">星空に400発の花火が打ちあがります。小雨決行。事前申込不要。</li> </ul> </dd> </dl> </div> <div class="box1_151" <dl> <dt class="fntBold fntSz14"><img src="../images/fes_event02.jpg" alt="" />ぞうさんがやってくる<br/><br/></dt> <dd> <ul class="listStN"> <li>Jul.30 15:30〜17:00</li> <li class="marLft10">ぞうにエサをあたえたり、触れたりすることができます。抽選で5組限定。</li> <li class="txAlnCnr"><a href="#"><span class="colRedBd">ぞうさん抽選申込</span></a></li> </ul> </dd> </dl> --- 省略 --- </div> |
横浜祭 期間中イベント盛りだくさん。
みなさまのご参加、お待ちしております。