マークアップセンター https://ameblo.jp/oeda-center/ マークアップ初心者の為のHTML、CSSまとめブログ ja セルボーダーの表示形式について
適用要素：table要素


①border-collapse:collapse
テーブル全体の周りのボーダーや各セルのボーダーを、
その境界線上に重ねて表示。（初期値）

②border-collapse:separate
テーブル全体の周りのボーダーと各セルのボーダーを別々に表示。

参考URL：http://www.htmq.com/style/border-collapse.shtml

border-collapseプロパティの値がseparateのときのみ
有効になるのがborder-spacingです。

しかし、border-spacingはIEでは使用できず、
その場合、table要素にcellspacingを記述することで
セル同士の間隔を指定することができます。

参考URL：http://www.tagindex.com/html_tag/table/table_cellspacing.html


【まとめ】
table要素3つのポイント
(1)border-collapse:separateとborder-spacingはセットで使用
↓
↓　･･･(2)しかしIEでは使用できないので
↓
(3)table要素にcellspacingを記述
]]> https://ameblo.jp/oeda-center/entry-10222040399.html Wed, 11 Mar 2009 00:26:26 +0900 メモ ①floatをするとmarginが2倍（同じ方向にfloatかつIE6の場合）
【解決方法】
(1)marginではなく、paddingを使う
(2)display:inlineにする

②img　隙間や広さが出た場合（IE）
【解決方法】
(1)font-size:0やline-height:0など低い値を指定する
(2)imgのdivに対してoverflow:hidden　＋　height　
(3)vertical:alignで調整

③floatをしたとき
【必ずすること】
(1)widthを指定する
(2)clear:fixもしくはclear:both

④その他使えるもの
(1)outoline:none
=Firefoxでaクリックすると表示される点線を消す方法

#btn a {
display:block;
width:45px;
height:100px;
background:url(img/btn.gif) no-repeat left top; 
outostyle:none;
}


(2)white-space:nowrap
=ソース中の連続する半角スペース・タブ・改行を、1つの半角スペースとして表示

(3)cursor:pointer
=リンクカーソル

⑤メモ
・マイナスmarginは使わない
・backgroundがおかしい場合はwidthで調整してみる
・dd,dt,li,tdは改行して記述しない

]]> https://ameblo.jp/oeda-center/entry-10219537631.html Fri, 06 Mar 2009 20:00:35 +0900 【びっくりハック】例外のIE6 CSSの優先順位の記事で
「!important」は最強だと書きました。


これには例外があります。

【!importantの例外】

IE6では、!importantと記述していても、
同じセレクタ内であれば後のものの方が優先される。




#test {
color: red !important;
color: blue;
}




上のソースは、IE6以外のブラウザでは
CSSの優先順位はセレクタの獲得ポイントで決まるので、
ポイントの高い「!important」が効き、redになるのですが
IE6では後に記述されているblueになります。


※「びっくりハック」とは、勝手につけた名称です。 ]]> https://ameblo.jp/oeda-center/entry-10218767483.html Thu, 05 Mar 2009 11:51:08 +0900 【アンダースコアハック】IEで便利 記述は、プロパティの前に「_」を記述するだけです。



.test {
color : green/*その他ブラウザ用*/
_color : blue;/*IE用*/
}




上のソースは、
IE6では、青で記述されます。


ただし、アンダースコアハックは2点注意。
①W3C CSS Validatorでエラーになる
②プロパティの順番が前後してしまうとハックが適用されない
※こういうことです。↓



.test {
_color : blue;/*IE用*/
color : green/*その他ブラウザ用*/
}




これは、後に書かれているcolor : greenが効いて、
IEでもgreenで表示されます。


【参考URL】http://css-happylife.com/log/css-hack/000022.shtml


]]> https://ameblo.jp/oeda-center/entry-10218445462.html Wed, 04 Mar 2009 19:21:34 +0900 【CSSの優先順位】 後に書いたものが優先されます。

#contents {
background-color: red;
background-color: blue;
}

の場合、後に記述しているblueが優先されます。


では、

<div id="test">
<ul class="test02">
<li><p>ここの色は？</p></li>
</ul>
</div>

#test {color:red;}
.test02 {color:blue;}
p {color:green;}


「ここの色は？」は、何色になるでしょうか。




正解は、赤です。



初心者の私としては、一見、
<p>に指定しているgreenがきくのかな。。と思ったりしたりして・・。



しかし、正解はidに指定しているredがききます。
（#test {color:red;} ）


これは、
CSSの優先順位はセレクタの獲得ポイントで決まる
というルールがあるからです。



これは、とてもわかりやすいサイトがあるので
ぜひご参照ください。
【参考URL】http://www.stylish-style.com/csstec/base/order.html


ちなみに、

#test {color:red;}
.test01 {color:blue;}
p {color:green !important;}

とした場合、!importantが記述されたgreenがききます。
!importantは最強なのです。


※HTMLに直書きした場合、もっと強くなります。
<div style="～～">

]]> https://ameblo.jp/oeda-center/entry-10217890152.html Tue, 03 Mar 2009 21:13:28 +0900 【background指定】省略した場合 【background指定を省略した場合】

今日は、こちらのページの背景色、背景画像の
CSSの指定方法の違いについてです。

http://ocans.web.fc2.com/oeda01/sample.html




①のCSS


#contentsArea{
height:100px;
background: #fe9dcf url(../img/test.gif) no-repeat 10px 10px;
}/*指定色はピンクです*/




②のCSS

#contentsArea02{
height:100px;
margin: 20px 0;
background: #fe9dcf url(../img/test.gif) no-repeat 10px 10px;
}/*指定色はピンクです*/

#contentsArea02{
height:100px;
margin: 20px 0;
background: #f9cd45;
}/*指定色は黄色です*/




③のCSS


#contentsArea03{
height:100px;
background: #fe9dcf url(../img/test.gif) no-repeat 10px 10px;
}/*指定色はピンクです*/

#contentsArea03{
height:100px;
background-color: #f9cd45;
}/*指定色は黄色です*/




違いがおわかりになりますでしょうか。

①では通常通りに背景画像（緑の音符）、背景色（ピンク）を指定しています。

②では後に書いたbackgroundのcolorを省略して書いています。
これにより、backgroundがデフォルト値化され、背景画像（緑の音符）まで消えてしまいました。

【つまり】backgroundで"-color"を省略した場合、値はデフォルト値で上書きされる！ということが起こります。

ちなみに③では、省略せずにbackground-colorと書いているため、
後にかいた背景色、緑がきいています。
（これは、CSSの優先順位です)


CSSの優先順位については、次回の記事で。sei

]]> https://ameblo.jp/oeda-center/entry-10217834973.html Tue, 03 Mar 2009 19:40:28 +0900 【HTML宣言文】ちょっとした落とし穴 HTML4.01では、下記の3種類のDTDが用意されています。

■HTML 4.01　Strict
　（デザイン性よりも正確な構文に厳格なタイプ）


■HTML 4.01　Transitional
　（デザイン性なども考慮した互換性タイプ）　


■HTML 4.01 Frameset
　（フレームを使用したページの最終バージョンタイプ）
　※フレームページは今後廃止の方向へと向かうと思われます
　※（これ以降のバージョンにはフレームの宣言文が含まれていませんしW3Cも廃止を推奨しています）


【バグの発動】
文書の先頭のDOCTYPE宣言の記述で
1行でも改行がある場合、何か記述されている場合、IE6でバグが発動します。
⇒IE5.5になる現象


参考記事：http://web2express.cool.ne.jp/works/tag/html11.html


【バグの原因】
XHTMLでは、文書のはじめにXML宣言を記述します。
しかし、IE6ではHML宣言が記述されている場合、
レンダリングモードは「標準準拠モード」ではなく「過去互換モード」が採用されるためこのバグが発動されます。
（つまり、これがIE5.5になる現象）


]]> https://ameblo.jp/oeda-center/entry-10217337079.html Mon, 02 Mar 2009 21:26:45 +0900 【CSSセレクタ】　CSSのセレクタを使うときに注意すべきポイント 【避けるべきバグの起こるソース】

１、Idセレクタとclassセレクタのand書き

#idName.className{
}



２、classセレクタとclassセレクタのand書き

.className1.className2{
}





備考：ちなみにid名などは数字で始めてはいけません





【バグの発動条件と内容】


１、Idセレクタとclassセレクタのand

バグ：Idセレクタとclassセレクタのandをなんども使うと最初だけ有効になる
ブラウザ：IE6


#idName.className1{ 
ここだけしか有効にならない
}
#idName.className2{
}
#idName.className3{
}



参考になるサイト：http://css-el.seesaa.net/article/108157845.html
参考になるサイトデモページ： http://www.css-el.com/example/ie_bug_01/index.html








２、classセレクタとclassセレクタのand書き

バグ：classセレクタとclassセレクタのand書きをなんども使うと最後だけ有効になる
ブラウザ：IE6


.className.className1{ 
}
.className.className2{
}
.className.className3{
ここだけしか有効にならない
}



参考になるサイト：http://www.hamashun.com/blog/2007/05/classie.html













]]> https://ameblo.jp/oeda-center/entry-10217189070.html Mon, 02 Mar 2009 16:57:22 +0900