グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

もともとmacはwindowsに比べて文字間が広いという認識でしたが、
最近firefoxは、windowsに近い表示になってきたようです。
そこで困るのがsafari。
いくつか検索してsafariのみにきくハックを試してみましたが、
バージョンが低いもの用なのか、効果なし。。。
やっとバージョン 5.0.3使えるものを見つけました。

---------------

@media screen and (-webkit-min-device-pixel-ratio:0){
ココにsafariだけにきかせたいスタイルを書く
}

---------------

でもバージョンが新しくなってくると使えなくなってしまう可能性があるので
期間限定のサイトに限った方が良さそうです。

今更な感じですが、IE6でのレイアウト崩れについてです。

＜div＞や＜img＞などの要素を縦に並べたとき、余計な隙間ができてしまうことがあります。場合によって原因は変わってくると思いますが、起こりやすそうなものを書いてみます。

横幅にぴったりな＜img＞の下の隙間


＜img＞タグで親の横幅にぴったりな画像を入れている場合、直下の要素との間が空いてしまうことがあります。
これは、＜img＞と要素の間の改行が原因であることが多いです。

＜div＞
　＜img src="xxxxx"＞
　＜div＞
　コンテンツ
　＜/div＞
＜/div＞

コードを見やすくするために改行したいものですが、改行は半角スペースに変換されてしまうため、横幅に納まりきらず縦に伸びてしまいます。

こういう場合は＜img＞タグ後の改行をとってしまうか、＜img＞タグの後ろに＜br /＞タグを入れれば解決できます。

＜div＞
　＜img src="xxxxx"＞＜br /＞
　＜div＞
　コンテンツ
　＜/div＞
＜/div＞

こんな感じです。



縦細の＜div＞の下にできる隙間


縦幅の狭い＜div＞などを使っている場合、下に余計な余白がでることがあります。
これは、指定した height よりも文字サイズ＋行間が大きいことが原因です。
厄介なのは、要素内にテキストを入れてなくても起こること・・
パッと見て、文字サイズが問題だと気付きにくいです。

スタイルで font-size や line-height を指定して、＜div＞の height よりも小さくしてあげれば直ると思います。
09/6/24
後に別の記事でも書いていますが、スタイルに「overflow:hidden; 」を設定することでも解決できるようです。
文字サイズでも間違いではないですが、あまり小さくするとスパム扱いされてしまう場合があるようです・・。

更新のたびに画像を差し替えるサイトで、かつ画像の縦幅が毎回変わるような場合。

＜img＞タグの height の値を指定してしまうと更新のたびに変えなくてはいけなくなってしまうので、最初から height を入れない、という方法を取ることにしました（指定しなければ勝手に画像のサイズになるので）。

ですがこの＜img＞タグのサイズ指定、入れなければならないものという認識があったので、実際のところどうなのか調べてみました。


するとどうやら、サイズ指定は必須ではなく任意、のようなのです。
HTMLチェッカーにかけてみても、エラーなどは出ませんでした。

では何故入れるのかというと、ちゃんとメリットがあるようです。

・ページの表示速度が上がる
・ページ読み込み中と読み込み後とで、レイアウト崩れが起きない
（画像が読みこまれた瞬間にテキストがずれるとか、そういうのが防げる）

表示速度はほとんど変わらないようですが、レイアウト崩れのほうは、重いページでは多少関わってくるかもしれません。


基本は入れるようにして、画像サイズが変わる可能性がある部分は外す、という形が一番良さそうですね。


おっしーでした。

以前に、リンク先のページにあるFlashを、特定のフレームから開始させることが必要なときがありました。

【 B 】【 C 】【 D 】という複数のページからリンクされている【 A 】というページがあり、この ページ【 A 】にあるFlashを、【 B 】のリンクから飛んできたときはフレーム1から開始、【 C 】から飛んできたときはフレーム2から開始、【 D 】からのときはフレーム3から開始させる、というような具合です。

実はとても簡単なことだったのですが・・ そのときはとても苦戦してしまったので、書いておこうと思います。


■ Flash 側の設定

1 、飛ばしたいフレームにラベルを付ける
今回はフレーム1、2、3にそれぞれ飛ばしたいので、フレーム1には「B」、フレーム2には「C」、フレーム3には「D」というラベルを付けました。

2 、「ラベルの種類」の項目を「アンカー」にする
フレームラベルのテキストボックスの下に、「ラベルの種類」という項目があるので、それを「アンカー」にします。


■ HTML 側の設定

1 、リンクURLのあとにラベル名を入れる
リンクURLのあとに、「 # 」と、Flashのほうで設定した「ラベル名」を入れます。

ページ【 B 】の場合だったら、

<a href="A.html#B">

という感じになります。


たったこれだけ・・

あまり使う機会はないかもしれませんが、簡単なので覚えておくだけでも良いかもしれませんね。