Rsuke Blog

スタイルシートをリセットするとき、最近はYUIのCSSリセットを流用することがほとんどなのですが、
最近、Eric Meyerの提案するリセットを知ったので、メモとして。

でも、このエントリ書かれたの2007年の5月ですか。ちと古いのかな。
まだ試していないので、これから・・・。

この方法を知ったとき、久しぶりに声を上げた。

それくらい、びっくりした発見。

CSS Gradient Text Effect

これはとんでもないのではないでしょうか。

ie7.js

IE5及びIE6を、IE７に準拠させるスクリプト。

head内に、以下の文章を記述すれば完成。

(xx.xにはバージョン番号を。現在は2.0)

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/1.0(beta)/IE7.js" type="text/javascript"></script>
<![endif]-->

さらに、IE7で対応されていないCSSを追加したい場合は、

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/1.0(beta)/IE8.js" type="text/javascript"></script>
<![endif]-->

↑こちらを使う。

[IE8]を使用している場合は、[IE7]は記述しなくていいとのこと。

まだベータ版なので仕事で使うには考えもんですが、これが完成すれば、

「あ～、またIE6が!!!!」

と叫ぶ必要がなくなるわけです。

なんという開発!!!

足むけて眠れません。

とりあえず「Web標準」が叫ばれている昨今、さすがに、<table>使ってサイトを作ることはないけれど、
それでも、表を作る際には<table>は離すことができない。

しかし、ただテーブルを組むだけでなく、そこにデザインとアクセシビリティを考慮するのがデザイナーだろう！
ということを考えると、とても参考になる記事を発見。

http://veerle.duoh.com/blog/comments/a_css_styled_table_version_2/

この記事によると、まず表を作る際にポイントとなるのは４点

1.テーブルのヘッダ部分には必ず<th>を使い、属性にscopeを使いましょう
2.<caption>をつけましょう。（特に同じページにテーブルが２つ以上あるとき）
3.その表にsummaryを付け、その表の内容をきっちり記しましょう
4.もし必要なら、<thead><tbody><tfoot>を使って、グループ分けしましょう

ということだそうな。

確かに、今まではデザインに関してはCSSでなんとかやっていたけれど、アクセシビリティについては
ほとんど意識していなかったので、いい機会です。上のポイントは全部アクセシビリティに関することやし。

1.のthはやっていたけれど、scopeは初めて見ました。
自分の持っているタグ辞典（けっこう分厚い）を見ると、載っていないのでネットで調べてみてもあまり載っていない。
とりあえずソースを見たところ、「このセルは横（or縦）ですよ」ということを表すものみたい。
つまり、横なら
<th scope="row">
縦なら
<th scope="col">
ということなんでしょうか。


それ以外の2.3.4.については、頭にあったけどよく忘れていた。特にsummaryはよく忘れてしまう。
SEO的に見ても結構大事だと思うので、こういう抜けは気をつけないといけないです。

スタイルシートでの装飾に関しては、最近よく見かける偶数列または奇数列の<tr>にクラス指定し、
そのクラスにbackgroundで色を指定すれば見た目もスッキリし、長い表になってもうんざりしないレイアウトになってます。
なので、それらを盛り込んで作ってみました。

http://r-naka.net/table.html

テーブルが過去の遺物のような扱いを受けているような気がしますが、もちろんそんなわけはなく
必要とされる部分は必ずあるわけなので、きっちり意味や使い方を理解して、使用していきたいと思います。
明日仕事で使う予定だったので、早速使います。

いつか仕事で使おうと思っていたら、仕事でたまたまいい機会があったので使おうとしたけれど、記事に起こすのをサボっていたので、結局その仕事はそこで止まってしまいました。
そんなことがこの先起こらないように、「今できることは、今する」の精神でこれからやっていこうと思う。

さて、タイトルのとおり、CSSを用いてボタン化したリストに説明のツールチップをつけてみた。
Web制作を勉強し始めたころ、altタグの意味を全く分かっていなかったので、altタグを使ってこのツールチップ代わりにしていたら、先生に「その使い方はないやろ」とこっぴどく言われた覚えがあります。

で、サンプルです。

リストにツールチップ表示

<span>を使って、表示させるのはおもしろいな～、考えた人賢いな～、とつくづく思います。
マウスをボタンに持っていくと、きっちり説明チップが表示されます。
チップの位置は

a:hover span{
    top:　px;
    left:   px;
}

で指定すれば好きな位置に表示できる。ただ、下の横並びの時はボタンの下に隠れてしまうけれど、z-indexを指定すれば、ボタンの上に表示される。（でも、なぜかIEは表示されない。）

ただ、画像つかってボタンを作ってこれを使うと、スクリーンリーダー等を使った場合は逆に分かりにくくなるような気がする。（<a><img      alt="ボタン：会社概要" /><span>会社の概要をご説明します</span></a>
と記述するので、読み上げられるときは「ボタン：会社概要、会社の概要を説明します」となると思う）

あくまで視覚情報としてのツールチップなので、読み上げのことも考えるなら使わない方がいいのかも？

どうなんだろう。

こういうところもちゃんと考えていかないとダメですな。

CSSの:before、:after、contentを使って、角丸ボックスを作ってみた。

とは言え、今回のboxを作る前まで、：beforeと:afterは知ってはいたけれど使ったこともなく、contentに至っては存在すら知らなかったので、自分の不勉強がはっきりと分かってしまった。

contentと疑似要素を使っての角丸ボックス