2017年08月 / 07月≪ 12345678910111213141516171819202122232425262728293031≫09月
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↑
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↑
 | BLOGTOP |  NEXT