DN*BLOG » (x)HTML

クロスブラウザがチェックできる「Adobe BrowserLab」

kazu — Fri, 18 Feb 2011 05:14:12 +0000

「Adobe BrowserLab」

とうとう出ました。
こういうのを待っていたんですよ。

Macユーザーにとって、ブラウザチェックは鬼門。
なぜかといいますと、WIndowsのIEがチェックできないから。

たかがそれだけの為に、Windowsを起動したりしないといけないので面倒。
それが解消されるというのは気持ち的にもすごくいいw

チェックできる項目は、

コチラですね。
これだけチェックできれば何も問題なさそうです。
なにげにIE9まであるのはうれしいw

チェックしている様子は、

こんな感じ。
シンプル設計だから、チェックだけに集中できます。

IETesterでIE6をチェックするよりいいかと思いました。

マカーなコーダーにはおすすめなサービスだと思います。

HTML5

kazu — Fri, 23 Jul 2010 04:57:37 +0000

最近、HTML5での構築を行ったんですけど、だいぶ悩みますね。

・article
・aside
・section

上記3つの使い方に悩みます。

現在も仕様がコロコロかわっているので、今の仕様で作った物も、将来的には再構築が必要になってくると思います。
でも、HTML5だと文章構造がパッと見でわかるんでいいですね。

ちなみに、IEシリーズはHTML5に対応していないんでJavaScriptでの対応が必要です。

まー、まずはいろんな方がHTML5で構築されているのでそのソースを見る事が覚える事の近道ですね！

こちらのサイトでわかりやすく解説されています！
HTML5についてのおさらい – W3G Blog Studies

HTML5やCSS3のブラウザ対応状況が一発でわかる！

kazu — Tue, 23 Mar 2010 18:08:34 +0000

とても素敵なサイトをご紹介致します。

Web Design – HTML5 & CSS3 Checklist

CSS3のPropertieやSelector、HTML5の対応状況がチェックリスト形式で確認できるすばらしいサイトです。
リストになっているブラウザは、
Macの「Firefox」「Safari」「Chrome」「Opera」
Windowsの「Firefox」「Safari」「Chrome」「Opera」「IE」

どれも最新ブラウザですね。IEは6〜となってます。
コレを見ればわかるようにIEは見るも無惨に「×」がついております。。。
優秀なのはWebkitベースのSafariとChrome。次いで、Firefoxですね。

今のところ、HTML5 & CSS3でのフルコーディングは難しいですが、開発中のIE9に期待せざるを得ません。

HTML5、CSS3でコーディングをしたい方は目を通してみるといいと思います。

最近よく使うCSS

kazu — Sat, 24 Oct 2009 05:01:33 +0000

CSSで角丸

-moz-border-radius: 5px;
-webkit-border-radius: 5px;

「-moz-」はMozilla用。一般的にはFirefoxですね。
「-webkit-」はwebkit用。こちらはSafariです。

これだけで今まで面倒だった角丸ボックスを生成してくれます。
IEには適応されないので注意が必要ですが、個人レベルのサイトだったらガンガン使っていていいと思います。
オススメです。

簡単なマウスオーバー効果

opacity:0.8;
filter: alpha(opacity=80);

これを「a:hover」に適用させれば数値分透過されます。
これはIEでも使えるので無駄なボタン画像を減らす事ができます。
楽なのでオススメです。

上記二つは結構使えると思うので試してみてください。

HTML 5 Cheat Sheet

kazu — Wed, 08 Jul 2009 02:48:50 +0000

とても便利なサイトがありました。

XHTML 2は終わらせて（XHTML 2がなくなる訳ではありません。）、HTML 5一本でいこう！って流れが来ています。
覚えようにもまだまだ情報は少ないのが現状です。
そこで、「HTML 5 Cheat Sheet」

これで一通り、対応タグを見る事ができます。

こういうのありがたいですね。
作者様ありがとうございます。

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を確認しないといけないんですね。
仕事が増えた！

textarea等のフォームを角丸にする。

kazu — Wed, 25 Mar 2009 02:29:17 +0000

画像を使ったりすればできるんですが、CSSで簡単にできます。
※CSS3を使用するので対応していないブラウザは角張ってます。

CSSソース

input[type="text"],
textarea {
	border:2px solid #e8e8e8;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

これで角丸なtextareaが出来上がります。

見づらいですが、綺麗な角丸が簡単に生成できます。

おまけですが、自分が今どの項目を選択しているのかわかりやすくする為にしてあげます。

CSSソース

input[type="text"]:focus,
textarea:focus,
input[type="text"]:hover,
textarea:hover {
	border:2px solid #3399FF;
}

こんな感じです。
:focusは選択している時にボーダーの色を変えています。
:hoverはマウスオーバーしたときですね。

選択をするとボーダーの色が変わります。

簡単にフォームをデザインする事ができるので活用してみてください。

IEにもa要素以外に:hover擬似クラスを使えるようにする。

kazu — Tue, 24 Mar 2009 09:01:36 +0000

:hover以外にも、「:active」と「:focus」も使えるようになります。

Whatever:hoverのサイトで「csshover3.htc」と言う物をダウンロードします。

落としたファイルを任意のディレクトリに入れておく。

CSSソース

body {
	behavior:url("csshover.htc");
}

これでIEでも疑似クラスがバンバン使えます！
あれ？疑似クラスが働いてないな・・・。って時はディレクトリのパスがおかしいって事なのでパスを見てみてください。

これはお勧めですので活用してみてください。

携帯サイトシミュレーター「FireMobileSimulator 」

kazu — Mon, 16 Mar 2009 07:38:22 +0000

携帯サイトを制作する上でいちいちサーバーにアップロードして携帯で確認・・・。

こんな面倒な事はやってられない！
そんなときに役に立つFirefoxのアドオンがあります。

「FireMobileSimulator 」

確認したい端末を選択するだけでその携帯からアクセスしたかのように表示されます。
端末リストは「最新端末リストから端末を追加」の項目からダウンロードできるのでいつでも最新の端末を確認する事が可能です。

これは便利。
ただ、制作したhtmlで絵文字の表示がうまく出来なかったのでもう少し調べる必要があります。

携帯サイトを制作する予定のある方は使ってみてはいかがでしょうか。

制作者サイト
FireMobileSimulator.org