フォームでのCSSの応用
XHTML+CSS // 2006年10月29日 - 20:32
CSSは使い方によってはユーザビリティを向上させることができる。一般的に a:hover を使ったサイトは多く見かける。これはアンカーに対して :hover という擬似セレクタを用いることで、マウスが要素の上に乗せた状態 いわゆる「ロールオーバー」を実現できるというもの。
ブラウザの対応度も高いため、JavaScriptで制御するより安全・確実だ。CSSなのでもちろん背景画像も差し替えが可能で、使い方によってはかなり複雑なこともできるので是非習得したい。
ユーザーのアクションに応じて画面を変化させる擬似セレクタは他にもある。それが :focus というセレクタなのだが、例えば入力中のテキストエリアの背景色を変化させることで今どこのエリアに入力中なのか一目で分かるようにできる。使い方は下の通り。
textarea:focus {
background: #eee;
}
:focus はテキストエリアだけでなく、 <input type="text"/> でも同様のことができる。しかし、CSSに記述する際は下のようにtypeを限定しておいた方が便利だろう。
input[type="text"]:focus {
background: #eee;
}
ちなみに、このセレクタを使うと入力時にボーダーが太く表示される場合があるため、同時に
textarea:focus {
background: #eee;
border: 1px solid #ccc;
}
というように、ボーダーも設定した方が見栄えよくまとまる。
- コメント(0)
- トラックバック(0)
リトルスプーンのファイヤードラゴ(超極激辛)に挑戦
ひとりごと // 2006年10月11日 - 23:26
もともと辛いものが大好きな僕ですが、ついにリトルスプーン最強の辛さに挑戦することができました。でてきたカレーを見た瞬間思ったことは
「あ・・・赤い・・・!!」
実に赤かったです。ちょっと赤黒い感じの、ちょうどコチュジャンのような色味でした。気になる味の方はどうかというと、ひとくち口にした時から思わず笑いが出てしまうほど、辛味が口の中いっぱいに・・・。たった一口食べただけでは、そこらへんの「激辛」という名のついた食べ物では普通はこんなに辛く感じないんですが、ファイヤードラゴは違いました。一口目から辛い。なんぢゃこりゃ。
数ヶ月前のリトルスプーンにあった最強の辛さ「アブノーマル」の愛好者だった僕は、リトルスプーンが普通のカレー屋より辛いことを知っていたので今日は控えめにSサイズを頼んだのですが・・・食べている途中、口の中ではなくノドが痛くなってきて、常に水を飲み込まないとホントに”焼ける”感じがしたのでちょっとずつ水を飲んで癒しました。
結局完食はしたものの、あの辛さでMサイズは絶対無理だとさすがの僕でもリタイア宣言した一日でした。
ちなみにファイヤードラゴ挑戦にはカレー+150円必要です。
IEだけに特別なCSSを適用させる方法
XHTML+CSS // 2006年10月05日 - 00:51
IEだけ特別なCSSを適用させる方法として有名どころで言えば「スターHTMLハック」、「アンダースコアハック」などがある(詳細は続きで記載)。
しかし、ひとつのCSSファイルに全て書き込んでしまうと変更や更新が生じた際に見つけ出せないという問題が発生する。これを防ぐためにIEのバグを修正する専用のCSSファイルを作っておきたい。この場合、IEのみ読み込むように設定しなければならないのだが、以下の方法を使えば簡単に実現可能だ。
まずXHTMLにはインポート専用のCSSファイルを読み込ませておく。
<link rel="stylesheet" type="text/css" media="all" href="css/importer.css" />
メディアに「screen」以外の値を記述すると、NN4.xではCSSを読み込まなくなる。インポート専用のCSSには下のように記述して、基になるCSSファイルとIEのみ読み込ませたいCSSをインポートする。
@import "base.css";
@import iefix.css;
IE以外のブラウザではダブルクォーテーションのない@importは無視される。そのため、IEのみ適用させることが可能だ。ひとつ注意が必要なのが、IEの場合どちらのCSSもインポートされるため、IE専用のCSSファイルには上書きしたいプロパティのみ記述するのが望ましい。
トマトラーメン
ひとりごと // 2006年10月05日 - 00:38

早速食べに行きました。これまたとてもおいしかったです。値段も490円(税抜)とお手ごろなうえ、お店の雰囲気も話題性もあっていい。もちろん味も独特で、とんこつベースのにんにく風味、トマト風味という一見こってりしてそうなメニューだけど、実はとてもあっさり系。さすが居酒屋のメニューといったところでしょうか、しつこくないところがいいですね。
また食べに行きます。
