昔々、OS Xが完成するずっと前（リリース当初でさえも）、MacでWebを閲覧したいと思っても、今のようにブラウザの選択肢が豊富だったわけではありませんでした。（リストに漏れているWebブラウザがありましたら、ご容赦ください！）
当時は、物事はもっとシンプルでした。必ずしも優れていたわけではありませんが、よりシンプルでした。10種類以上のブラウザから選ぶ必要があった時代は、iCab、Netscape、そしてMicrosoftのInternet Explorer（略してIE）の3種類だけでした。IEはプリインストールされており、数年前にAppleがSafariをリリースするまで、すべてのMacユーザーのデフォルトブラウザでした。
IEはHTMLとCSSの標準サポートに関して確かに問題を抱えていましたが、私が特に気に入った機能の一つはIEの「リンクアウトライン」機能でした。このシンプルな視覚的なフィードバック機構のおかげで、リンクをクリックしたタイミングと、どのリンクをクリックしたかが簡単に分かりました。リンクをクリックするとすぐに、クリックしたリンクの周りに色付きのボックスが表示されます。
このボックスはリンクをクリックしてから1秒ほどしか表示されませんでしたが、意図したリンクをクリックしたかどうかを確認するのに役立ちました。Safariを同じように動作させるには、以下の手順をカスタマイズしてください。
Safariにこの機能を追加するには、プログラムのカスタムCSS機能を使う必要があります。CSS は Cascading Style Sheets（カスケーディング・スタイル・シート）の略で、Webページ上のテキストや画像の表示方法を制御する方法です。CSSを使うと素晴らしいことが可能になりますが、それを使ったWebページの作成はかなり複雑になることもあります…しかし、今日やることは簡単なので、ご安心ください！
CSSを書く
まずSafariを終了し、お気に入りのテキストエディタ（例えばAppleのTextEdit、Bare Bones Softwareの無料アプリTextWrangler、Terminalの または vi など pico ）を起動します。新規ドキュメントを作成し、次の1行を挿入します。
:link:active, :visited:active { アウトライン: #C30000 実線 2px; } 完了したら、ファイルをすぐに見つけられる場所に保存してください。ただし、一日中眺めていなければならないような場所には保存しないでください。ファイル名は自由に付けてください。拡張子は .css にしてください。例えば、私のファイルは tweaks.css という名前で、ユーザーの Documents フォルダ内の Miscellaneous フォルダに保存しています。TextEdit を使用してファイルを編集する場合、拡張子に .css を付けようとすると、通常の「.txt」拡張子ではないことを警告するダイアログボックスが表示されます。「.css を使用」ボタンをクリックすることが非常に重要です。クリックしないと、次のステップに進むことができません。
CSSを実装する
次に、Safariを起動し、環境設定（Safari：環境設定）を開いて「詳細」をクリックします。スタイルシートのポップアップメニューをクリックし、「その他」を選択して、先ほど作成したファイルに移動します。完了すると、環境設定ダイアログボックスは次のようになります。
これで完了です！Webページを読み込んで、リンクをクリックしてホールドすると、リンクの周りに2ピクセル幅の赤いアウトラインが表示されます。SafariがカスタムCSSファイルを読み込み、すべてのページに適用しています。IEのようなリンクのアウトラインをお楽しみください。
もう少し詳しく知りたい方は、読み続けてください。
舞台裏
この仕組みを理解するために、CSSについて少し説明する必要があります。まず、CSS自体が非常に膨大であることを知っておく必要があります。CSSは基本的に、Webページ上のデータの表示を制御するためのプログラミング言語のようなものです。そのため、ここで詳しく説明することは現実的ではありません。CSSに興味があり、さらに詳しく知りたい場合は、World Wide Web Consortiumの役立つサイト集をご覧ください。私自身は、W3Schools.comのCSSチュートリアルを使って、基礎（私のCSSの知識はほぼこれだけです）を独学しました。簡単な導入として、上記で作成した1行のCSSファイルを分解してみましょう。
-
:link:active, :visited:active– このビットは、以下のCSSプロパティがどのオブジェクトに影響を及ぼすかを定義します。今回の場合、未訪問（最初の用語）と訪問済み（2番目の用語）の両方のハイパーリンクが対象となります。この:activeビットは、リンクがクリックされた場合にのみルールが適用されることを意味します。常にすべてのリンクの周囲にアウトラインを表示したくないでしょうから、この修飾子によって、現在クリックされているリンクにのみルールが適用されます。 -
{ outline: #C30000 solid 2px; }– これはリンクに設定する実際のCSSプロパティです。当然のことながら、 という名前で、outlineその名の通り、アウトラインの色、描画する線のスタイル、そして描画する線の太さの3つの値を取ります。今回の場合は、2ピクセルの太さの赤い実線です。
というわけで、これが使い方です。では、様々なオプションの意味や、なぜ「赤」が#C30000という奇妙な定義になっているのか、どうやって理解すればいいのでしょうか？まずは簡単な方、つまり色から説明しましょう。赤、黄、青などの色を指定できます。また、RGB値と呼ばれるものを使って色を指定することもできます。RGB値を使うと、表示される色をより細かく制御できます。Photoshop Elementsなどのグラフィックソフトなら、RGBカラーオプションが標準装備されているはずです。しかし、使いやすさとスピードを考えると、ColorTagGenという便利な無料ツールを使うのがおすすめです。このアプリは、OS X標準のカラーホイールを画面に表示するだけです。色を選ぶと、常に更新されるボックスでそのRGB値を確認できます。驚くほど便利です！
他の2つの値は、選択肢が非常に多いため、説明が難しいです。選択肢の内容はどうやって確認すればいいのでしょうか？ お気に入りのCSSリファレンスサイトを見つけて、調べてみましょう。チュートリアルと同様に、私はW3Schools.comのサイトを使用しました。実際には、この outline プロパティには3つの異なるCSSプロパティが（この順番で）組み合わされています。先ほど説明したoutline-color、使用する線の種類を制御するoutline-style、そして線の太さを設定するoutline-widthです（私のように、ピクセル単位で正確な値を指定することもできます）。
これらの設定を自由に組み合わせて試してみてください。例えば、次のコードを使うと、非常に太い青い点線のアウトラインを作成できます。
{ アウトライン: 青い点線の太線; } これは CSS の簡単な概要ですが、アウトラインを好みに合わせて微調整する方法がいくつか紹介されていると思います。
ちょっとおしゃれに
元の例では、新規リンクと既にアクセス済みのリンクの両方のアウトラインボックスを1行で定義していました。しかし、必ずしもそうする必要はありません。2行のファイルを作成すれば、リンクの種類ごとにアウトラインの色を変えることができます。
:link:active { アウトライン: #C30000 実線 2px; } :visited:active { アウトライン: #ADB2FF 実線 2px; } 2種類のリンクを分離することで、それぞれに異なる外観を持たせることができます。スタイルシートでこのコードを使用すると、既に訪問済みのリンクをクリックした場合は水色のボックス、新しいリンクをクリックした場合は赤いボックスが表示されます。線の種類と太さも簡単に変更できます。
CSSは本当に強力なツールです。少し手を加えるだけで、Safariのポップアップリンクのアウトラインを変更するだけでなく、様々なことが可能になります。さらに詳しく知りたい方は、W3.orgのサイトにあるいくつかのサイトをご覧ください。
