WEB + PC
‘CSS’タグの記事
2008/10/15(水)
opacity / filter : alpha »
a:hover img {
opacity: 0.7;
filter: alpha(opacity=70);
}
カテゴリー: Reference, Web Design | タグ: CSS
Tail-Lagoon @ 10:26
|
PageUp
2008/08/25(月)
毎回忘れる Win IE7 用の CSS Hack »
↓毎回忘れる Win IE7 用の CSS Hack
*:first-child+html #Example {
/* for WinIE7 */
margin-top: -1px;
}
↓今のところは忘れていない Win IE6 用の CSS Hack
*html #Example {
/* for WinIE6 \*/
margin-top: -1px;
/**/
}
↓あと、このエントリーで使うことになったバックスラッシュのエンティティ
\ ← Backslash Entity
カテゴリー: Reference, ブラウザ | タグ: CSS
Tail-Lagoon @ 16:39
|
PageUp
2008/06/13(金)
WordPressのある特定の投稿に、固有のCSSを適用したい »
（カスタムフィールドの利用）
WordPressで記事を書いていて、その記事投稿の一部分にのみ独自のCSSを適用したい、という要求がしばしば発生する。その場合の対処は、
- 独自のidもしくはclassを割当て、style.css等の共用CSSファイルにその部分を記述する。
- 適用したいタグの中に直接 style="…" とアトリビュートとして記述する。
- 投稿部分に <style> タグを記述する。
- JavaScript を用いるなどして、強引にスタイルを変更する。
- WordPressのカスタムフィールド欄にCSS文を記述し、テンプレートファイルでカスタムフィールドを <head> 内の任意の場所に出力できるように修正する。
といった方法が考えられる。しかし……
カテゴリー: CMS, Sample | タグ: CSS, WordPress
Tail-Lagoon @ 17:56
|
PageUp
2008/03/06(木)
WEBサイト制作時のフォントサイズの指定について »
WEBサイト制作において、フォントサイズはピクセルで指定するのが最もわかりやすい。
作る際にピクセルでフォントサイズを指定し、あとは勝手にユーザ側で大きくするなり小さくするなりすればいいと思う。しかし Windows IE はピクセル指定されたフォントは表示を固定してしまい、ユーザ側で大きさを変更できない（この問題は IE7 になってもまだ残されたままだ）。
そこで、作る側としては、とりあえずピクセル指定した後、IE用のCSSハックを用いて相対指定するという若干面倒な作業をしてきたわけだが、その際に使用するCSSハックはアンダースコア・ハックが一番手軽だった。ところが IE7 ではこのアンダースコア・ハックは無視するようになってしまったのだ（互換モードのときは使えるらしいが）。なんてこった。
だから今後はもういっそのこと、フォントサイズはすべて相対指定にして、いちいちブラウザを区別するのはやめてしまおうと思っている。
その際、最初に CSS で * { font-size: 100%; } としてすべての要素をデフォルト（ユーザが環境設定を変更していなければ通常は 16px だ）にしてしまい、あとはそこからの相対パーセンテージで指定するのがおそらくもっとも簡単な方法だという気がする。
ただ、相対指定は親要素の値を引き継ぐから、親が 80% サイズのとき、子を 75% とすると、元のサイズからは 60% になってしまうため若干注意が必要だ（だからピクセル指定のほうが便利なのに、MSのバカヤロー）。しかしそれさえクリアすれば後は下記のサイズ指定ですむはずだ。
文字サイズ 16px = 100% とした場合のパーセンテージ計算値
| px | 32 | 28 | 26 | 24 | 22 | 20 | 18 | 16 | 14 | 13 | 12 | 11 | 10 | 9 | 8 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| % | 200 | 175 | 162.5 | 150 | 137.5 | 125 | 112.5 | 100 | 87.5 | 81.25 | 75 | 68.75 | 62.5 | 56.25 | 50 |
カテゴリー: Web Design | タグ: CSS
Tail-Lagoon @ 12:26
|
PageUp