CMSブログソフトWordPressの基本操作と使い方
WordPress3.0.4 ADPHIC Co,.Ltd. SINCE.2008.10.15

HOMEIllustratorのツボadphicContact-Mail

CONTENTS
プライベートな覚書き
  • CSSでつくる画像のロールオーバーメニュー
  • デザインで困らないために spacer.gifの代用品をCSSでつくる
  • AD LINK
    Fotolia
    500万点以上のロイヤリティフリー画像が、なんと100円から使えるイメージバンク。印刷レベルの写真でも500円。ちょっと素材が必要なときに便利です。
    TIPS
    CATEGORY : CSS・HTMLのメモ | UPDATE : 2008.09.30

    デザインで困らないために
    spacer.gifの代用品をCSSでつくる

    レイアウトで少し上下の空きが欲しいとき、CSSの設定に戻ってやり直すのは面倒な上、他のページにも影響が出てしまうので、あらかじめCSSにスペーサータグを用意して”迷わず”挿入します。
    floatの設定で子ブロックが親ブロックから飛び出す場合は、height: 0px;を子ブロックの下に挿入すると、飛び出しを回避できます。

    STYLE-CSS<CSSファイル設定>
    .spacer10 {
        clear: both;
        width: auto;
        height: 10px;
        }
    
    TEMPLATE-TAG EXAMPLE<記述例>
    <div class="spacer10"><!—-></div>

    <!—->は画面に表示されません。これを入れないとブラウザによって表示が異なります。
    0px、1px、5px、10px程度のスペーサータグをつくっておくと、デザインの柔軟性がかなり高まります。が、spacer.gif を使いまくったテーブル組みの時代から、進歩していない…。

    INDEX