HTML/CSSアーカイブ

選択したテキスト(要素)の装飾を変えるには「::selection」という疑似要素をCSSで指定します。


::selection {
background:***;
color:***;
}

これはCSS3をサポートしたブラウザに適用です。
Firefoxの場合は::-moz-selectionという独自拡張CSSが使えます。


::-moz-selection{
background:***;
color:***;
}

| コメント(0) | トラックバック(0) |  

flashを背景にするためのCSSテクニックの一つ。


<div id="fla_css">
ここにswfファイルを配置
<div id="html-layer">
ここにコンテンツを配置
</div>
</div>

HTML上は上記の通り。

CSSは以下の通りです。

div#fla_css {
position:relative;
}

div#fla_css div#html-layer {
display:block;
position:absolute;
top:0px;
left:0px;
background:none;
}

マージンとか上記ソースの通りでなくても問題ありません。

| コメント(0) | トラックバック(0) |  

普通ほとんど気にしないでもクリアできているからいいのだけど、Strictで宣言したら、bodyの直下はブロック要素でなくてはならない。

つまり

<body>
たとえばこんなのは駄目。
</body>

ということ。

ようは


<body>
<p>たとえばこうすれば良い。</p>
</body>

メモ。

※ちょっと書き足りていないこととかあったりすので、調べ中。。。

| コメント(0) | トラックバック(0) |  

line-heightを適切に指定することでブラウザ上での可読性に大きく貢献することは言うまでもなく。

おおざっぱですが、おおよそ1.2〜1.8程度に指定されていることが多いと思います。

ただ、このline-heightを単位指定するかしないかで問題発生の有無がわかれる事象があります。

以下例です。

p要素のline-heoghtをそれぞれ 1.4em、1.4 とし、
文中にp要素(親要素)の子要素としてem(font-size;200%)を用いています。
p要素のフォントサイズは16px

| コメント(0) | トラックバック(0) |  

がーっと作業していて、つまずいた理由が以下。



ID名に使用可能な文字種は半角アルファベット(a-z|A-Z)、半角数字(0-9)、ハイフン(-)、アンダースコア(_)、コロン(:)、ピリオド(.)のみに制限されています。


class属性には指定できた日本語の平仮名やカタカナ、様々な記号などは使えません。


さらに ID名の書き出しは、半角アルファベットから始めなければならず、XML の仕様において "xml"(xMl, XML, Xml のように大文字・小文字で書くこともできない) からはじまる値は許されません。


(引用元:http://w3g.jp/xhtml/dic/id

id属性に数字始まりは使えない...ヒトに聞いてこりゃ赤っ恥だなと思いました。
ある意味気づかなかった自分にあっぱれ。


正常に動作するものとバグのあるものとの比較に関してここ数年でアンテナが鋭くなったと思っていたけど、まだまだだなと痛感。


でもどんなにアンテナ鋭くしてもどんなに頑張ってもやはり、共同作業が必要だ。

ヒトは盲目なり。

| コメント(0) | トラックバック(0) |  

Internet Explorerの独自拡張なので、個人的には過去に使ったことがないが、zoomプロパティという要素を拡大して表示することができるプロパティがある。


これをolリストにおいて


li{
zoom : 1;
}

のような指定をすると本来順序リストであるolだと1 2 3...とリストに番号が振られるが、これがすべて1になってしまう。


余談ですが、ulとolはきちんと使い分けること。

ul は順不同リスト
ol は順序リスト

| コメント(0) | トラックバック(0) |  

posisionプロパティで個人的に忘れがちな点。


親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置。


body直下をcontainerとかにしてcontainerが中央表示の場合、注意。

| コメント(0) | トラックバック(0) |  

メモ。

CSSハックIE6以下のみ適用

1.スターハック・・・セレクタの前に「* html 」をつける(半角があります!)
* html #hacks { margin-top: 0px; }

2.アンダースコアハック・・・プロパティの前に「_」をつける
#hacks { _margin-top: 0px; }

IE7のみ適用

*:first-child+html #hacks { margin-top: 0px; }

#hacksの後に記載すること。

| コメント(0) | トラックバック(0) |  
Powered by Movable Type 4.261