cssの最近のブログ記事

woff形式のwebフォントを使うとき。こんなかんじ。
(windows7では絵文字フォント当てないとデフォルトだと文字が足りなかった)
 
@font-face {
font-family: "EmojiFontName";
src: url('EmojiFontName-Regular.woff') format('woff');

}
p.emoji {
font-family: "EmojiFontName";
}

ひとつのタグに複数のクラスをかけたい時は、スペースで区切ったらOK
<p class="id1 selected">テキスト</p>



CSSで二つのクラスがかかってるものに指定をしたいときは
p.id1.selected {}
って感じで、連続して書いたらOK。

仕事でHTML納品→先方アプリ化(PhoneGapかな?)案件で、はまったのでメモ。
ブラウザ確認と違って、アプリに同梱される?使われる?エンジンじゃないと再現しない事項って、困るよね......。

■選択状態?が消えるようにする
body{
-webkit-user-select: none;
}

■クリックした時のAndroidの水色枠が消えるようにする
a{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}


あと、アニメーション関係で、リンクをクリックしたら、ボタンを動かしてからジャンプ、のときにアニメーションのための待ち時間がちょっと欲しいとき、JavaScriptでのsetTimeoutで待ち時間を作ろうとしたら変になるので、待ち時間はCSSで。
感覚的にJSの処理がCSSと比較して随分反応悪い感じ?

div.main{
background:url(img/bg_page.png);
}

* html div.main{
behavior: expression(
this.style.behavior || (
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,
src='"+this.currentStyle.getAttribute("backgroundImage").slice(5,-2)+"')",
this.style.backgroundImage = "none",
this.style.behavior = "none"
)
);
}

ノーリピートの時
div.main{
background:url(img/bg_page.png) repeat-y;
}

* html div.main{
behavior: expression(
this.style.behavior || (
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,
src='"+this.currentStyle.getAttribute("backgroundImage").slice(5,-2)+"')",
this.style.backgroundImage = "none",
this.style.behavior = "none"
)
);
}

作成したcssのうち、Contributeで選択できないようなcssを作りたい時は以下の様にクラス名の前に「.mmhide_」をつける。
「_」の入ったクラス名は、NN4で反映されないけれど、今は気にしなくて良いと思う。


.mmhide_navi{

}

windows IEにてCSS内のCSS読み込みができない現象発見。

@import url(../basic.css);
は読み込み可能

@import url(../basic.css) all;
は読み込みできなかった。

#menuに背景を設定したが、サイズが50px以上無いと背景が切れてしまう場合。

最小値を50とする。
#menu {
min-height: 50px;
}

最小値が効かないWin IEでheightを指定。
IEのheightの挙動は最小値と同じで、内容が増えると、heightを無視し高さが替わる。

* html #menu{
height: 50px;
}

★縦リストでメニューのリストに画像を使ったとき画像間隔が空く場合(NN7、FFで確認)
#menu li img {vertical-align: bottom;}
の指定を入れる。

★横リストでリスト間隔が空く場合
<li>***</li><li>***</li>
のように、ソースコードに改行を入れずに記述する。

ボックス内の画像にfloatを指定した時、文章が短いと画像がボックスからはみ出てしまう。
その対処方法。一般的にclearfixといわれるもの。
zoomの箇所はIE7への対応。

.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
display:inline-table;
zoom:1;
}
/*macIE\*/
*html .clearfix{height:1%;}
.clearfix{display:block;}
/*macIE*/

★Mac IE5のみに有効
*>html #menu{}

★Mac IE5以外に有効
/*MacIE5\*/
ここがMAcIE5に無視される
/*MacIE5*/

★Win&MacIE4~6に有効
* html #menu{}

★Win IE以外に有効
html>body #menu{}

★Win IE5.5以前のみに有効
#menu{
IE5.5以前に対する指定
voice-family:"\"}\"";
voice-family:inherit;
その他に対する指定}