DN*BLOG » CSS

IEのCSS適用前のスタイル一覧

kazu — Tue, 30 Mar 2010 16:13:50 +0000

コレは便利。
IE6からIE9までのCSS適用前のスタイルが一覧で見る事ができます。

なるほど。
こうなっていたのか。って言うのもあるのでコーダー関連の方は見ておいた方がいいかと思います。

便利すぎる。
是非ご覧ください。

Internet Explorer User Agent Style Sheets

CSSを記述する際のプロパティの順番

kazu — Mon, 28 Dec 2009 08:21:51 +0000

たぶん、皆さんそれぞれルールを決めてやっていると思うんですよ。

自分のルールを作っておかないと修正の時に見つけるのとか面倒ですしね。
パッとみてこのスタイルにはこのプロパティがあたっている。って理解したいですからね。

いろんな方が順番はこんな感じです。って記事を書いているのを見ますけど、自分と結構違っているので不安な部分も・・・。

とりあえず、見てみてくださいw

* width
* height
* background
* border
* font
* color
* text-decoration
* text-align
* other text
* vertical-align
* list-style
* display
* overflow
* position
* float
* clear
* z-index
* margin
* padding
* content

こんな感じです。
コレの通りぴったり！って完璧には決めていないですけど、キモになる部分は順番は意識しています。

「width」と「height」は必ず先頭に書いています。
すぐにサイズとかがわかるので見やすいため。

「margin」と「padding」は最後。
これも見やすさ重視。
数値がずれると表示が崩れる原因になるひとつでもありますし。

その他のレイヤーにかんする記述。「position」とか「float」とか。
これらは、「margin」の上に書いています。

「width」と「height」の下には装飾系をおいています。
「background」や「border」とか「font系」です。

という具合に分けています。

自分のコーディングの精度をあげるにはこういった細かいところからも見直すといいかもしれないですね。

Firefox 3.5のCSSの変わったとこ

kazu — Tue, 07 Jul 2009 03:18:39 +0000

さっき入れていきなり気づいたとこがあったのでメモ。

まず、CSS3のtext-shadowが適用されるようになっています。
@font-faceも対応されていますね！

だいぶ変わったとこ。
例えば、aタグに別窓やポップアップでリンクをする場合、外部リンクですよーってアイコンを付加してあげるとおもうんですが、その時のソース。

CSSソース

a[target] {
	background:url(../img/ico/ico_brank.gif) no-repeat right center;
	padding-right:15px;
}

上記のソースで

このように表示されていたんですが、Firefox3.5にしたらおかしなことに。。。

こんなになっちゃいました。
backgroundのpositionを命令している部分を数値にしてみても改行されたような感じで表示されてしまったり、おかしな挙動になってしまいます。。。

なので、とりあえずの回避方法として

CSSソース

a[target] {
	display:inline-table;
	background:url(../img/ico/ico_brank.gif) no-repeat right center;
	padding-right:15px;
}

「display:inline-table;」を使います。そうすると、意図していた表示になると思います。
ただし、Safariで確認すると、上寄りになってしまうためあまり使えません・・・。

後、「em」タグもおかしな挙動になっています。
ブロック要素？みたいになっていてさらにmargin-bottomも勝手に取っています。
これも「display:inline-table;」でとりあえずは回避できますが、検証が必要です。

さらに、「label」タグもおかしいです。。。

これは少し大変なバージョンアップだったんではないでしょうか。
何かわかり次第、更新したいと思います。

Firefox3.5の詳しい変更点はコチラをご覧下さい。
Firefox 3.5 for developers

CSSに煮詰まってきた？？？？

kazu — Tue, 02 Jun 2009 15:05:14 +0000

新しい技術（CSS3など）は日々でてきますが、肝心のブラウザが対応していないので使いようがない・・・・。
現在のCSS2.1でのコーディングがメインなので煮詰まってきた感があるとおもいます。

しかし、そんなときだからこそ試してほしい事があります。

「ハックを使わないでコーディング」

これを是非ためしてほしいのです。
簡単なところだと、floatをかけた要素にmarginをかけると一部のバージョンのIEではmarginを倍にとってしまうバグがあります。
そんなときにハックをつかって回避していると思います。
そういう部分をpaddingを適用させハックを使わないようにするなど回避方法は色々とあると思います。

そういった部分でハックを極力減らしてコーディングをする事を意識してほしいと思っています。

そういう事を意識する事によってもっとコーディングの技術があがっていくと思います。

やばい、偉そうな事いいすぎた・・・。
すいません、自分はまだまだペーペーなので自分がそういう事を意識して煮詰まったCSSのコーディングを楽しんでいきたいと考えていました。

そんな火曜日の夜。

IE8のlabelがおかしい

kazu — Wed, 13 May 2009 04:58:27 +0000

最近IE8をインストールしたんですが、ブラウザ確認をしていて気づいた事がありました。
結構重要です。

「」がブロック要素？として認識されている。
なので、IE7以降やFireFoxなどのモダンブラウザでは意図したレイアウトになっているんですが、IE8ではブロック要素？になっているため次の要素が下に落ちちゃってます。

こんな感じに。

回避するには？

以下のソースコードをIE8用に用意する。

CSSソース

label {
	display:inline-block;
}

これで回避できます。
ちゃんとした対応策ではないかもしれないのでもう少し調べてからわかり次第更新したいと思ってます。

これで一応バグ表示は回避できますね。

IE8だけにこのスタイルシートを当ててあげないといけないので条件分岐コメントを使って適用させます。
「」内に記述します。

ファイル名は任意でけっこうです。
気をつけなければならないのが、メインとなるCSSの下に記述しないといけないので注意してください。

とりあえず、これで回避は出来ますがコレで正しいのかどうかわからないので難しいところです・・・。
いきなり表示に食い違いが出るとは思っていなかったので先が思いやられます。

今後はIE6、IE7、IE8を確認しないといけないんですね。
仕事が増えた！

リンクの回りにつくボーダーを消す。

kazu — Tue, 28 Apr 2009 09:38:13 +0000

これです。
リンクをクリックした時にでる枠線。
これを消すのはCSSでできます。

CSSソース

a {
	outline:none;
}

これだけです。
これでクリックした時に枠線はでません。

ちなみに、「text-indent:-9999em;」を使って画像置換を使用している場合枠線が左にながーく出てしまいますが、コレを使用すればそれも消す事ができます。
あれはあまりキレイではないので「text-indent:-9999em;」で画像置換を使っている方にはお勧めですね。

枠線うざい！！って思っている方は「outline:none;」を使ってみてください！

IE8のCSS3対応状況

kazu — Wed, 25 Mar 2009 07:55:26 +0000

残念な事に、「box-sizing」のみの対応です・・・。
いくらCSS2.1を一通りサポートしたからってそりゃーないっすよ！

これじゃいつまでたっても時代遅れのブラウザですよ。。。

トホホ。

「@font-face」でウェブフォントを表示

kazu — Thu, 05 Feb 2009 02:57:06 +0000

近い将来画像で見出しを作ったりする事がなくなるかもしれないです！？

とは、言い過ぎたかもしれないですけど、それくらい便利な「@font-face」。
使い方は至って簡単です。

CSSソース

@font-face {
	font-family: monof;
	src: url("../monof55.ttf") format("truetype");
}

.fontFace {
	font-family: GTFont;
}

XHTMLソース

abcdefghijklmnopqrstuvwxyz

では、見てみましょう。
Safari3.1でみてください。

abcdefghijklmnopqrstuvwxyz

どうでしょうか？
ちゃんと表示されているでしょうか。

ブラウザの対応が普及されればとても便利になりそうですね。
でも、フォントのライセンスなどで問題がでてくるかも・・・。

ちなみにこの「@font-face」はAdobe MAX 2009でお話を伺いました。
ちょっとSafariが楽しすぎで困ってます・・・。Firefox使いとしてはSafariに同じようなアドオンがあればなー、って思いますね。
おまけですけど、Adobe MAX 2009のセッション資料や講演ストリーミングビデオ閲覧は2月の中旬を予定されているみたいです。
参加された方は2月中旬を待て！！！！！

Firefoxでの中央表示

kazu — Sun, 11 Jan 2009 15:48:01 +0000

Firefoxで中央表示の設定をした場合、スクロールが出るときとでないときでその分ずれてしまいます。

それを回避するのが、

html {
	overflow-y:scroll;
}

これ。
常に縦のスクロールを表示している状態になるのでスクロールバーが出てきても表示がずれたりしません。

何気に便利なので覚えておいて損はないテクニックです。

2008年でもっともアクセスの多かった記事

kazu — Fri, 09 Jan 2009 03:13:07 +0000

ブログ始めて一年経ちました。
なにげに続けている自分にビックリです。

読んでくださっている方、これからもよろしくお願いいたします。

さて、2008年でアクセスの多かった記事をまとめてみたので掲載しようと思います。

んー、やっぱりiPhoneがらみが多いですね。
1位と2位はiPhoneやiPod touchで映画を見る時にDVDから適した形式に編集するやり方です。
3位はiPhoneをいじっちゃいました。って記事です。
4位は好きなブランドの一つである「KAZUYUKI KUMAGAI」の記事です。あまり、ブログとかないのでアクセスする方が多いのだと思います。
5位はGoogleのブラウザに関する事ですね。RSSを表示させたら大変な事になりましたw
6位はそのまんまです。CSSの画像置換に関するテクニックです。
7位はWordPressのカスタマイズに関する記事ですね。覚えておいて損はないと思います。
8位はiPhoneの値段に関する記事です。
9位はビックブランドがコラボするって記事です。
10位はCSSのテクニックに関する記事です。通常IEでは「min-height」などはきかないのですがそれを適用させたかのように見せるテクニックです。

ざっと説明しましたが、この記事が？っていうのが多かったのが印象的です。

ジャンルが結構混ざっているのですが、ある程度カテゴリに分けた方がいいんですかね・・・。