CSS3で追加されたcurrentColorキーワードを試してみた


先日、ブックオフのタッチでおトクなメンバーズが8月で利用できなくなると知り(参考:【BOOKOFF タッチでおトクなメンバーズ】サービス名称・内容変更について)、ブックオフに行きました。そこで2011年に発売された定価2800円のCSS3本の値札が700円、しかもその日は半額デイだったため350円で売られていたので思わず購入。まだほとんど読んでないのですが、パラパラめくっていると色の指定方法について書かれた項目に『currentColor』という値が書いてありました。

一瞬、「現在の色? それって何も指定しないのと同じじゃ……」と思ったのですが、よくよく読んでみると現在の要素の文字色を表す値ということが分かりました(参考:color value – CSS | MDN(currentColor キーワード))。

たまに文字色とボーダーの色を同じにするようなレイアウトのスタイルを記述することがありますが、そういう時に便利なキーワードですね。

というわけで試してみました。

HTML

CSS

実行結果:currentColorテスト

確かに、指定の色が、その要素の文字色と同じ色になっていることが分かります。覚えておきたいです。

ここから余談です。

先日、プロとして恥ずかしくない 新・WEBデザインの大原則を読みました。タイトルにWEBデザインとありますが、デザインだけでない、WEB制作について広範囲に書かれており、わかりやすかったので良書といえると思います。
ですが、一つだけ気になった点があります。その点を以下に引用します。CSSの基本について書かれた項目の一部です。
名前からも想像できる通り、colorは文字色(前景色)を、background-colorは背景色を指定するためのプロパティだ。
自分は、background-colorが背景色を表すのは一目見たら分かると思うのですが、colorプロパティは見ただけでは文字色を表すと分からないと思います。時々、疑問に思うんです。なんで、CSSを作った人は、文字色の指定するプロパティを、font-colorとかtext-colorという書き方にしなかったのだろうかと。
まあ、こんな疑問もつの自分だけかもしれないんですけどね。

CSS3で追加されたcurrentColorキーワードを試してみた” への1件のコメント

コメントを残す

メールアドレスが公開されることはありません。