WordPress Tips
仕上がりの見た目を求められる企業のサイトでは、HTMLやCSSの反則技も使います。まったく個人的な方法ですので、良い子は真似をしてはいけません。

空間を調整するスペーサータグ

CATEGORY : CSS・HTML編 | UPDATE : 2008.09.30

テーブル組みの spacer.gif から抜け出せない（笑）

margin または paddingを使い div 要素で上下の空きを調整しようとすると、ページデザインの柔軟性がかなり低くなります。微妙な空間の調整は「スペーサータグ」を挿入します。

■スペーサータグCSS : 上下10pxの空間を作る
.spacer10 {
clear: both;
width: auto;
height: 10px;
}

■テンプレートへの記述例 : 上下10pxの空間を作る
<div class="spacer10"><!—-></div>
※<!—->を入れない空タグの場合、ブラウザによって表示が異なります。

1px、5px、10px、20px程度のスペーサータグをつくっておくと、ウェブデザインの柔軟性がかなり高まります。が、spacer.gif を使いまくったテーブル組みの時代から、進歩していない…。

▲ PAGE TOP