CSS（全 3 件）
CSS 非対応ブラウザへのちょっとした心遣い
sb でページを作る人の多くは CSS で外観を整えていると思いますが、CSS 非対応（もしくはオフにしている状態）での表示を意識したことがあるでしょうか。
非対応環境での表示における配慮というのは、追求するとあまりにも多岐にわたり大変ですが、簡単かつ非常に効果のある方法が一つあるのでご紹介します。
Safari の CSS 文字化けバグを防ぐ
Safari には CSS の content プロパティを使って日本語を表示させようとすると文字が化けるバグがあります。また、数少ない content プロパティ使用者よりもさらに少なそうですが、日本語クラス名（CSS2 はクラス名に 2バイト文字が使えます）を使った場合も、文字化けによりマッチしません。
CSS ファイルで @charset 宣言を行っても効果は無く、画面上には意味不明の物体が羅列されるのみです。しかし、ねこめしにっきによると HTML の 外部 CSS link 部分に charset 属性を明示する事で文字化けを回避できるようです。
<link rel="stylesheet" href="xxx.css" type="text/css" charset="UTF-8" title="xxxxx" />
もちろん charset は環境にあわせて修正してください
バックスラッシュによるエスケープはメッセージの編集性に乏しく、@charset 宣言もダメだったことで諦めていましたが、こんな単純な解決法があったとは。
Windows 環境で WEB ページを作成し、Safari でのチェックができない人にとっては確認すらできない不具合ですが、上記の方法で回避できます。
この記事に続きはありません
コメント (2) |
トラックバック (0) |
このページの先頭へ △
紹介 : CSS に取り組む人必携
米国の Chris Pederick さんが日本語化した Firefox / Mozilla 用の拡張機能「Web Developer」は WEB ページを作成する人、中でも CSS に取り組む人必携のアイテムです。既に HTML や CSS に慣れている人のチェックツールとしてはもちろん、これから勉強しようとする人にとっても非常に役立つ機能が満載です。学習目的以外に、「配布されているテンプレートのこの部分だけ変更するには、どこをいじればいいんだろう」といった状況でも活躍します。
ブロック要素のサイズや class 属性を表示させる事はもちろん、枠で囲んでどのような構造になっているかを視覚的に確認できます。さらに、クリックした要素の枠を表示させたり、カーソル部分がどのような入れ子状況になっているかをステータスバーに表示する機能も搭載しています。（「html > body > div#contents > div.entry > div.cc_0 > div.item_body > p.center > img」のように表示される）その他、表示中のページをワンタッチで Another HTML-lint gateway や W3C Markup Validation Service でチェック可能な機能も便利ですが、何より役立つのが表示中ページの CSS を直接編集してその場で効果を確認できる事です。