■floatの際のwidth/margin/paddingについて■
見本として牧場サイトのアクセスページのsection#mapを参考にすべし。
①基本はまず全体のくくる親ボックスにwidthつける。
②セクション・アーティクルタグにさらにwidthをつける。さらにmargin:auto;をつける。これでセクション・アーティクルタグのwidth内で中央による。
※中身のボックスを調整しやすくするために少し多めに取っておく。
③2カラムにする場合はそれぞれのボックスにwidthを設定する。
※ここはつけなくてもいい時もある。
④片方にfloat:left;/右側にfloat:right;とした方が調整しやすい。どちらかに少しmarginとかかけて調整。
●ポイント
・marginとかは先に親要素からつけていく。一番大きい枠のボックスはautoにして中央寄せにする。
▲例▲
- ●ＣＳＳ
- main{
- width: 1950px;
- }
main #map{ - width:1100px; margin:auto;
- }
- main iframe{
- width:600px; float: left; margin:0 0 0 0;
- }
- main #map #right{
- width:500px;
- float:right;
- margin:0 20px 0 0;
- }
main #map th{ - padding:10px 20px 0 0;
- }
main #map td{ - padding:20px 30px 0 0;
- }
- main #photo3{
- margin:50px 0 0px 60px;
- }
●ＨＴＭＬ
<section id=”map” class=”clearfix”>
<iframe ・・・>
<div id=”right”>
<table>
<tr>
<th><img src=”image/acecss/num01.png” width=”48″ height=”28″ alt=””/></th>
<td valign=”top”>玉名方面から県道4号線を南関方面へ</td> </tr>
<tr>
<th><img src=”image/acecss/num02.png” width=”48″ height=”28″ alt=””/></th>
<td valign=”top”>三ツ川小学校が左に見えてきます。</td> </tr>
<tr>
<th><img src=”image/acecss/num03.png” width=”48″ height=”28″ alt=””/></th>
<td valign=”top”>その先、左側に簡易郵便局があるのでさらにその先約100m行き左折します。</td>
</tr>
<tr>
<th><img src=”image/acecss/num04.png” width=”48″ height=”28″ alt=””/></th>
<td valign=”top”>道なりに800mくらい行くと玉名牧場の看板あります。</td> </tr>
<tr>
<th><img src=”image/acecss/num05.png” width=”48″ height=”28″ alt=””/></th>
<td valign=”top”>その先は角ごとの看板どおりに進んでください。</td> </tr>
</table> <img src=”image/acecss/img02.png” width=”469″ height=”49″ id=”photo3″ alt=””/>
</div>