画面の中央にボックスを配置するレイアウトでに注意点
* 正しくはボックスの左右マージンを"auto"にすればよい
* しかしそれに対応していないIE5.5以前のブラウザへの対応を忘れてはならない
IE5.5より以前のブラウザ用にbody要素に text-align: center; を指定しその後に標準に準拠したブラウザ用にボックスに左右マージンをautoに指定する。ボックス内のコンテンツが中央寄せになってしまうのでcenterに戻すのも忘れないようにしたい。
body {
text-align: center;
}
#box {
margin-left: auto;
margin-right: auto;
text-align: left;
}
IEでフロートさせたボックスのマージンが倍
同じ要素にfloatと左右のmarginを指定した場合、「IE6以下」で指定した値の倍のmarginを適用されてしまう。
これは下記の通り display:inline; を指定することで修正されます。
float:right;
display:inline;
background-position: 横位置 縦位置;
数値一つ
横方向の位置を指定します。この場合、縦方向の位置は上下方向の中央に画像の中心が合わせられます.
左端及び上端が「0」となり、負値を指定する事も可能です。
パーセンテージの場合は当該要素の幅及び高さから求められる値となります。
数値二つ
横方向の位置 縦方向の位置」の順に空白で区切って指定します。
一つだけ指定した場合は、この場合、左端及び上端が「0」となり、負値を指定する事も可能です。
パーセンテージの場合は当該要素の幅及び高さから求められる値となります。
マージン （ margin ） を使用するケース
・ ボーダーの外側に余白が必要な時
・ 余白に背景色（画像）を適用したくない時
パディング （ padding ） を使用するケース
・ ボーダーの内側に余白が必要な時
・ 余白に背景色（画像） を適用したい時
IE5.x, 6では、float指定したボックスに左のマージンを指定すると、左側が指定された値の2倍のマージンになってしまうことがあります。その回避方法として、パディングを使用したり、ボックスに「display：inline；」を指定することにより回避出来ます。
結論
IEとそれ以外のブラウザので何が違うのか・・・一番大きな問題は、width・heightプロパティで指定する値はパディング・ボーダーの幅を含んでいる
widthとpadding/borderを一緒に指定しない
特に、ピクセル単位で合わせるところではborderを使わない。
widthとpadding、borderを一緒に指定しない。
絶対に覚えておく必要があるのは、width と border, padding を同時指定しないという事。
逆に、 width と margin は同時に指定しても大丈夫。
また、width を指定しないのならば、margin, padding, border を同時に指定しても大丈夫。
一つの要素に指定しても大丈夫な組み合わせ（例）
* margin と padding * margin と width * border と padding * border と margin と padding
一つの要素に指定すると表示が違ってしまう組み合わせ（例）
* padding と width * border と width * margin と width と padding * padding と width と border
http://www.web-mame.net/css_layout/beginner3.html
後方互換でも標準準拠でも同じように表示させるように工夫する
width解釈に関する説明
正しいCSS解釈におけるwidthは、content（中身）の幅であり、
paddingやborderはその外側に置かれる後方互換モードはにborderまで含んだボックスの横幅で、widthを解釈。
これを知らずにIE6（の後方互換モード）で見た目を調整すると、
他のブラウザではボックスが大きくなってしまい、はみでたり、floatが崩壊したりする。
では、
標準準拠な書き方で書いて、後方互換モードでもそのまま表示されるようにするにはどうするか。
解法。
「複数のボックスに分割する」
まず、大きなブロック要素を用意し、図3のようにwidth: 320pxを指定し、paddingは指定しない（＝0にする）。
その中のブロック要素で、padding: 40pxを指定し、widthは指定しない（＝autoにする）。
fontなどの書式は、ここに指定する。
(なお、paddingの代わりにmarginにする場合はマージンの相殺と背景の話も気をつけなければならないので、paddingにしておいたほうが安全。)
こうすれば、contentの幅はどちらのモードでも結果的に240ピクセルになる。
大事なことはwidthとpadding/borderを一緒に指定しないことである。
ピクセル単位で合わせるべきところではborderを使わない
<div class="box1">
<div class="box2">
本文 本文 本文 本文 本文 本文 本文 本文 本文
</div>
</div>
.box1 {
margin: 20px;
width: 200px;
}
.box2 {
padding: 10px;
border: 5px solid #666;
}
2つブロック要素を用意するとなると、div要素の乱発になるのではないか、と心配する人もいるだろう。
しかし、たとえば、
ul/ol要素でwidthを指定しli要素でpaddingを指定する、
dl要素でwidthを指定しdt/dd要素でpaddingを指定する、
body要素はwidth: 100%のままでp要素でmarginを指定する、などとすれば、
div要素をいっさい使わなくてもデザインが可能である。
構造と表現を別にする
リスト項目をインライン表示し、項目と項目の間は1文字分空ける」というスタイル定義
{
display:inline;
margin-right:1em;
}
まずclass付けは文書の構造に則して行い、そうして出来たHTML文書から、インライン表示させたいリストを選択し、
ul.booklist li,
ul.movielist li,
ul.disclist li,
ul#navigation li {
display:inline;
margin-right:1em;
}
構造的に「ここが重要である」というふうに解釈して、em要素やstrong要素を使って強調したり、
「ここは注意を要する」というふうに解釈して、
classの名前を"attention"や"notice"や"alert"や"caution"といった見た目優先でないものにする
要素の中でテキストを画像に回り込ませる
例えば段落に値が image と left の class 属性を付与すると、
その要素にコンテナされた画像は左側に寄り、同じ段落に含まれるテキストは画像の右側に流し込まれす。
また、class の値が image と right の場合はその要素にコンテナされた画像は右側に寄り、
同じ段落に含まれるテキストは画像の左側に流し込まれす。
画像を左寄せにテキストは画像の右側に
<p class="image"><img src="sample.png" width="150"height="150" />
例えば段落に値が image と left の class 属性を付与すると、その要素にコンテナされた画像は左側に寄り、
同じ段落に含まれるテキストは画像の右側に流し込まれす。
<div> と <span> はスタイルの定義をするのに便利な要素ですよね。
（無意味に多用するのはよろしくないようですが・・・スミマセン・・してます）
どっちもただ“範囲を指定する”だけの要素で、
違いは
<div>はブロック要素で、
<span>はインライン要素だ、
ということです。
背景画像の繰り返しをしないために、「 background-repeat 」という属性をつかい、値を、「 no-repeat 」と定義します。
つぎに、背景画像の表示位置を定義するために、「 background-position 」という属性に、「 left top 」という値を定義します。
値の書き方が、ちょっと特殊ですが、背景画像の表示位置を定義するためには、基本的に以下の５つの値をつかっていきます。
top → 背景画像を、上寄りに表示する right → 背景画像を、右寄りに表示する bottom → 背景画像を、下寄りに表示する left → 背景画像を、左寄りに表示する center → 背景画像を、中央寄りに表示する
これらの値は、単独で使用することもできますが、
じっさいに、表示位置を定義するときは、例のように、２つの値を組み合わせて使用すると便利だと思います。
そのさい、値の間には「半角スペースキー」を入れるのを忘れずに。
「 background-position 」に、値として、「px」、「%」を定義してあげることもできます、「左から10px、上から20px」の位置に、背景画像の位置を定義しています。
background-position: (左からの位置)px (上からの位置)px
・ idはidentity 又は identification の略で、ページの”唯一、その場所のみ”を表すものであり、1ページに1箇所のみを指定するもの。なので、IDの名前を付けるときはどこのどの部分かを分かりやすくしたものを、多少長くなってもできるだけ省略しないでおく方が、管理しやすい。ex)div#contents div#mainFlame ul#navi li#toGallery {font-size:12px;}
・ classはその意味のまんま”分類するもの”ってとこカナ。使い回しすることを前提に、細かく装飾をしていするほうがいい。また、class指定を出し渋ることでサイト全体の均整が保たれることにもなり、管理もしやすくなる。
・ タグに複数のクラスを指定するにはタグのclass属性にクラス名を「半角空白」で区切って列記する。
IE6を含むWindows版IEには様々なポジショニングに関するバグがあるそれらはWidth:100%;やheight:100%;を指定することで解決できる場合があるが状況によっては100%では不具合が生じることもある。その多くは幅ではなく高さ（height）を指定することで解決できることが多い。このような症状にうまく利用できるのが THE HOLY HACK と呼ばれるHackだ。IEにはデザイナーには迷惑な親切設計機能がありボックスの幅や高さの指定を無視してボックス内の内容に応じてボックスサイズを拡張してくれてしまう。親切設計なのかは分からないがこのバグを利用し height:1%; という指定をIEにのみ適用させるのが目的。
［IEBlog］
Call to action: The demise of CSS hacks and broken pages
お使いのCSS ハックを一掃してください
IEBlog: Clean up your CSS hacks
Internet Explorer 6 における CSS の拡張
GoodCSSHack
The @import Hack
About Conditional Comments
条件付コメント(Conditional Comments) 実験ページ
悪いハック
［参考サイト］
HTML 4.01仕様書（日本語訳）
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html
ウェブコンテンツ・アクセシビリティ・ガイドライン 1.0（日本語訳）
http://www.zspc.com/documents/wcag10/
CSS2仕様書（日本語訳）
http://www.y-adagio.com/public/standards/tr_css2/forwrd.html
CSSバグリスト@CSSバグ辞典スレッド
http://cssbug.at.infoseek.co.jp/
CSS Filters - CSS-only Filters Summary (dithered.com)
http://www.dithered.com/css_filters/css_only/index.php
CSS Dencitie
http://www6.plala.or.jp/go_west/nextcss/
1. ブラウザCSSのリセット
2. おおまかなレイアウト 大枠のレイアウト調整（ヘッダ、メイン、サブ、フッタ）
3. こまかい調整 枠別に文字回りの調整、装飾
4. 全体調整
* Firefoxで確認後、IE6,IE7について確認という確認手順を徹底する。
* htmlタグの閉じ忘れがないか確認する（HTML Validator）。
* Firebugを利用する。
* ブラウザのバグなどによる表示崩れについては、CSSハックやjavascriptライブラリを利用して個別に対応する。
*ナビゲーション：a要素（インライン要素）に対してdisplay:block;を適用する。
*タグクラウド：li要素（ブロックレベル要素）に対してdisplay:inline;を適用する。
* display: none; を適用した要素・子孫要素は、音声ブラウザで読み上げの対象にならない。
必ずしもdiv要素ではなく意味的な要素 (p、ulなど) に直接idづけしてもよいが (それが理想)、現場の混乱が予想される場合は「必ずdiv要素でラップし、idづけする」と決めておく。
ワイヤーフレーム上にもidを書いておく
デザインワークから制作への「業務の連続性」が生まれる
* 全体を囲むdiv要素は「div#container」、マルチカラムのためのdiv要素は「div#wrapper」などと決めておく (ワイヤーフレームに書いておく必要はない)。
* カテゴリーごとにスタイルを変える場合、「body#shopping ...」「body#careers ...」といったかたちでbody要素につけたidを頼りにスタイルを設計 (id名はディレクトリ名と同じにしておく)。
* ページ内のテキストやパーツそれぞれは本来、特定の役割を備えているはず。つまり、原則としてidを使い、他のものと役割が共通する場合や複数の役割を与えたい場合にだけ、例外的にclassを使うという発想が大切。
* idとclassでは個別性が異なる点に注意 (100点と10点)
。
基本的にid/classには要素タイプをつける (オープンにしない) と決めておいたほうがよい。
[よい例]
form#request { ... }
pre.examples { ... }
スタイルシートの設定方法として、タグにスタイルを定義するという方法がありますが、この方法だとひとつのページの同一タグが全て同じスタイルになってしまい、細かい設定ができません。何種類もの定義をする場合にはあまり向いていないといえます。
タグの指定の代わりにclassやidを使えば、たとえば ＜p＞ の中でも特定の内容にスタイルを適用することができ、個別に HTML 内の各要素にスタイルを指定しなくてすみます。これによりHTML が軽量化できるとともに、スタイルの効率的な管理が可能となります。 細かいスタイルの設定をするにはclassやidを使いましょう。
classとidの違いは、ページ内で複数の要素にスタイルを指定するか唯一の要素にスタイルを適用するかということのような気がしますが、それは大きな間違いらしいです。要素の登場回数ではなく、目的によって class を指定するか id を指定するかを使い分けなければならないそうです。
構造的に「ここが重要である」というふうに解釈して、em要素やstrong要素を使って強調したり、「ここは注意を要する」というふうに解釈して、classの名前を"attention"や"notice"や"alert"や"caution"といった見た目優先でないものにする
画像の代わりとなるテキストの内容を考える際注意すべきこと
代替テキストの内容はその画像の種類に応じて変わる
代替テキストの内容は前後の文脈に合わせたものにする
文書の構成要素である画像と背景である画像の違いを認識する
内容として意味や機能のある画像
⇒単純にテキストを画像化したものは、内容としては元のテキストとまったく同じということ
⇒画像化されてるテキストそのままのテキストを代替テキストにする
リンクされて無い画像 ⇒ その画像の内容としての意味を元に代替テキストを用意
リンクになっている画像 ⇒ さらにその行き先や機能をも示すような代替テキストを用意する
代替テキストの内容はそれ単体で考えるのではなくその前後関係も考慮して考える
前後の文脈とつじつま意味が通じるか？
必要に応じて代替テキストの中に句読点や区切りスペースなどを入れる。
要素内容である画像と背景を区別する
Xhtml側には要素内容としてコンテンツを入れその表示方法はCSSで指定するのが制作方法です。
要素内容である画像はXhtml側に入れ、背景画像についてはCSSで指定する。
・文字色と背景色はセットで指定するのが基本
（単純にそれらの指定を常にペアにして書くようにする）
背景画像を指定するときにはそれが表示されない状況でも文字を読むことが可能となるような「背景色」も同時に指定しておく
・文字色と背景色には十分なコントラストをとる
・文字サイズは必要に応じて変更できる様にしておく
キーワード又は相対的な単位を使う
* Firefoxで確認後、IE6,IE7について確認という確認手順を徹底する。
* htmlタグの閉じ忘れがないか確認する（HTML Validator）。
* Firebugを利用する。
* ブラウザのバグなどによる表示崩れについては、CSSハックやjavascriptライブラリを利用して個別に対応する。
display: block; /*その要素をブロックボックスとして生成する*/
display: inline; /*その要素をインラインボックスとして生成する*/
display: none; /*その要素のボックスを生成せず、子孫要素についてもボックスを生成しない。非表示となる*/
*ナビゲーション：a要素（インライン要素）に対してdisplay:block;を適用する。
*タグクラウド：li要素（ブロックレベル要素）に対してdisplay:inline;を適用する。
* display: none; を適用した要素・子孫要素は、音声ブラウザで読み上げの対象にならない。
■floatでレイアウトしたときのボックスの間に隙間が出来る
→隙間が出来るボックス要素全てに float 要素を追加
■ ＜div＞内に配置した＜img＞が＜div＞よりサイズが小さいと隙間が出来る
→ 下記を追加
img { display: block; }
■ ＜div＞に背景を設定しても設定が反映されない（Firefox）
→ その下の＜div＞に背景が設定してある場合反映されないことがある
■ Win IEだけずれる時があり、ずれる大きさがフォントサイズによって変わる
→ずれる＜div＞等に vertical-align を設定する（top 又は bottom）
■ ＜td＞内のフォントが正しく指定したとおりでない（Win IE Mac IE）
→＜td＞の中に＜span＞をいれて対応する
■MacIEで＜div＞を floatさせると表示が崩れる。
→ フロートさせるdiv の width height 属性を指定する
■＜ul＞＜li＞で画像リンクを作成したときに WinIEでフォントサイズを変更すると
隙間が出来てしまう
→ overflow:hidden;
font-size:1px; を追加
line-height プロパティ値をチェック
■ background-imageで指定した画像が表示されない
外部CSSに記述している場合、そのCSSファイルからの相対パスで表記する必要があるので調べる
■ Windows版 IE 6 で 高さ 1px の div が作成できない。（10pxくらいのdivになってしまう）
→height:1px; overflow:hidden;
と記述します。
■ Windows版 IE 6 で float 時の margin が 2倍に解釈されてしまう。
→display: inline; を加える
（CSS2 の仕様では「float を指定した要素は display の指定を無視する」のでほかのブラウザでもOKです）
th,td{
white-space: nowrap;
}
■通常は段落一文字目を1角分字下げ
インデント:負の値で一行目を左へ突き出す。
※商品
ます。
p{
text-indent: -1em;
}
■画像に続いて文字を表示させた時 縦方向のそろえ位置を調整したい場合は
vertical-align
で揃えの基準を指定する。
img{
vertical-align: middle;
margin-right: 5px;
}
英語の表記：すべて大文字や小文字に書き換えず
一般的な状態にしておいて表示のさせ方はCSSで設定する。
■欧文小文字を大文字にする
text-transform:uppercase;
全てを大文字にする
頭文字だけを大文字にする
text-transform: capitalize
font-variant: small-caps;
■見出しテキストの加工<span class="msub">〜span要素を使った装飾〜</span>
.msub{
font-size: 0.8em;
font-weight: normal;
color: #000000;
vertical-align: bottom;
}
検索エンジンに評価されるためには、300字程度のテキスト量がほしいです。
また、文中におけるキーワードの密度は、3〜5%が理想とされています
WinIE 5.0、5.5、6 （1） WinIE5では、widthの合計値にpaddingやborderを含む 標準モードと互換モードの違いです widthとpadding/borderは同時に指定しないように気をつけましょう （2） floatさせたボックスに左右marginを指定すると、指定値の2倍程度のmarginが設置される display:inlineを指定すると正常に表示されることがあります （3） WinIE5ではブロック要素の左右marginをautoにしてもセンタリングされない IEではブロック要素をtext-align:centerでセンタリングできるバグが存在するので、親要素にtext-align:centerを指定しましょう。 その際に、子要素でtext-align:leftを指定し、内容物を左寄せに戻してください （4） 子要素のコンテンツの容量がoverflow:visible（初期値）のボックスサイズを超えるとき、ボックスサイズが伸長してしまう 伸長するボックスを基準にコーディングすることのないように気をつけましょう IE7ではこのバグは修正されています （5） WinIE5では画像に指定するpaddingは無視される 画像に余白を指定する場合は、marginを利用してみましょう （5.1） リンクの語尾が改行して繰り返し表示される HTMLソース内のコメントの位置に問題がある可能性が高いので、コメントをDIV内に移動してみましょう MacIE 5.1〜 （1） clearを指定した要素の子要素でclearを指定した方向のfloatが効かない 孫要素では問題ありません （2） floatした要素の中身が匿名インラインボックスの場合、text-align:centerが効かない <span>などを挿入すると問題が解消しますが、空タグを利用するのはあまりお勧めできません （3） text-alignを指定した要素内のリンクの文字列とクリッカブルエリアがずれる text-alignを指定せず、中の要素をfloat:rightすることで同様の効果が得られますが、親要素にfloatなどの別属性を指定しなければならない場合があるため、注意が必要です Firefox1.0〜、Safari1.2〜、Netscape7 （1） 要素をfloatで右寄せ・左寄せすると親要素のbackground/borderの高さがなくなる 親要素にもfloatを入れることにより高さを保つことができます 親要素float時、widthを指定しないとbackground/borderの適応領域がコンテンツ部分のみになるので注意してください （2） 画像にリンクを指定する際にaタグの下線をnoneにしないと画像に下線が表示される aタグのunderlineをnoneにすることで、この問題を回避することができます （3） テーブルやfloatされたブロック要素に幅を指定しないとコンテンツの最小幅以下の幅になる場合がある（safari） 幅を指定しましょう
Internet Explorer7（おまけ） （1） 子要素のサイズに従って伸長するボックスモデルバグが修正されました IE7でボックスからコンテンツがはみ出ている場合は、コンテンツに適切な幅を指定しましょう （2） いくつかのCSSフィルターが効かなくなりました 以下のCSSフィルターを利用している場合は、取り除くか、別のものに置き換えましょう 背景やボーダー付ボックスの幅が外枠ボックスの幅に至らない場合 背景やボーダー付の要素やその子要素にwidthを指定してみましょう これはsafariによく見られる症状です。内部にfloatを利用した要素が含まれている場合、 外枠ボックスの幅が内部コンテンツの最小幅になってしまうことがあります。 widthを指定することにより改善しますが、paddingやボーダー指定もある場合は、widthの指定箇所に注意してください。 段組の際、float:rightで表示に不具合が生じている場合 float:leftにしてみましょう 左ボックスの幅指定がちゃんとされている場合、右寄せされた右ボックスを左寄せにしても通常問題なく表示されます。 float:right時のIEバグ対応が面倒な場合、float:leftにしてみてください。 marginなどの余白が指定した値以上に反映されている場合 display:inlineを指定してみましょう コンテンツ幅が親要素の幅いっぱいでない場合、display:inlineを指定することによってレイアウトが崩れる場合があるので注意しましょう テキストの語尾が重複している場合 コメントの挿入位置を変えてみましょう これは主にIEに見られる症状です。多くの場合、フロートされたボックス間にコメントなどが挿入されていると、 ボックス内のテキストの語尾部分が、重複表示されてしまします。コメントをボックス内に挿入するなど、工夫してみてください。 テキストの上部が切れてしまう場合 line-heightの指定方法に問題がないか確認してみましょう line-heightが%指定になっている場合、テキストの上部分が切れることがあります。指定を変更してみてください。 ********************************************************** Webアクセシビリティとは？．．． webを利用して情報を得ることが出来操作も可能であることは．．． 特別は配慮ではなくweb標準の基本的な制作技術のひとつであることを．．． 確保することで情報を伝えられる対象が大きく広がる webを利用することが出来る ３つの意味 １.情報自体を得ることが出来 ２.得た情報の内容が正しく理解でき ３.必要な操作を行うためのユーザーインターフェースも利用可能である 情報を正しく伝えることの出来る対象を限定されたものから無限大へと一気に広げる 高いアクセサビリティを確保するには？ 普通のテキストで単語の途中でスペースをあけたり改行で整形しない 音声環境ではすぐに本文が聴けるようにする リンクの言葉はリンク先の内容が予測できるものにする XHTMLのテキストの中に表示方法を埋め込んでいる ⇒根本的な間違い 表示方法はCSSで指定するというWEB標準の原則に従ってください。 各要素を適切な順序で並べる XHTMLでのコンテンツの順序に配慮してメインコンテンツがサイドバーよりも前にする。 またはメインコンテンツまでジャンプ出来るようなページ内リンクを用意する機能をつける。