CSSでブログデザイン

今年末に正式リリースが予定されている
Internet Explorer 7 を導入してみました。
インストールはここから

詳細は続きのページを見てください。

続きを読む ≫

必修科目の世界史の単位が取れなくて
卒業できないかもしれない高校3年生は、
すでに3万人を超えているとのこと。

当然生徒にはなるべく負担がかからないようにして
卒業させる方法がとられるんだろうけど、
去年までに卒業した人はどうするの？

普通に考えれば、
こんなに広がりを見せている現象が
今年突然現れたなんて考えにくく、
当然何年も前からやっていたことだと
思うんですよね。

すでに大学を卒業して就職をしてる人の中にも
実は単位を修得してない人が大勢いるんじゃない？

なんか最近どんどんダメダメになっていく日本。
本当に日本は「美しい国」になるんでしょうかね？

Lecture／趣味のWebデザイン
ここ数日、手の空いている時間はほとんどこのサイトを読んでいました。

正しいHTMLの書き方とCSSによるデザインの方法を、
非常にわかりやすく丁寧に解説してあります。
それ以外のWEBサイト関連記事も興味深く読ませてもらいました。

先日文字サイズの話しを書いたばかりですが、
ガールズサイトのデザイン事情を読んでみると、
単純に
大きな文字＝読みやすい
小さな文字＝読みにくい
で片付けられる問題でもないことがわかりました。

中でも一番共感を覚えたのが、
バカな閲覧者は勝手に不幸になればいいの一文
「趣味でやっている製作者は、純粋に自分の好きな方を選べばいいと思う。」
多くのWEB作成者の悩みを救う言葉ですね。

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

普段あまり気にすることの少ないフォントですが、
実は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を指定しなくても全ての場所でマウスオーバーが利くようにする方法

IE6はCSSを正しく解釈するので、
<div style="width: 100px; padding: 10px;">
この場合FierfoxやOperaと同じように
実際に使える部分が100pxになると解説されてます。

でも自分でやってみると
IE5やIE5.5と同じようにpaddingも含めて100pxになり、
実際に使用できる部分は80pxにしかなりません。

この原因が今日初めてわかりました。

IE6には「標準準拠モード」と「後方互換モード」
という2種類のモードがあり、
簡単に言うとソースコードの1行目に「DOCTYPE宣言」をすると
「標準準拠モード」（正しいCSSの解釈）に、
2行目以降に「DOCTYPE宣言」をすると
「後方互換モード」（古いIEと同じく間違った解釈）になります。

ブログのテンプレなどはほとんどの場合1行目に
<?xml version="1.0" encoding="Shift_JIS"?>
このような記述がされているので
「後方互換モード」になってることが多く、
IE6では正しくCSSが解釈されていないことになります。

ですからIE6に合わせてテンプレを作ると、
他のブラウザではレイアウトが崩れることが多くなります。


おまけ
実際にどのように見えるかサンプルを作りました。
IE6 「標準準拠モード」でボックスを見る
IE6 「後方互換モード」でボックスを見る


さらにおまけ
ディープ３着　残念（涙