部屋の片隅

HTMLとCSSについてのメモ

個人的なメモですが、少しでも他のサイト作成を行う方の役に立てればと思い作成しました。
気分次第でたまに更新するかもしれません。

IE6のwidthに関するバグ

IEはバグが多いことで知られ、その中の１つがこれです。
IE6ではwidthの解釈がおかしく、本来であればmargin,border,paddingを除いたものがwidthです。
しかしIE6ではそれらを含めた幅をwidthとしているのです。
IE6でサイト作成を行っていたりする人はこれが正しいと思っていたりするかもしれません。
自分も最近までそれが正しいと思っていました。

参考URLの方にIE6に対する対策法があります。
アンダースコアハックといって、プロパティの前にアンダーバーを入力することで、Win版IE6以下のみに適応させることができます。
ハックというのはバグを利用した解決法なので、人によって好き嫌いがありますね。

参考URL

paddingとmarginについて

paddingとmarginはレイアウトにおいて、とても重要な項目です。
偉そうに言えるほど理解している訳ではありませんが、知っていて損はありません。
参考URLより、padding は指定した値だけ必ず領域が確保されるが、marginは相殺されるとあります。

paddingは必ず領域が確保されるということで良いとして、marginの相殺については少し複雑になりますね。
参考URLの例では、ある２つのボックスが縦に２つ並んでいます。
２つのボックスにそれぞれ、margin-bottomプロパティ、margin-topプロパティを指定します。
この時実際に２つのボックスの間のスペースは、指定した２つの値の大きい方になります。

paddingとmarginを用いる際、これらは重要なポイントですね。

参考URL

ボックスを中央に配置する方法

ボックスをウィンドウに対して常に中央に配置する為の方法ですが、まずスタイルシートにてwidthとheightプロパティを指定します。
そしてleftとtopプロパティを50%にします。
そして最後はmargin-leftプロパティに、widthで指定した値の半分だけ負の値で指定します（widthが300pxとしたら、margin-leftは-150px）。
margin-topについても同様で、heightの半分を負の値で指定します。
こうすることによって、ボックスが中央に配置されます。

また、ボックスの大きさを変えず、溢れた分をスクロールさせて表示する場合は、oveflowプロパティを指定しましょう。

参考URL

スタイルシートでのclassとidの名称について

スタイルシートではclassとidに自由に名前を付ける事ができますが、付ける名前によっては後々困ってしまいます。
詳しい事は参考URLを見て頂ければお分かりになると思うのですが、スタイルシートの利点というのはHTMLから見栄えを分離できるところですからね。
HTMLに見栄えに関する語句が出てきただけでも怪しく思った方が良いのかもしれません。

自分もまだclassやidにデザイン内容を表わす名称を指定していたりします。
というのも、ピッタリ合う名称が思いつかないからです・・・（汗
強調する文章の場合は「attention」、年を表わす数字の場合は「year」などは思いつきますが・・・。
自分は元々日記や読み物で多くの色を多用する人間なので、その度に名称を考えるのは面倒なのです。
単純に「attention_001」「attention_002」とかやって良いのかとか、すごい悩みどころです。

良いアイデアが浮かんだら、一括置換ソフトを用いて全ての名称を変更するつもりです。
それとも、良く使うものだけを残して、残りは削除するか・・・。
技術的な問題ではありませんが、とても難しい問題ではないでしょうか。

参考URL

ボックスから画像がはみ出る場合の対処法

参考URLを見て頂ければ分かると思うのですが、ボックスよりも大きい画像にfloatを指定して配置すると、画像がボックスをはみ出して表示されます。
これを解決するには、overflowプロパティをautoにすれは良いです。
また、ボックスにスクロールバーを表示させるには、ボックスにheightプロパティを指定しましょう。

（2010年10月18日追記）
数ヶ月まともにHTML,CSSを触っていないと、同じような問題に悩まされるんですね・・・（汗
日記のページなど、多くの記事が存在するページでこの問題は起こりやすいのではないでしょうか。
うちのサイトの日記で言いますと、上に過去の日記とリンクがあるヘッダーがあります。
過去の日記とリンクを両サイドに分けるには、もちろんfloatを使う訳ですが、下の日記の記事もfloatによって、過去の日記の右側に入りこんできます。
対処法として、過去の日記とリンクを含むdiv要素のheightを100pxにしたりとか、日記の見出しにclearを指定したりとか、考えました。
後者については、他の全ての日記にもclearが付いてしまい、必要無いところでも機能してしまうので、気持ち悪いですね。

結局floatに関する問題を検索して、この項目と同じ解決法を見つけて解決しました。
heightを大きくするやり方と似ていますが、overflowを用いた方が安心できますね。

参考URL

ボックスに対する背景画像の固定について

あるボックスに対してoverflowプロパティをautoにしていたとします。
そのボックスに背景を固定しようとして、background-attachmentプロパティをfixedなんかにすると・・・上手く表示されないんですよね。

これについてはfixedを指定している場合、背景画像の表示位置がウィンドウを基準とした位置になるので注意が必要です。
IE6ではその要素に対して背景が固定されますが、他ブラウザ(IE7以上含む)ではウィンドウを基準に固定されます。
知らないと必ず引っ掛かる落とし穴です。

参考URLの場合、ボックスにbackground-repeatをno-repeatとして、背景を固定しています。
これで見た感じ解決しているように見えます・・・が。
自分もサイトの改装の際にこれを試したのですが、スクロールする度に固定された背景画像がプルプルと震えました・・・（汗
何を言ってるんだと思われるかもしれませんが、例の如くIEのみの現象です。
イメージとしては、スクロールする度に移動しようとしている背景画像を、固定し直してるような感じです。

こういった細かい所はとても気になって仕方が無いので、メインのボックスの背後にもう１つボックスを作り、そこに背景画像を固定しました。
<div>要素が増える事に抵抗を覚える方もなかなか多いでしょうが・・・。
ちなみに、IEの場合バージョンが７以前になると、背景もスクロールに合わせて動いてしまいます。つまり固定されないのです。

結論としては自分の場合、IEでボックスに背景を固定するのは難しいと言えます。
解決する為には少し汚い手を使う必要があるでしょう。

最近はGoogleChromeなど他のブラウザも沢山登場していますが、IEはまだ多くの人が使っているでしょう。
いくらバグが多くて嫌になっても、無視できないのは困りますね。

参考URL

画像の下に僅かな隙間が空いてしまう現象

自分がこの現象に直面した場面というのは、サイト改装の作業の際、トップのタイトルの画像を設置した時でした。
<h1>要素の中にタイトル画像を入れているのですが、画像の下に妙に気になる隙間が・・・。
イメージとしては、この場合の<h1>要素のpadding-bottomプロパティを5pxとしたもの。

何時間考えても解決策が思いつかないので、仕方無く2chのこの分野のスレに質問。
そこで原因はvertical-alignプロパティの初期値がbaselineである事が分かりました。
vertical-alignプロパティの値をbottomにすることでIE8では無事表示されました・・・・が！
なんと次はIE7以前のブラウザで、画像の上に隙間が現れましたとさ。IEホントふざけてる。

バージョンの違いによって表示のされ方が違う事の原因を探る根気も無いので、とにかくIE全バージョンへの解決策を探すことに。
そこでスレの協力もあって、タイトル画像をdisplayプロパティを用いてブロック要素にすることで何とか解決。
画像を表示するimg要素はインライン要素なので、disaplayプロパティをblockとすれば、img要素はブロック要素となります。
こうすることによって、IEのバージョンに関係無く、思い通りの形で表示されることを確認できました。
このdisplayプロパティを用いる方法は、他でも少し使ったので、覚えておいて損は無いでしょう。

参考URLより、この現象はDOCTYPE宣言（文書型宣言）によっても変化するとあります。
自分の場合、DTD（文書型定義）をXHTML1.0のstrictからtransitionalにしたところ、問題の隙間が無くなりました。
どうやらDTDをstrictにした時に起こるみたいですね。

CSSの仕様のようですが、いまいち分からずに無理矢理解決させた感じがしました。
ですがこうやった妥協するのも大切と学んだような気がします（汗

参考URL