何もない場所 » CSS http://blog.chisyamori.com/kay ──あなたの心の琴線に触れるようなものは何もないです。かといって、他の何があるわけでもないですが。 Fri, 23 Dec 2011 21:39:39 +0000 ja hourly 1 http://wordpress.org/?v=3.3.1 固定幅でセンタリングされた要素の横にタブ風メニューをくっ付けるCSS http://blog.chisyamori.com/kay/2009/01/23/224/ http://blog.chisyamori.com/kay/2009/01/23/224/#comments Thu, 22 Jan 2009 15:38:24 +0000 KAY http://blog.chisyamori.com/kay/?p=224 個人的にはリキッドデザインの方が好きなんですけどね。

ウィンドウをリサイズした時、ウィンドウではなく固定幅でセンタリングされたコンテンツに追随するようにメニューだのバナーだのをくっ付ける方法をば。

とりあえず以下の3点、

  • validなCSSである事
  • CSSハックを使わない
  • IE6にも対応させる

これを前提で。
↓サンプルソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>タブメニューサンプル</title>
<style type="text/css">
    div#main_contents {
        width:600px;
        height:1000px;
        margin:0 auto;
        background-color:#ddd;
    }
    div#menu {
        height:0;
        position:relative;
    }
    div#menu ul {
        margin:0;
        padding:0;
        width:3em;
        position:absolute;
        left:-3em;
    }
    div#menu ul li {
        list-style-type:none;
        background-color:#ddf;
        margin:2px 0;
        padding:0;
    }
</style>
</head>
<body>
<div id="main_contents">
    <div id="menu">
        <ul>
            <li>いち</li>
            <li>にぃ</li>
            <li>さん</li>
            <li>よん</li>
        </ul>
    </div>
    ほにゃららら。
</div>
</body>
</html>

強調部分がポイント。応用利かせれば右側に引っ付ける事も出来ますね。IE6を無視すればもうちょい簡単に出来ますが……。

タブメニューサンプル

]]> http://blog.chisyamori.com/kay/2009/01/23/224/feed/ 0 IEでウィンドウをフラットにする http://blog.chisyamori.com/kay/2006/08/16/64/ http://blog.chisyamori.com/kay/2006/08/16/64/#comments Tue, 15 Aug 2006 20:34:15 +0000 KAY http://blog.chisyamori.com/kay/?p=64 winIEのhtml要素は、デフォルトでボーダーを持っています。
なので、

html {border:0;}

などとしてやると、閲覧領域の凹みが無くなり、フラットな表示になります。

……とここまでならなんて事の無い小技ですが、javascriptでイベントを扱ったりすると、これが思わぬ動作に繋がる事があります。
というのも、IEではdocument.documentElement.clientWidth(clientHeight)は内容領域（CSSのwidth、height）の値を返しますが、event.clientX(clientY)はボーダーまでを含めた座標を返します。ぶっちゃけ、html要素に何も指定しない場合だと2pxほどずれます。
clientWidthをoffsetWidthとかに変えても無駄です。スクロールバーは幅に含まれますが、相変わらずボーダーは含まれません。
しかもIEは、標準準拠モードと互換モードでdocumentElement周りの挙動が変わるらしく、加えて他のブラウザへの対応も考えると、もう何がなんだかわかりません。誰か助けて下さい。（←エントリの趣旨が変わってきている）

]]> http://blog.chisyamori.com/kay/2006/08/16/64/feed/ 0