CSSでリンクを非表示にする方法はいくつかありますが、URLを完全に隠すことのできる2つの方法を見ていきます。 あなたのスカベンジャーハントやイースターエッグをあなたのサイトに作成したいのであれば、これはリンクを隠す興味深い方法です。
最初の方法は、ポインタイベントのCSSプロパティ値として "none"を使用することです。 もう1つは、単にページの背景に合わせてテキストを塗りつぶすことです。
いずれの方法でも、ソースコードを検索する際にリンクが完全に消えないようにすることはできません。 しかし、訪問者はそれを見るためのシンプルで簡単な方法を持っていないし、初心者の訪問者はリンクを見つける方法の手がかりを持っていません。
注：外部スタイルシートをリンクする方法についての指示がある場合は、これらの手順は後で説明するものではありません。 「 外部スタイルシートとは 」を参照してください。 代わりに。
ポインタイベントを無効にする
URLを隠すために使用できる最初の方法は、リンクを何もしないことです。 マウスがリンク上を移動すると、URLが指しているものは表示されず、クリックすることはできません。
HTMLを正しく書く
Webページの1つ、ハイパーリンクが次のようになっていることを確認してください：
ThoughtCo.comもちろん、 「https://www.thoughtco.com/」は、非表示にしたい実際のURLを指し示す必要があり、 ThoughtCo.comはリンクを説明する好きな単語やフレーズに変更できます。
ここでのアイデアは、リンクを効果的に隠すために、アクティブなクラスが以下のCSSで使用されるということです。
このCSSコードを使用する
CSSコードでは、アクティブなクラスに対処し、リンククリック時のイベントが「なし」であることをブラウザに説明する必要があります。
.active {ポインタイベント：なし; カーソル：デフォルト; }このメソッドはJSFiddleで実際に動作しています。 そこでCSSコードを削除してからデータを再実行すると、リンクが突然クリック可能で使用可能になります。 これは、CSSが適用されていない場合、リンクが正常に動作するためです。
注：ユーザーがページのソースコードを表示すると、リンクが表示され、上に示したようにコードがどこにあるかを正確に知ることができます。コードはまだ残っています。
リンクの色を変更する
通常、Webデザイナーは、ハイパーリンクを背景と異なる色にして、訪問者が実際にそれらを見て、どこに行くかを知ることができます。 ただし、ここではリンクを非表示にするため、ページの色に合わせて色を変更する方法を見てみましょう。
カスタムクラスを定義する
上記の最初のメソッドから同じサンプルを使用する場合は、クラスを必要なものに変更するだけで、特別なリンクだけを非表示にすることができます。
クラスを使用せずに、下からすべてのリンクにCSSを適用すると、それらのすべてが消えてしまいます。 これは私たちがここで行ったことではないので、カスタムhidemeクラスを使用しているこのHTMLコードを使用します。
ThoughtCo.com使用する色を見つける
リンクを非表示にする適切なCSSコードを入力する前に、どの色を使用するかを把握する必要があります。 白や黒のような堅実な背景がすでにあれば、それは簡単です。 しかし、他の特殊な色も正確である必要があります。
たとえば、背景色の値が16進数のe6ded1である場合は、ページが消えるようにするためにCSSコードが正しく機能することが必要です。
これらの「カラーピッカー」または「スポイト」ツールがたくさんあります。そのうちの1つは、ChromeブラウザのColorPickスポイラーと呼ばれています。 それを使用して、Webページの背景色をサンプリングして、16進数の色を取得します。
CSSをカスタマイズして色を変更する
リンクが必要な色があるので、CSSコードを書くには、上のカスタムクラスの値を使用します。
.hideme {color：＃e6ded1; }背景色が白や緑のように単純な場合は、前に＃記号を付ける必要はありません：
.hideme {color：white; }このJSFiddleのこのメソッドのサンプルコードを参照してください。