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という書き方にしなかったのだろうかと。
まあ、こんな疑問もつの自分だけかもしれないんですけどね。

JavaScriptでlocationオブジェクトのようなオブジェクトを作成する関数を作ってみた


locationオブジェクトは現在表示しているページのURLの情報を含んだオブジェクトです(参考:window.location – Web API インターフェイス | MDN)。

ただ、リファラ(document.referrer)のように、自身のページ以外のURLもlocationオブジェクトのような情報を取得したいと思ったので、試しに作ってみました。正規表現使ったらもっと簡素にできるかもしれませんが、地道に検索して抜き出して……という感じで作っていきました。

引数にURLやパスを入れるとlocationオブジェクトのようなオブジェクトを返す関数です。ついでに、GETパラメータもオブジェクトとして取得するようにしています(参考:JavaScriptでGETパラメーターを取得する – Qiita)。

試しに、node.jsで”http://amyu.localhost:9000/hogehoge/index.html?a=a&b&c=c#zzz”というURLにアクセスできるようにし、locationオブジェクトと今回作った関数を比較してみました。開発者ツールのコンソールでcopyコマンドを利用し、それをペーストした結果です。

順番が異なっているのでわかりづらいですが、あってるようです。

ところで、今回この関数を作るにあたって、相対URLでも絶対URLに変換したうえで取得するようにしよう。そうすればaタグに記述している相対URLの情報も取得できるし。と思って調べたらaタグのhrefプロパティを取得すれば相対URLを入れていても絶対URLで取得できるということが分かりました(参考:JavaScript – 相対URLを絶対URL(URI)に変換する方法について – Qiita)。

なんだ、そんな簡単に相対URLを絶対URLに変換できるんだー! と驚きました。ただ、ここで試しておくべきだったんです……。a要素のプロパティに『hostname』や『pathname』があるのかどうかということを……。そうです。上記みたいな関数を作らなくても、a要素のプロパティにあるようなんです……。さっき知りました……。

参考:Location – Web API インターフェイス | MDN

まだまだJavaScriptは知らないことがあると実感しました。