| 日 | 月 | 火 | 水 | 木 | 金 | 土 |
|---|---|---|---|---|---|---|
| « 5月 | ||||||
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | |||
ブラウザごとに不透明度の指定方法が違うのですが、まとめられた記事を発見したのでメモ。
[CSS]IE8にも対応したクロスブラウザ用の不透明度の指定方法
ちなみに、こんな感じになります。
selector {
opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */
filter: alpha(opacity=75); /* IE lt 8 */
-ms-filter: "alpha(opacity=75)"; /* IE 8 */
-khtml-opacity: .75; /* Safari 1.x */
-moz-opacity: .75; /* FF lt 1.5, Netscape */
}
大きなテーブルが含まれたＷｅｂページを印刷したいという要望をいただきました。
ＨＴＭＬのheadタグの中で次のように指定することで、印刷時のみ適用されるスタイルシートを指定することができます。
<head> ... <link rel="stylesheet" type="text/css" href="print.css" media="print" /> ... </head>
普通のページなら、このスタイルシートの中でロゴとかメニューのスタイルをdisplay:none;にするだけなのですが、ページの中に大きなテーブルが存在するときは、もうひと工夫必要です。
大きなテーブルを印刷すると、途中で改ページされた場合に２ページ以降はヘッダが表示されなくなる場合があります。テーブルのヘッダを２ページ以降も表示するようにするためには、cssファイルに次のような定義を追加し、テーブルのヘッダにしたい行をtheadタグで囲んでください。
thead {
display: table-header-group;
}
規約では、デフォルトで設定されているはずなので、ブラウザによってはそのままで表示されるかもしれません。
みなさんは、正しいHTMLを書いておられるでしょうか？
静的なHTMLを書くだけならDreamwaverなどのWYSIWIGなオーサリングツールを使えば事足りるかもしれませんが、PHPなどから動的にHTMLを作成するときは、その作成したHTMLが正しいかをチェックするのは難しいと思います。
そこでオススメしたいのが構文チェックツールです。私が知っているものでは、W3Cが公開している「Markup Validation Service」と、日本の方が作成しておられる「Another HTML-lint」があります。
これらのツールにチェックしたいWebページのURLやHTMLを入力すれば、そのHTMLが構文的に正しいかを採点してくれます。間違いや修正すべき点があったときは、その場所と 修正方法を示してくれます。
特に「Another HTML-lint」はソースが公開されており、自身のサーバやPCで動作させることができます。
開発中のWebサイトやWebアプリケーションで、なぜかデザインが崩れてしまうという現象が発生したときは、HTMLの構文が間違っているのかもしれません。そんなときは、これらのツールでチェックしてみてはいかがでしょうか。
稀に、HTML中に”red”などという名前のクラス名を使ったサイト見かけることがあります。このように見た目をクラス名やID名にすると変更に弱くなり、スタイルシートの適用によって得られる利益が半減してしまうように思います。
例えば、仕事でWebページを製作していたとします。スタイルシートでデザインを別途定義できるようにし、変更にも強くなっています。ですがエラー メッセージに対して適用するクラス名は”error”ではなく”red”になっています。完成が近づいたある日、あなたの顧客や上司が「エラーメッセージ の文字は赤色でなく黄色にしないといけない」と要求してきた場合、変更に対する仕事量はどのくらいになるでしょうか。
全てのHTML中の”red”クラスを”yellow”とするなら、全てのHTMLを見直す必要があります。全てのHTMLをひとつずつ開いて”red”を検索し、それがエラー文字列に対して適用されていれば”yellow”に変更するという作業になるはずです。
もしくは、下のようにクラス名が”red”なのに内容は”color: yellow;”とするという方法もあります。
red {
color: yellow;
}
この方法を採るとクラス名と内容が一致していない保守しづらいサイトになってしまいます。
さらに悪いことに、エラー文字とは関係なく単に赤色文字列を表示したい場合に”red”クラスを使っていれば、その部分も黄色に変更されてしまいます。これを防ぐためにはやはり全てのHTMLをチェックする必要があるでしょう。
もし、エラーメッセージに対して適用するクラス名を”red”ではなく、”error”等、見た目ではなく意味をクラス名にしていればどうなるでしょうか。スタイルシートファイルの”error”クラスを、
error {
color: red;
}
から
error {
color: yellow;
}
に変更するといった作業だけで済むはずです。
これは”left”等というクラス名にも当てはまります。leftと名づけられたボックスが、いつまで画面の左側に表示されているでしょうか。
私はWebニュースの巡回を日課にしていますが、ふとしたことで興味深いブログの記事を見つけました。
団塊～シニア層向けのWeb設計 やっちゃいけない10のＵＩ
そこからリンクをたどって役に立ちそうなページをいくつか見つけました。
シニアはログインでつまづく？！
シニア向けウェブサイト構築のための10のポイント
シニア向けウェブサイトの色
私自身は基本的に業務システムや中年より若い方を対象にしたサイトばかりに携わってきたので、目から鱗の思いでした。
今後は高齢化社会になっていと言われていますし「シニア向けデザイン論」みたいなものも活発になるのかもしれません。
現状では、デザイナさんから挙がってくるデザインを見ると、表示幅やフォントサイズが固定されているものが多いように思います。
表示幅やフォントを固定したほうがレイアウトが固定できデザインしやすいのでしょうが、これではブラウザの機能で文字を大きく表示している方は読めなくなってしまうのではないでしょうか。そういう意味ではFlashも同じです。
そこで私がお勧めしたいのが、スタイルシートでpxやpt単位で指定している部分を全てem単位で指定するというものです。
emという単位は、1emを英字「M」の高さとして定義されています。
指定の仕方は
p {
margin: 0.5em;
}
というような感じです。
このように指定すればブラウザの設定で表示する文字の大きさを変えても、それに合わせてマージン幅などが変更されるので、レイアウトの崩れを防止することができます。
ただ、この方法には一つ問題があります。
ボタンなどの画像が文字の大きさに連動しないということです。画像の幅や高さをem単位で指定すればある程度解決できるのですが、無理やり拡大や縮小するので画像が汚くなる可能性があります。
この問題は今後、SVGなどのベクタ形式の画像が普通にブラウザに表示できるようになれば解決できるはずだと考えています。
早くIEが対応してくれればいいのですが…。
IE6には標準準拠モードと後方互換モードの２種類のモードがあり、何もしないと後方互換モードになっています。この後方互換モードが標準に準拠して いないため、標準に準拠しているFirefox等と表示が違ってしまう原因になっています。 IE6で標準準拠モードにするには、HTMLにDOCTYPEを宣言する必要があります。
DOCTYPE宣言の構文とIEのモードをまとめました。
| バージョン | !DOCTYPE宣言 | IEのモード |
|---|---|---|
| 宣言なし | 後方互換 | |
| HTML 4.01 | <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”> | 標準準拠 |
| HTML 4.01 Strict | <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> | 標準準拠 |
| HTML 4.01 Transitional | <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”> | 後方互換 |
| HTML 4.01 Transitional | <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> | 標準準拠 |
| HTML 4.01 Frameset | <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”> | 後方互換 |
| HTML 4.01 Frameset | <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”> | 標準準拠 |
| XHTML 1.0 Strict | <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> | 標準準拠 |
| XHTML 1.0 Transitional | <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> | 標準準拠 |
| XHTML 1.0 Frameset | <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”> | 標準準拠 |
| Compact HTML 1.0 | <!DOCTYPE HTML PUBLIC “-//W3C//DTD Compact HTML 1.0 Draft//EN”> | — |