2014/11/03(月)

擬似要素で生成された画像を縦方向にセンタリングするソリューション このエントリをはてなブックマークに追加 

Filed under: CSS,WEB制作 — KAY @ 11:58:06


以下のサンプルをご覧ください。

TWECOCaq_normalサンプル1
サンプル2

こちらは以下のようなコードになっています。

CSS
#my_sample1 {
display:block;
width:300px;
text-align:center;
border:1px solid #00b;
}
#my_sample1 img {
vertical-align:middle;
}
#my_sample2 {
display:block;
width:300px;
text-align:center;
border:1px solid #00b;
}
#my_sample2:before {
content:url(http://blog.chisyamori.com/kay/wp-content/files/2014/11/TWECOCaq_normal.jpeg);
vertical-align:middle;
}

HTML
<span id="my_sample1"><img src="http://blog.chisyamori.com/kay/wp-content/files/2014/11/TWECOCaq_normal.jpeg" alt="TWECOCaq_normal" width="48" height="48">サンプル1</span>
<span id="my_sample2">サンプル2</span>

サンプル1はimg要素、サンプル2は::beforeによって生成された画像です。
どうも、擬似要素の画像はimg要素と違ってvertical-align:middle;じゃセンタリングされないみたいですね。しかも、なんか下に空白ができてるし……。この空白は恐らく縦の揃え位置がbaselineになっているためでしょう。

結論から申し上げますと、CSSでこのように指定してやると、縦にセンタリングされます。

#my_sample3 {
display:block;
width:300px;
text-align:center;
border:1px solid #00b;
}
#my_sample3:before {
content:url(http://blog.chisyamori.com/kay/wp-content/files/2014/11/TWECOCaq_normal.jpeg);
line-height:0;
vertical-align:-16px;
}

サンプル3

まず、line-height:0;で下の空白を消します。そして、vertical-alignにマイナスの値をいい感じに指定してやります。
いい感じというのは具体的に言うと、

(画像の高さ – フォントの高さ) / 2

です。このサンプルの場合だと、画像の高さが48pxでフォントが16pxなので、

(48 – 16) / 2 = 16

というわけで-16pxを指定しているわけですね。

ちなみに、このような形で擬似要素を使わなければならないケースは稀だと思います。
タグで表現して問題ない場合はそれこそサンプル1のように記述すればいいだけですし、そうでなくても通常はbackgroundで事足りるでしょう。
今回の場合、ポイントは実はtext-align:center;の部分で、「センタリングされた任意の長さの内容テキストの直前に画像を配置したい!」というケースでした。
backgoundだとちょっと難しいですよね。

さて、解決したはいいものの、どうやら擬似要素による生成画像はimg要素とは違ったレンダリング規則が適用されてるみたいですが、どういったアレでこんな事態になってるのかは未だ謎です。

2009/01/23(金)

固定幅でセンタリングされた要素の横にタブ風メニューをくっ付けるCSS このエントリをはてなブックマークに追加 

Filed under: CSS,WEB制作 — KAY @ 00:38:24

個人的にはリキッドデザインの方が好きなんですけどね。

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

とりあえず以下の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を無視すればもうちょい簡単に出来ますが……。

タブメニューサンプル

2006/08/16(水)

IEでウィンドウをフラットにする このエントリをはてなブックマークに追加 

Filed under: CSS,JavaScript,WEB制作 — KAY @ 05:34:15

winIEのhtml要素は、デフォルトでボーダーを持っています。
なので、

html {border:0;}

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

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