メモ
Webデザイン 知らないと困る 現場の新常識100より引用させていただきました。
◆IE6でのXML宣言
｢後方互換（Quirk）モード｣で表示する仕組みになっている。
※後方互換（Quirk）モード
Web標準に則してつくられていないページを表示するための機能。
IE,Opera,Firefoxなどのブラウザは、｢後方互換モード｣と
｢標準準拠モード｣の2つレンダリングモードを備えている。
◆Ajax
Asynchronous JavaScript + XML の略。
JavaScriptのXMLHttpRequestを使って非同期にサーバーとの
通信を行い、データを取得しWebページ内のコンテンツを
動的に書き換えるといったことを指す。
◆検索エンジンのクローラー制御（robots）
・このページを検索対象にせず、かつここからのリンクをたどらない。
＜meta name="robots" content="NOINDEX,NOFOLLOW"＞
・このページは検索対象とするが、ここからのリンクをたどらない。
＜meta name="robots" content="INDEX,NOFOLLOW"＞
・このページは検索対象としないが、ここからのリンクをたどる。
＜meta name="robots" content="NOINDEX,FOLLOW"＞
・このページを検索対象とし、ここからのリンクをたどる。
＜meta name="robots" content="INDEX,NOFOLLOW"＞
◆サイトID
企業やブランドのロゴマークなど。
サイト全体を通して表示される。デザイン上、
最左上部に設けられているのが一般的である。（h1）
◆em要素とstrong要素
em = emphasis（強調）
strong = strong emphasis（より強い強調）
emは、Webブラウザの初期スタイルで斜体で表示される。
emを飛び越えてstrongを使用するのは×。
CSSで font-style: normal; に設定して使用する。
また、bは｢視覚ブラウザ上で太字で表示する｣の意を持ち、
emは｢制作者にとって強調したい大事な箇所｣の意を持つ。
結果として検索エンジンのクローラーや音声ブラウザのユーザーなど、
視覚から離された閲覧者（ソフト）にも制作者の意図を理解してもらえる
ので、emを使用するようにする。
◆jquery.biggerlink.jsでリンクボタンに見せる
dlでマークアップした画像と説明文にマウスオーバーした際、
ブロックレベル要素があたかも１つのリンクボタンであるかのような、
挙動を見せる、任意の範囲まで広げる為のライブラリ。
デモ（IE6は微妙）
◆セマンティック・ウェブ
Webページの内容に意味を表すメタデータを付与することにより、コンピューターが効率よく情報を収集・解析できるようにするという構想、概念のこと。
W3Cのティム・バーナーズ＝リーによって提唱された。
◆clearfix
フロートを指定された要素も親要素の高さに含めて欲しい、という場合に利用。
div#containar:after {
display: block;
clear: both;
height: 0;
visiblity: hidden;
content: ".";
}
また、この記述をせず｢overflow: hidden;｣を指定するだけでも解決できることもある。
◆IE6で定義型リストの1行目が揃わない
●zoomで解決する
*html dd {
zoom: 1; /* IE6用の指定 */
}
◆インラインフレームの見た目をCSSで実現
overfloatプロパティを設定
dl {
overflow: auto;
}
もしくは
dl {
overflow: scroll;
}
★autoとscrollの違い
●autoは、ボックスから内容がはみ出されていないときはスクロールバーは表示されない。
●scrollは、ボックスから内容がはみ出されないときでも、縦横のスクロールバーが表示される。
◆IE6でのmax-width（最大値）を指定するには
リキッドレイアウトの場合、横幅などを％で指定するが、
同時にmax-widthを指定しておくが、IE6ではサポートしていないため、
CSS minimim and maximum sizesで公開されているminmax.jsをhead要素内で
読み込むことでmax-widthプロパティを利用できるようになる。
さらに｢min-width｣｢min-height｣｢max-width｣の3つのプロパティも
利用できるようになる。
◆IE6では、body要素へ指定したfont-sizeがtable要素には引き継がれないというバグがある。
body要素に12px指定してもtable要素はデフォルトの16pxのままになってしまう。
そのバグを回避するには｢Yahoo! UI Library:Fonts CSS｣で対応。
◆マージンの相殺
要素間のマージンが隣り合っているとき、お互いのマージンが相殺されてしまう。ただし、上下のマージンの時のみ。
★p要素が連続する場合での例
1つ目のp要素の下マージンが｢20px｣
2つ目のp要素の上マージンが｢40px｣
⇒大きい方のマージン｢40px｣が採用される。
○正の値同士だと｢大きい方｣、負の値同士だと｢小さい方｣、正と負だと足し引 きした値が採用される。
★マージンの相殺が発生しない条件
・floatプロパティを指定された要素と他の要素間では発生しない
・positionプロパティで｢absoluteもしくはfixed｣の指定をされた要素は発生 しない。
◆tableのセル内で改行させないCSS
会社概要などの左側の見出し（住所や電話番号など）の文字を改行させないためには以下のCSSを適用する。
table#company th.midashi {
white-space: nowrap;
}
◆IE6で起きる縦型ナビゲーション画像間の隙間解消
・フォントサイズを極端に小さな絶対値（1px）で指定する方法
ul li {
font-size: 1px;
line-height: 1px;
}
・overflow:hiddenで解決する方法
ul li {
height: 35px;
overflow: hidden;
}
※overflowプロパティを記述する際はheightプロパティもあわせて記述する。
◆IEでz-indexが指定通りに効かないときは？
IE以外のブラウザはz-indexで指定した通りの順に重なって表示される。
しかし、IEだとXHTMLの記述順の方が優先されてしまう。
それを解消するには｢親｣ボックスにもz-indexを指定する。
◆ストレージサービスやプロジェクト管理サービスを利用する
複数の人と作業を同時に進めている場合のデータのやり取りなどは、
以下のようなオンラインサービスを活用すると便利。
