CSSでブログデザイン

IE6では使えない psition:fixed;（ボックスを画面上の任意の地点に固定する）を実現する方法です。

今までbodyをheight:100%にする方法はありましたが、レイアウトが複雑になってくると不具合がおきることが多かったので、使わずにいました。
ところがもっと簡単な方法があったんですね。ただしJavaScriptがONになってないと使いませんが。。。

position: fixed;
top: 0;
left: 0;
_position: absolute;
_top: expression(eval(document.documentElement.scrollTop+0));

IE6以外のブラウザではアンダースコア( _ )の付いたスタイルは無視するので、普通にfixedが適用されます。

IE6ではスクロールのたびにtopの座標を画面の上部から0pxに指定するので、absoluteでもfixedと同じ効果が生まれます。
ただしこのままだとスクロールのたびに固定したボックスがガタガタしますので、以下のようにbodyの背景にfixdを指定してやると解決します。
body {
background: url(null) fixed; /* 画像はあっても無くても可 */
}

参考サイト
IEで固定座標を指定する方法

ポジションチェンジによる背景画像の入れ替え
さて何のことでしょう？

リンク部分にマウスカーソルを合わせたときに背景画像を入れ替える手法は、メニューなどでよく使われる方法ですが、入れ替える画像容量が大きいときにタイムラグが発生してしまいます。

特に1回目はサーバーから画像を読み込むため余計に時間がかかり、2回目以降もキャッシュから読み込む時間がほんの少しかかります。

そこで入れ替え前と入れ替え後の画像をひとつにまとめてしまい、画像の位置を変えることによって入れ替える方法がポジションチェンジです。


例1：2枚の画像を入れ替える方法
（わかりやすいように特大容量画像を使ってます）
OFFの画像（容量約500KB）
ONの画像（容量約500KB）




例2：1枚の画像をポジションチェンジする方法
background-position: 0px 500px;
で画像の位置を500px下にずらします。
（わかりやすいように特大容量画像を使ってます）
OFFONまとめた画像（容量約1000KB）



ブラウザやパソコンの性能によって若干違いはありますが、おおむねポジションチェンジのほうが画像の入れ替えが早く出来ます。

IE7が
・「透過PNG」
・「position: fixed;」
・「:hover」を指定できる要素の拡大
を採用したようです。

「透過PNG」は前回の書き込みを見てもらえばわかると思うので、
「position: fixed;」と「:hover」を指定できる要素の拡大を説明します。

「position: fixed;」とは、画面上の指定した位置に固定するスタイルです。
これを使うと画面をスクロールしても常に同じ位置に固定されるので、メニューなどを表示するのに大変便利です。
「:hover」はマウスカーソルが上に来たときのスタイルで、JavaScriptのonmouseoverと似たような物です。

IE6では「a:hover」（リンク部分にマウスカーソルが来たとき）しか使えませんでしたが、IE7からは様々な要素に使えるようになりました。
「div:hover」を使って、記事部分の色を変えたりサイドカラムの大きさを変えたりなど、いろいろなことがJavaScriptを使わずに出来そうです。


カスタマイブログの実験ページで、この新しい（と言ってもFirefoxやOperaでは以前から採用されてましたが）3つの機能を使ったメーニューを作りましたので、興味のある方は見てください。

対応ブラウザはIE7、Firefox、Operaです。
今までにはあまり見れなかった、ちょっと面白いメニューになりました。

IE6でしか見れない方は、続きのページでどのような感じのものか見てください。

続きを読む ≫

前回文字サイズの話しをしたので、
今回は文字の種類（フォント）のお話しを。

普段あまり気にすることの少ないフォントですが、
実は100種類以上のフォントが存在します。

サイト作成側で指定しなければ、
ほとんどの人はIE標準フォントの
「ＭＳ Ｐゴシック」で見ていると思います。

ただ個人的にはこの「ＭＳ Ｐゴシック」は
見やすいフォントとは思いません。

代表的なフォントの詳しい解説は
よく見かけるフォントの種類
を見てください。

このブログでは記事の文字サイズは
90%に設定してあります。
（ちなみにIEの標準文字サイズは16pxです）
記事以外は13pxと12pxを使用してます。

多くのブログの記事は13pxが多いですが、
個人的には少し小さいと思います。

私は17インチディスプレイを使ってます。
13pxでも問題なく見れますが、
多分14インチくらいのディスプレイだと
少し読みにくいのではないでしょうか？

ただ文字が小さいと不思議と
カッコよく見えるんですよね。
ですのでデザインを重視する人は
小さい文字でサイトを作りたがります。

でもブログは基本的には文章を
読んでもらうためのものですから、
読みやすいサイズの文字を使うのが
基本ではないでしょうか？


ブラウザにもよりますが
Ctrlキーを押しながらマウスホイールをまわすと
文字サイズを変えることが出来ます。
ただしIEではemや%で指定した文字のみ可能で、
pxやptで指定した文字は変更できません。


2007/11/20　テンプレートが変わったので現在の文字サイズも変わっています。ちなみに今の記事部分は87%（14px相当）です。

スタイルシートを使ってメニューを作るとき
よく使う方法が
a {
　　display : block;
}
と指定する方法。

ただしIE6では
a {
　　display : block;
　　width : 100%;
}
などと横幅を指定しないと
文字の無いところではマウスオーバーできなかったりします。

ただa要素にwidthを指定したくないときも多いので
他の方法はないかと思って考えていたところ、
偶然方法を発見しました。

IE6でa要素に display : block; を指定しwidthを指定しなくても全ての場所でマウスオーバーが利くようにする方法

自分で書いた記事を読んでいて文字が小さく読みにくいので、サイズを変更しました。
スタイルシートbody部分のfont-sizeが、記事本文、コメント本文、トラックバック本文の文字サイズになります。
閲覧者側での文字サイズ変更も可能にしました。

変更点は4箇所です。すでにダウンロードして使っている人は以下の点を変更するか、再度ダウンロードしなおしてください。
登録テンプレートも修正してあります。

変更箇所は続きを

続きを読む ≫