アイコンをHTMLに組み込むのではなくＣＳＳで指定する
<p>CSSとは、Cascading Style Sheetの略で、HTML要素の装飾の指定の仕様であり、<a href="www.w3.org" target="_black">W3C<a>による韓国の一つです。<br /> プロパティ一覧は<a href=".pdf" class="pdf" target="_blank">css_property_list.pdf</a>をご覧下さい。</p>
p{
line-height:1.8em;
}
a{
text-decoration: none;
}
a:hover,a:active{
text-decoration:underline;
}
a.blank{
background:url(icon_blank.gif) no-repeat 100% 2px;
padding-right: 14px;
}
a.pdf{
height: 20px;
background:url(icon_pdf.gif) no-repeat 2px 0px;
padding: 3px 0px 3px 22px;
color:#f02739;
}
<p>文章中に<a class="newWindow" href="" target="_blank">別のサイトへのリンク<span> (新しいウィンドーで開く)</span></a>がある場合や、リストでのリンクの時などに使います。</p>
アイコン画像は高さがフォントサイズを超える場合、表示分の高さをスペースを確保しなければ画像が途切れてしまう。そのときはアイコン画像の表示分の高さをpaddingプロパティで指定して確保する。
a.newWindow span{
posision: absolute;
text-indent:-9999px;
}
a.newWindow{
background:url(icon_blank.gif) no-repeat right 0;
padding:0 25px 0 0;
}
a.newWindow:hover{
color:#c00;
background:url(icon_blank.gif) no-repeat right -20px;
}
a{
display:block;
background-image: url{button,gif);
background-repeat: no-repeat;
background-position: top left;
}
a:hover{
background-position: top right;
}
display;inline;を指定しよう
floatプロパティで指定した値と同じ方向にmarginプロパティを指定すると、フロートボックスの左右マージンがInternetExplorer(IE)6で指定した値の2倍になってしまうバグがある。回避策として「display;inline;」を記述すれば解決できる。
この指定におけるIE6以外の問題は特に発生しないため、バグに遭遇してしまった場合の解決策として有効だ。また、デザインによっては不可能な場合もあるが、別の方法としてmarginプロパティを使わずにpaddingプロパティを指定することでも解決できる。
#main{
float:;eft;
width:470px;
margin-left:10px;
display:inline;/*IE6対策*/
}
#sub{
float:left;
width:260px;
margin-left:10px;
}
widthプロパティを明示して解決する
テキストの左右どちらかにfloatプロパティで画像を回り込ませ、後続する要素の回り込みを解除したい場合、clearプロパティを使う
だが、IE6およびIE7では不自然な上パディングが開いてしまう。そこでclearプロパティを指定した要素のwidthプロパティの値を「auto」以外で指定しよう。
.textArea img{
float:right;
margin:0 0 10px 20px
}
blockquote{
clear:both;
width:560px;
margin: 20px 0;
padding: 13px 18px 0;
background:#f6f6e3 url(img/bg.gif) repeat-y;
}
text-alignプロパティを指定する
ブロックレベル要素をセンタリングする場合、通常はmarginプロパティの左右に「auto」を指定するが、IE5.5以前とIE6の過去互換モードに対応しない。この場合ブロックレベル要素の親要素に「text-align:center;」を指定すると内包ブロックがセンタリングされる。
ただし、スタイルの継承により要素の内容までセンタリングしてしまうのでセンタリングした要素に「text-align:left;」「text-align:justify;」を指定します。text-alignプロパティでブロックレベル要素がセンタリングするのはIEのバグであり正しい指定ではない。
div.example{
margin:0 auto;
width:80%;
}
通常ブロックレベル要素をセンタリングするにはmarginプロパティの左右にautoを指定する
body{
text-align:center;
}
div.example{
margin:0 auto;
width:80%;
text-align:left;
}
IEの旧バージョンおよび過去互換モードにも対応させるにはtext-alignプロパティを追加する。
コメントの位置を変更しよう
終了位置などを分かりやすくする為に(X)HTMLソースにコメントを記述しておくケースは非常に多い。
だがIE6 IE7ではコメントを入れる位置によってフロートボックスの位置がずれてしまうバグがある。これはフロート指定がある要素の前にコメントを置いた場合に発生する。これを回避するには問題になっている箇所のコメント自体を削除するかコメントは要素内に記述する必要がある。コメントによる位置ズレはIE6とIE7とではずれ方が異なるのでチェックする際には注意しよう
#main{
float:left;
width:480px;
background:#fff;
}
#main .item{
float:left;
(省略)
}
CSSに特別な指定はせず、floatプロパティで並べている。(X)HTMLにコメントがなければきちんとボックスが揃う。
<div id="main"> <h2>メインエリア</h2> <div class="item"> <p>text</p> </div><--!コメント--> <div class="item">(省略)
IE7で見た場合、フロート指定がある要素の前にコメントを置くと余白が一部埋ってしまう
overflowプロパティで防ぐ
floatプロパティを使ったマルチカラムレイアウトは、意図したとおりに各カラムが配列せず、一部が下に落ちてしまう「カラム落ち」の問題がある。たとえばIE6では、横並びの各カラムにその横幅を超えるサイズの画像を入れると、それに合わせてカラムの横幅が広がり、カラム落ちが発生してしまう、この場合各カラムに「overflow:hidden」を指定するとカラムの横幅より大きな部分は表示せず､自動的に横幅が広がる事もない。
また、IE5.5以前及びIE6の過去互換ではwidthプロパティの解釈にも注意しよう。ボックスモデルの正しい解釈はwidthプロパティに指定した値がコンテント領域の横幅となり、これにパティング、ボーダーの値を足したものが要素の横幅となる。しかし、過去互換モードではwidthの値にパディング、ボーダーを含み、本来より小さく横幅が計算される為IEにあわせてマルチカラムを組と他のブラウザでカラム落ちが発生してしまう。この場合フロートさせる各要素にはパディング、ボーダーを一切指定せずにレイアウトを行いその内包要素にはパディング、ボーダーを調整するなど工夫が必要だ。
positionプロパティで組み込む
<div id="main"> <h2><img src="h2_new.gif" alt="最新記事" width="110" height="27" /></h2> <p class="rssBtn"> <a href="index.html"><img src="btn_Rss.gif" alt="最新記事RSSフィード" width="148" height="26" /></a> </p> </div>
#main{
width: 630px;
}
#main p.rssBtn{
position:relative;
width: 610px;
height: 0;
margin: 0;
padding:0;
}
#main p.rssBtn img{
vertical-align:bottom;
}
#main p.rssBtn a{
position:absolute;
top:-27px;
right:0;
}
相殺される際の基本的な規則
相殺後に適用されるマージンの値の計算方法
リンク擬似クラス：
a{
text-decoration: underline;
}
a:link{
color:#ff0000;
}
a:visited{
color:#000066;
}
a:hover{
color:#ff6600;
}
a:active{
color: #cc0000;
}
ダイナミック擬似クラス
擬似要素の記述例
div#main h2:before{
content: "■";
}
h2要素の前に「■」が付与され、結果的に「■h2の内容」と表示される。
ー特定の要素の最初の1文字目にスタイルを適用する。
ー特定の要素の最初の1行目にスタイルを適用する。
ー特定の要素の前に自動的にコンテンツを追加する。「content」プロパティを利用する
ー特定の要素の後に自動的にコンテンツを追加する。「content」プロパティを利用する
floatプロパティの活用
#header ul{
background-image: url(image/bg-nav.jpg);
background-repeat:repeat-x;
width:800px;
margin: 0;
paddin:0;
list-style-type:none;
text-align:center;
height:35px;
}
#header li,
#header a{
float: left;
}
#header a{
display:block;
border-right:1px solid #ffffff;
border-left: 1px solid #bbbbbb;
height:30px;
}
display:inlineを使う
#footer ul{
margin: 0px 0px 1em;
padding: 0;
list-style: none;
}
#footer li{
display:inline;
padding-right: 1em;
padding-left: 1em;
}
a要素の擬似クラスを活用して背景を入れ替える
#navigation ul{
margin-left:0px;
padding-left: 0px;
list-style-type:none;
font-size: 1em;
}
#navigation #main-navi li{
background: #fde9bd;
margin: 0 0 1px 0;
}
#navigation #main-navi li a{
display:block;
padding: 1em 10px;
text-decoration:none;
}
#navigation #main-navi li a:hover{
background-color: #fed973
}
背景の切り替えテクニック
#localNavi a{
display: block;
color: #000000;
font-size:12px;
min-height:12px;
_height: 12px;
margin-bottom: 1px;
padding: 9px;
text-decoration:none;
background:url(images/bg-nav.jpg)no-repeat;
}
#localNavi a:hover{
background:url(image/bg-now_bg-nav.jpg)no-repeat;
}
#localNavi a{
display: block;
color: #000000;
font-size:12px;
min-height:12px;
_height: 12px;
margin-bottom: 1px;
padding: 9px;
text-decoration:none;
background:url(images/bg-nav.jpg)no-repeat;
background-position: left top;
}
#localNavi a:hover{
background-position: left bottom;
}