株式会社アイネックス｜css勉強室 | レイアウト | グリッドﾚｲｱｳﾄを作る | Webシステム構築｜ホームページ作成

02-10)　1.　ﾎﾞｯｸｽを横に並べてグリッドﾚｲｱｳﾄを実現する

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

全体の枠を　.area_151のクラスのプロパティで枠幅をwidth: 720px;
大枠のガイダンス領域を　.box2_151のクラスのプロパティで枠幅をwidth: 340px;float: left;
で中枠の画像の表示を継続する。
中枠は.box1_151のクラスのプロパティで枠幅をwidth: 160px;float: left;
画像の表示を継続する。

ｃｓｓの書き方	/------------------------------------------------------- 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>

ｃｓｓの書き方

/*-------------------------------------------------------
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>

横浜祭期間中イベント盛りだくさん。

みなさまのご参加、お待ちしております。

星空と花火