【xhtml/css】不可視のページ内アンカーリンクでアクセシビリティを向上する

Web制作をしていると他のページのソースが非常に気になってしまうという職業気質な方もいるかと思います。
自分もそんな気質を持った一人で、制作現場を離れた今でも「これはどうやって実装しているのだろう？」と思うと直ぐに「ctrl+U」（FireFoxを使っているので）でソースコードを見てしまうクセがあります。

ソースコードを見てると不可視なページ内アンカーを見たことはないでしょうか？例えばページ構造のヘッダ部分にアンカーリンクのまとまりがあり、グローバルナビやローカルナビ、ページ本文へと言った感じのリンクです。

【「【xhtml/css】不可視のページ内アンカーリンクでアクセシビリティを向上する」の続きを読む】

【xhtml/css】linkを記述する時の順序は「LVHA（ラブハ）」で覚えましょう

制作の現場から離れてしまっても、忘れずに覚えているというのが昔取った杵柄。このブログでも少しづつ小出しで紹介していますが、最も基本的で忘れちゃいけないのがlinkの記述順序です。

linkはテキストリンクの色の指定する際に使いますが、4つの擬似要素があり、link、visited、hover、activeの順序で記述しなければ意図したように動きません。それぞれの頭文字を取って「LVHA（ラブハ）」で覚えておきましょう。

a:link { color:#06c; text-decoration:none; }
a:visited { color:#609; text-decoration:none; }
a:hover { color:#F60; text-decoration:underline; }
a:active { text-decoration:none; }

【「【xhtml/css】linkを記述する時の順序は「LVHA（ラブハ）」で覚えましょう」の続きを読む】

【xhtml/css】xhtml（html）やcssのコードをチェックするツール色々

htmlやCSSをコーディングしていると、本当にコードが正当（valid）なのかどうかを確かめたくなるところ。記述している時には十分に気をつけているつもりが、ちょっとしたケアレスミスが後から発覚するケースも多いはず。

クライアントからもW3Cでvalidでとか、lintで何点以上とか依頼をされることもあるのではないでしょうか？
htmlやcssのコードはブラウザで簡単に確認されてしまうので、情けないコードは書きたくないところ。という訳で自分が過去に使っていたコードチェッカーを紹介してみます。

【「【xhtml/css】xhtml（html）やcssのコードをチェックするツール色々」の続きを読む】

【html/xhtml】ユーザビリティを高める「<label>」の使い方

文字コード宣言と日本語の出現位置の関係に続いて、もう一つ書きたかったのが「<label>」の使い方です。

意外と「<label>」の存在自体を知らない方が多いのではないかな？
「<label>」はフォーム要素に使われるタグで「<input type="text">」や「<input type="radio">」等と共に使われます。

【「【html/xhtml】ユーザビリティを高める「<label>」の使い方」の続きを読む】

【html/xhtml】文字コード宣言と日本語、特にtitleの位置関係に関する話

随分前CSS/XHTMLカテゴリに関して何かしら記事を書かなければ！と書きましたが、忘れてた訳じゃなく何を書いたら良いのか考えあぐんでいました。

Web業界は時間の流れが速く、ちょっと離れている間にあっと言う間に自分が持っている知識が過去のものになってしまいます。要するに陳腐化するのが早い訳です。

そんな中にありながら今でも色々なサイトにアクセスすると、昔とった杵柄というか職業癖からついついソースを見てしまうことがあるのですが、意外と多くのサイトで見かけたのがhtml（またはxhtml）の「文字コード宣言」と日本語、特に「title」タグの位置関係です。

【「【html/xhtml】文字コード宣言と日本語、特にtitleの位置関係に関する話」の続きを読む】

ユニバーサルセレクタ（*）はもう古い？

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

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

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

【「ユニバーサルセレクタ（*）はもう古い？」の続きを読む】

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

この本を参考に、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セル内に入れた画像の余白が変わるだけ（と認識している）。

【「ブラウザのレンダリングモード切替スイッチ一覧」の続きを読む】