clearfixとはfloatをクリアするためにHTML側に特別な要素を追加することなく、かつ指定した要素の最後の位置でfloatをクリアした状態にするために考えだされた裏技です。以前「段組するとFirefoxで背景が出ない」でも紹介した方法はこのclearfixとほぼ同じ要領と思います。なのでclearfixを指定することで親要素がfloatを指定した要素全体を含むようにもなります。もう空のdivとかを入れなくて済んだりします。
カテゴリー: Web
display: noneは読み上げない？
仕事をしていますと、たまに音声ブラウザに対応したものを作ることもあります。そんな時は特にHTMLの文章構造をきちんとしておくとスムーズに進むことが多いような気がします。
普段からページのデザインをした際にページ内の要素の重要度を考えて、その重要度を参考にしつつHTMLの文章構造を決めていくとおのずと音声ブラウザの読み上げ順序などが決まっていきます。なぜサブメニューをHTML内の後ろに持っていくほうがいいのかなどがわかると思います。
Operaの隙間
あまりに有名な話なので、載せるかどうか迷ったがとりあえず載せたほうがいいだろうと考え載せました。
body要素にmargin: 0を指定してもOperaでは隙間がうまりません。それはOpera6～8に起こる現象です。これらのブラウザはbody要素の余白をpaddingでとっていたからです。つまり問題を解決するには下記のようになります。
CSS
[css]
body{
margin: 0;
padding: 0;
}
[/css]
となります。有名な話ですが、一応ですね。
画像の下に隙間ができる
CSSで組んだ際、画像の下に隙間ができたりすることってありませんか？画像を配置している要素の背景色がページの背景色と同じだとあまり気づかないかもしれませんが、背景色が違ったり画像の下にぴったりくっついた要素を配置しようとしたりすると一目瞭然です。何か原因があるのか探ってみてもおかしい所は見当たらない。それは当然です。これはCSSの仕様通りの表示だからです。
XML宣言はつけない
もう皆さんご存知だとは思いますが、念のためメモっときます。
以前はHTML文書の文字コードがUTF-8もしくはUTF-16以外の場合はXML宣言が必要とありましたが、HTML1.0の仕様書第2版でこの条件がゆるくなりました。先にあげた文字コード以外で、上位レベルプロトコルによって文字コードが判断できない場合に必要となっています。
CSSで画像置換のテクニックを使う
CSSで画像置換と言われるテクニックを使うことよくあることだと思います。念のために説明しておきますと、htmlではテキストなんですが、CSS側でテキストを表示させなくして背景として指定した画像を表示させる方法になります。例えばソースだとこの様なものになります。
HTML
[html]
<div id="page-title">
<h2>協会のご案内</h2>
</div>
[/html]
CSS
[css]
#page-title{
width: 798px;
height: 72px;
text-indent: -9999px;
background-color: #FFF;
background: #FFF url(about_title.jpg) 0 0 no-repeat;
}
[/css]
Firefoxでスクロールバーの有無でコンテンツの位置がずれる
今回はFirefoxでスクロールバーの有無でコンテンツの位置がずれるというものです。Windows IE6ではデフォルトでスクロールバーは表示されているので問題ではないのですが、Firefoxはコンテンツの量がブラウザのウインドウの高さを下回るとスクロールバーが出てきます。これが問題になります。サイトを中央に表示していたりすると確かに気になったりします。スクロールバーがある状態からない状態にとブラウザのウィンドウを小さくしていくと、コンテンツが少しずれるのが見られます。しかしこれは正常な動きではあるのです。例えばmargin{ 0, auto ;}とすると、横の位置は当然中央になります。Firefoxはスクロールバーがをぬいた位置で計算していると思われます。だからスクロールバーがあるかないかで当然中央の位置が微妙にずれてくると思われます。(あくまで個人的な見解です。)
Windows IEだけマージンが2倍になる
最近コーディングばっかりやっていますので、日々何かしら問題があります。今回はWindowsのIEだけマージンが2倍になってしまう現象の解決方法です。ちなみにこれもWeb creators2008年2月号に掲載されてました。今号はお薦めです。特に「CSSのアクシデントを解決する92の手法」がいいです。コーディングをしていると多かれ少なかれアクシデントがおきます。それがバグだといくらやっても直らない。。。でも今号にはその事例が載っているので調べる手間が減りますので、是非ご購入を検討ください。
話を戻しますが、このマージンが2倍になるバグは「Double Float Margin Bug」と言うそうです。
定義タグを横並びにする方法
定義タグとは
HTML
[html]
<dl>
<dt>定義する言葉</dt>
<dd>説明文が入ります。</dd>
</dl>
[/html]
と記述するタグです。なんで定義タグを横並びにしないといけないかというとお仕事で使う機会が結構あるからです。例えば文章中に※1とあり、段落の後に※1の説明をするなどです。その時に何も指定しないと上記の例みたいに縦に並びますが、<dd>説明文が入ります。</dd>の部分を<dt>定義する言葉</dt>の右側に並べるようにデザインされたものが意外に多いです。
続きを読む 定義タグを横並びにする方法
段組してブラウザのウィンドウを小さくすると段組が崩れる
今回はCSSで段組をした時、ブラウザを段組してあるボックスよりもウィンドウの横幅を小さくすると段組が崩れてしまうものを解決します。
まず解答から言ってしまうと、段組したボックスを括ったボックスを作るだけ。それだけで解決します。確かに文章構造から考えると意味のないボックスとして位置づけられてしまうと思いますが、表示が崩れるのに比べれば、1行増える程度は見逃してもらいたいと私は思います。
あくまで私的な見解で実際の意味合いは違うと思いますが、この考え方は段組するボックスを結わくイメージです。当然結わいているわけではありません。もしくは表示領域を指定するためのものとイメージするのもいいのかと思います。要するにブラウザにこの段組したボックスはセットであると認識させるためのものだと思います。
なお今回の記事はWeb creatoers2008年2月号を参考にしています。