IE6の文字間隔

IE6と、7・8とでなんとなく文字の大きさが違うなとは、漠然と感じていた。
あるサイトでデザイン上IE8で1行に収まっているページがIE6で崩れるとの指摘。

確かに、IE6だと微妙に文字間隔が広く、スペースに収まらない。
結果的にfloatもいまくいかなくて表示が崩れる。

この問題は、font-family指定の“最初”に日本語フォントを指定すると解決する。
これまでは、英字フォントを最初に指定していたが、“MS Pゴシック”を最初に指定するようにしたら、キレイに収まった。

画像＆テーブル幅（HTML）

画像と枠線の間に余白を開けたかったのだが、imgタグでpaddingを指定してもIEで余白ができない。
久々にHTML4.01Transitionalで作っていたが、要するに「互換モード」で解釈されていた。
「標準モード」にするには、DOCTYPE宣言をW3CのURLまで入れて正しく書かなければいけない。

http://allabout.co.jp/internet/hpcreate/closeup/CU20061202A/

テーブル幅を固定するには、table-layout: fixedの指定が必要。
その上で、最初のtdで幅を指定する。
最初のtdやthで幅を指定するのはよくやっていたが、table-layout: fixedは忘れていたなぁ。

oblect要素

　各ページに共通するヘッダ部などをiframeで表現してきたが、さすがに非推奨要素は何とかしなくてはと思ってobject要素を使おうと考えた。
　しかし、IEでは枠線を消すことができないらしい。（IE8ではimgは良くなったようだが…）
　さてどうしたものか？

今更ながら2

（ホントの備忘録）

１．IEでは、画像の下側に隙間ができてしまう。

画像を上下に密着させて配置したいときに困る。
これを回避するには、imgタグに対して、
vertical-align: middle;
のように設定しておくと良い。（middle のところはtopやbottomでもいいらしい）

２．IEでは、縦サイズの小さい画像の上下に空白ができる。

縦方向が可変なボックスに、画像を背景に使って枠を付けるような場合、一番上と一番下部分を別divにして上蓋・下蓋用の背景画像（と余白）を指定するか、上蓋・下蓋用の画像をimgで直接置くことになるが、後者の方がソースとして分かりやすくなると思って、縦が数ピクセルの横長の画像を「蓋」として置いてみた。
すると、「蓋」の上下に隙間ができてしまう。FireFoxでは隙間は出ない。
imgタグには、
margin: 0px;
padding: 0px;
が適用されているはずなので謎だった。

結論から言うと、IEの場合、
画像の縦方向の表示サイズは、画像を置く場所に適用される「行の高さ」より狭くできないらしい。
line-height を変えると、問題の「隙間」も変わるが、100%より小さくはならない。
そこを小さくするには、適用されているフォントサイズを変える必要がある。

回避策は、画像を含むdivタグに対して、
font-size: 1px;
を指定する。
これは、１．の問題でも使えるらしい。

Accessの起動オプション無効化＋メニューバーが消える

簡単なことだが、焦ったので記録しておく。

Accessの.mdbでスタートアップオプションが設定されているヤツは、Shift＋Enterでそれを無効化して起動（データベースウィンドウを表示）できる。
ところが、それをやると、Accessは起動するが肝心の.mdbが開けないという現象に出会った。
“起債管理システム”と銘打ったヤツで、大手法規出版社の製品。

「スタートアップオプションが設定されていない」のではない。
ただ、通常に起動すると「セキュリティの警告」が出る。

要するに、「セキュリティの警告」が出ている段階は、まだ開きに行っていないだけのこと。
Shiftを押しながら「開く」をクリックすればデータベースウィンドウが出てくる。

いつもならすぐに気がつくことだが、今日はベンダーの社員が操作して不思議がっていたので、Accessそのものの問題かと思ってしまった。

それよりも問題なのが、メニューバーをいったん消して作り直している点。
終了してしまうと、当然独自のメニューバーは消えるが、元のメニューバーが戻ってこない。
すべての.mdbに影響するので困った。

元に戻す方法は、
１．Accessの画面で Ctrl＋G でVBAを起動し、
２．イミディエイトウィンドウで CommandBars("Menu Bar").Enabled = True　でEnter。
３．Accessの画面で、[表示] →[ツールバー]→ [ユーザー設定]　メニューバーを選択して[リセット]ボタンを実行。もしくは、メニューバー →[プロパティ]→[既定の設定に戻す]
だが、
各人でやらないといけない。

BJKitを使ってみた

　サイトの見出し部をきれいに表示する方法はないかと思っていたら、BeautifulJapaneseKitというツールを発見した。
　FLASHを使ってアンチエイリアスのかかった文字を表示するというもの。　2006年に出ているので、「かなり前のモノ」という位置づけにはなる。

　試してみようと思ったが、なかなかFLASHが表示されない。

　いろいろ悩んだが、結局のところフォントの用swfは、元HTMLのあるフォルダの下のフォルダにないとダメみたい。javaスクリプトはどこにあってもパスの指定が効くのだが、swfが読み込まれない。指定の仕方が悪いのか？

　なんとか動いたが、使いこなすのは大変そうだ。
　swfは1.5MBほどあるので、まだまだ読み込みに時間がかかる環境が多いだろうし、デザイン上の問題で使えるところが限定される。
　小さな文字ではかえって見づらい。

　イベントタイトル程度では使えそうなので、ボチボチとやってみよう。

今更ながら

昨日の「IE8がWebDAVクライアントにならない」件もそうだが、当たり前のことなのに“知らない”と言うか気に留めていなかったことがあまりに多いのに愕然としている。

例えば、HTML・CSSにおけるボックスのセンタリング。
div要素で囲まれた範囲を中央寄せしたい場合、margin-left: auto;　margin-right: auto;と、marginの左右に”auto”を指定すれば実現できるはずだが、IEに適用されないので色々と試行錯誤していた。
これは結局IE6以前のバグで、回避策として親ボックスに"text-align: center;"を指定して全体をセンタリングし、子ボックスに"text-align: left;"を指定して子ボックス内の表示を元に戻すしかかなった（厳密にCSS定義としては間違っているが、IEへの「仕方の無い対応」）のだが、バグであるということに気づかず、"margin-・・・: auto;"の方がダメなのだと思い込んで、おかしなcssを書いていた。

また、"text-align: justify;"も、存在自体を忘れていた。IE6以降限定ではあるが、そろそろ使ってもいい時期だろう。

もう一つ。なんとかマスターしたい技術に「float」がある。
画像のfloatは多用しているが、「フロートには width の明示が必要」という認識が欠落していた。width を明示しなくても画像はちゃんとフロートするので、CSS で画像以外のものをフロートしようとしたときに良くはまる罠になる。ボックスが回り込まずに下に表示さたりするのだが、画像と違ってテキストの「幅」は改行するまで決まらないので、動きが一定せず「なぜ？」と思っていた。
ボックスの幅をピクセルで固定する場合は何のことはないのだが、フロートする画像の隣にテキストボックスを段組的に配置したいという場合に悩んでいる。