2024年02月 / 01月≪ 1234567891011121314151617181920212223242526272829≫03月
2008.06.28(Sat)

ブログのCSSテンプレートをカスタマイズしてフォントの絶対サイズ指定を相対サイズへ変更

7/10に今更ながら気が付きましたが、IE6の文字サイズを「大」のままでフォントサイズの表示確認を行なっていました。このエントリーはIE6フォントサイズがデフォルトの中であることを想定して書いておりましたので、CSSでIE6用のフォントサイズ指定が全く違うことになります。修正させて頂きました。

当ブログはそれほどアクセス数は無いんだけど、Google Analyticsという無料のアクセスログ解析ツールを使っている。

何気なくGoogle Analyticsでアクセスログを見ていたら、このブログを訪れてくれる人が使っているブラウザは7割がInternet Explorer。その内の6割はInternet Explorer6というモダンだかレガシーだか分からないブラウザを使っている。
あんなブラウザは窓から投げ捨てて、とっととFireFox使ってくれよと思わなくもないんだけど、そこは個人の自由。強制する訳には行かない。

Internet Explorer6には様々な弱点というか至らないところがありまくりなんだけど、アクセシビリティ上最悪なのが、Webページで文字サイズを絶対指定している場合に、Internet Explorer6から文字サイズが変更できないという点だ。

タグ(ブログ内検索もできます)CSS ブログ XHTML HTML アクセシビリティ フォント カスタマイズ

14:55  |  Web/ブログ  |  TB(0)  |  CM(0)  |  EDIT  |  Top↑
2007.07.26(Thu)

ユニバーサルセレクタ(*)はもう古い?

久々にCSSに関する記事を書いてみるかということでもないけれども、Emotional Webというサイトで、気になる記事を見つけた。

*{ margin : 0 }はもう古い!?
http://www.lllcolor.com/web/css/51.html

全称指定として使う「*」がもう古いというか、海の向こうでは使われなくつつあるというのだ。理由は2つで一つはレンダリングが遅く(重く)なってしまうこと。もう一つが折角ある利用できそうなスタイルさえもリセットしてしまうためだ。

タグ(ブログ内検索もできます)CSS ユニバーサルセレクタ * 全称指定 スタイルシート Web

16:06  |  CSS/XHTML  |  TB(0)  |  CM(0)  |  EDIT  |  Top↑
2007.06.29(Fri)

ブラウザのレンダリングモード切替スイッチ一覧

この本を参考に、HTML(XHTML)のバージョン、XML宣言の有無、DTDの有無によってレンダリングモードを切り替えるブラウザについて調べたことがある。折角なので参考になる人もいるかもしれないから公開してみることにした。
ちなみにDTDとは「http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd」とあるような文書型宣言のこと。

言葉の意味は次の通り。Old Gecko系:NN6.x、Mozilla1.0、New Gecko系:Fire Fox、Mozilla1.1以上、NN7以上、Safari系:Safari1.0以上、Opera7.x:Opera7以上のことでOperaの情報が古いが、まぁOperaは最もW3Cの仕様に忠実なレンダリングをするので、FireFoxで問題なければまず崩れることはない。Operaで崩れる現象が起きた場合は、それはOperaがおかしいのではなくコードがおかしく、FireFoxの実装がおかしいともいえる場合が多々(逆もあるが)。

S:標準(StandardI)モード、AS:Almost Standardモード、FS:Full Standardモード、Q:Quirksモード(後方互換モード)。標準モードとAlmost Standardモード、Full Standardモードはほぼ同じと考えても差し支えない。ASの場合に若干tableセル内に入れた画像の余白が変わるだけ(と認識している)。

タグ(ブログ内検索もできます)後方互換モード レンダリング IE6 Quirksモード XHTML CSS スタイルシート バグ

12:37  |  CSS/XHTML  |  TB(0)  |  CM(0)  |  EDIT  |  Top↑
2007.03.09(Fri)

XHTML+CSSスタンダード・デザインガイド

XHTML+CSSスタンダード・デザインガイド―XHTMLとデフォルトスタイルシートを基本にしたデザインコントロールの実践

この本はCSSとXHTMLを初めて勉強し始めた、2・3年位前に購入した。正式名称は「XHTML+CSSスタンダード・デザインガイド―XHTMLとデフォルトスタイルシートを基本にしたデザインコントロールの実践」と長ったらしい。

内容は基本的なXHTMLとCSSの解説だが、これが丁寧で初めて触れる自分にも分かりやすかった。周りにWebは勿論、CSSやXHTMLに詳しいというか触りすら分かっている人がおらず、まだtableレイアウトが主流でCSSでフルレイアウトというサイトも少なかった(自分が知らなかっただけかもしれないが)。
時流はXHTML+CSSに移り変わろうとしていた。

タグ(ブログ内検索もできます) XHTML CSS 書籍 スタイルシート お勧め

10:21  |  CSS/XHTML  |  TB(0)  |  CM(0)  |  EDIT  |  Top↑
2006.12.20(Wed)

【CSS】IE7のコメントアウトしないと左右のmarginが反映されないバグ!?

IE7の日本語正式版がリリースされて、暫く立った。
今まで作ったページで特に表示が崩れたり、変になる箇所もなく平穏無事に過ごしてきた。

ある新しいページを作ることになり、IE7で表示を確認するとどーもおかしい。
画像があって、その右側に簡単な説明文が入るというよくみる表示方法でIE7だけで左右のmarginが無視されてしまうのである。

しかも同じようなスタイルを適用している別の箇所では、左右のmarginが効いている。
つまり、同じようなHTMLソースと同じようなスタイルをCSSで指定しているのに、片方は左右のmarignが効き、片方は左右のmarginが無視されているのだ。

一体どういうことだ!?っとソースコードを何回も見直してみるが、誤った記述はない。
あーでもない、こーでもないと色々いじっていたが、全く改善されず。


一行一行シラミツブシにHTMLのコードを読んでいた、ハタと気が付いた。

「コメントアウトの有無じゃねーかよ!!(怒)」

タグ(ブログ内検索もできます)CSS Bug バグ IE7 スタイルシート

10:08  |  CSS/XHTML  |  TB(0)  |  CM(0)  |  EDIT  |  Top↑
2006.12.12(Tue)

面白い写真共有サイト-Webshots

写真共有サイトと言えば、Yahoo!米に買収されたFlickrが有名。よくブログにブログパーツが貼っていあったりする。
日本だとフォト蔵かな。

どちらも非常に綺麗な写真が沢山あって写真の勉強になる。うーん。自分も精進しなければ!

そんな写真共有サイトをググっているうちに面白いサイトを発見。その名もWebShots

WebShots

タグ(ブログ内検索もできます)写真 共有 CSS JavaScript web

12:46  |  Web/ブログ  |  TB(0)  |  CM(0)  |  EDIT  |  Top↑
2006.11.21(Tue)

クソIEをハックしてやる!(IEの条件分岐の使い方)

Webに関する仕事をしている関係で、最近のトレンドとしてWeb標準に基いた(X)HTML、CSSを記述するというのが流行りだ。
特に、旧来のtableレイアウトから脱却して、CSSレイアウトというのはトレンドの主流だろう。

CSSレイアウト、見栄えを全てCSSで行おうとすると「ムキー!!!」ってなるのがWinIE。まぁシェアが一番大きいブラウザなだけに厄介である。

皆さんはWinIEに対してだけに適用したいスタイルがある場合どうやっているだろうか?
アンダースコアハック、スターハック、voice-familyハック等々対策は色々ある。

はっきり言って俺はこのハックが嫌いである。理由はクリーンなCSSではなくなってしまうから(←むしろ性格的な理由かも・・・)。なので極力この類のハックは使わない。

そこで便利なのが条件分岐のコメントアウト。簡単に言ってしまえばIEの特定のバージョン以下、未満、以上に対してスタイルを適用する方法。

タグ(ブログ内検索もできます)IE ハック CSS hack スタイシート バグ bug

09:18  |  CSS/XHTML  |  TB(0)  |  CM(0)  |  EDIT  |  Top↑
2006.11.18(Sat)

IE7をスタンドアローンでインスコ

ネット関係の仕事をしていると、各ブラウザでWebI/Fがちゃんと挙動しているか確認する必要がある。

なので、会社のPCにも家のPCにも色々なブラウザがインスコされている。FireFox、Opera、NN、Mozilla、IE6等等々。会社の検証用のMac機にはSafari、FireFox、NN、IE5等々。
Windowsマシンが会社も家もW2Kなので、IE7はインスコしてない。

W2KでIE7はインスコできないググったけど無いみたい・・・・
うーん。会社のPCは業務システム上W2Kじゃなきゃいけないので、家のPCをXPに変えるか・・・・

ググっている中でIE7をスタンドアロンでインスコする方法を見つけたので紹介。kazuhitoさんの「続・スタンドアローン版IE7」より。
JavaScriptエラーや条件分岐コメントを有効にするにはレジストリをいじる必要があるとのこと。

XP使っているけど、IE6もIE7も使いたい!って人には朗報ですね。

タグ(ブログ内検索もできます)IE IE7 CSS スタンドアローン 共用 インストール

00:09  |  CSS/XHTML  |  TB(0)  |  CM(0)  |  EDIT  |  Top↑
 | BLOGTOP |