2024年02月 / 01月≪ 1234567891011121314151617181920212223242526272829≫03月
2009.02.22(Sun)

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

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

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

タグ(ブログ内検索もできます)html xhtml css ページ内アンカー アクセシビリティ

14:21  |  CSS/XHTML  |  TB(0)  |  CM(0)  |  EDIT  |  Top↑
2009.02.21(Sat)

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

現場のプロから学ぶXHTML+CSS
制作の現場から離れてしまっても、忘れずに覚えているというのが昔取った杵柄。このブログでも少しづつ小出しで紹介していますが、最も基本的で忘れちゃいけないのが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; }

タグ(ブログ内検索もできます)html xhtml link リンク

13:54  |  CSS/XHTML  |  TB(0)  |  CM(0)  |  EDIT  |  Top↑
2009.02.10(Tue)

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

Webアクセシビリティ ~標準準拠でアクセシブルなサイトを構築/管理するための考え方と実践~ (Web Designing BOOKS)
htmlやCSSをコーディングしていると、本当にコードが正当(valid)なのかどうかを確かめたくなるところ。記述している時には十分に気をつけているつもりが、ちょっとしたケアレスミスが後から発覚するケースも多いはず。

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

タグ(ブログ内検索もできます)xhtml html css コード チェック

07:14  |  CSS/XHTML  |  TB(0)  |  CM(0)  |  EDIT  |  Top↑
2009.02.09(Mon)

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

Webアクセシビリティ ~標準準拠でアクセシブルなサイトを構築/管理するための考え方と実践~ (Web Designing BOOKS)
文字コード宣言と日本語の出現位置の関係に続いて、もう一つ書きたかったのが「<label>」の使い方です。

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

タグ(ブログ内検索もできます)html xhtml label ラベル

23:38  |  CSS/XHTML  |  TB(0)  |  CM(0)  |  EDIT  |  Top↑
2009.02.06(Fri)

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

Webアクセシビリティ ~標準準拠でアクセシブルなサイトを構築/管理するための考え方と実践~ (Web Designing BOOKS)
随分前CSS/XHTMLカテゴリに関して何かしら記事を書かなければ!と書きましたが、忘れてた訳じゃなく何を書いたら良いのか考えあぐんでいました。

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

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

タグ(ブログ内検索もできます)html xhtml 文字コード宣言 title 日本語

07:06  |  CSS/XHTML  |  TB(0)  |  CM(0)  |  EDIT  |  Top↑
 | BLOGTOP |