実際のアンダーラインとのスタイリングリンク

アンダースコアのスタイル方法を議論する前に、まず質問について考えてみましょう。アンダースコアを使用する必要がありますか？

グラフィックデザインでは、アンダースコアはしばしば十分に不十分であると考えられています。フォーカスを強調し、階層を構築し、タイトルを区別するより良い方法があります。

Butterickの「実用的なタイプセット」には明確な提案があります。

アンダースコアを使用する場合は、代わりに太字または斜体を使用してください。タイトルなどの特別な場合は、すべてのキャピタル、小さな首都の使用、またはフォントサイズの変更を検討することもできます。まだ信じていませんか？本、新聞、または雑誌を見つけることをお勧めします。このスタイルは、主にスーパーマーケットのタブロイドに関連付けられています。

しかし、ネットワーク環境は異なります。ハイパーリンクは、インターネットの決定的な特性です。彼らはインターネットの誕生から下線を引いてきました。これは一般に理解されている慣習であり、その意味は非常に明確であり、リンクを示すために強調されています。

ただし、多くの人気のあるWebサイトにはすでに不正な存在がありません。たとえば、ニューヨークタイムズ、ニューヨークマガジン、ワシントンポスト、ブルームバーグ、Amazon、Apple、Github、Twitter、Wikipedia。 GoogleのチーフデザイナーであるJon Wileyは、2014年に、検索結果ページからアンダースコアを削除するとクリーンな外観を作成できると説明しました。これらのサイトのほとんどは、Webの誕生以来、ブラウザのデフォルト設定であるわずかに異なる明るい青（＃0000EE）を保持していることは注目に値します。これはほとんどのユーザーに視覚的なヒントを提供しますが、WCAGアクセシビリティコンプライアンステストに合格するだけでは不十分な場合があります。

情報を伝えたり、アクションを示したり、迅速な応答を示したり、視覚要素を区別するための唯一の視覚的手段として色を使用することはできません。 - WCAG 2.1

WCAGは、リンクのために厳密にアンダースコアを必要としませんが、そうすることをお勧めします。 Color Blindユーザーは、リンクを認識できる必要があります。太字のフォントの重みを使用するなど、他の方法で区別できます。または、この老化した視覚アシスト機能を維持することもできます。しかし、私たちがアンダースコアを使用する場合、私たちはそれらがきれいに見えることを望んでいました。中デザイナーのマーシン・ウィチャーは、完璧なアンダースコアを次のように説明しています。

[…]目に見えるが、あまり目立たないが、人々はどのコンテンツがクリック可能であるかを認識させますが、過度に注意を引くことはありません。テキストから適切な距離にある必要があり、テキストの下に快適になり、下降する体でさえ同じスペースを占めているはずです。

従来、これを達成するには、いくつかのCSSトリックが必要です。

過去に使用したヒント

これは、すべての開発者が馴染みのあるトリックです： border-bottom 。 border-bottomを使用してアンダースコアをシミュレートすることにより、色と厚さを制御できます。これらの擬似的存在には1つの問題があります。テキストからの距離が大きすぎます。それらは、下降する本体の下にあります。この問題をline-heightを使用することで解決できますが、これは独自の問題を引き起こします。同様のテクノロジーはbox-shadowを利用しています。 Marcin Wicharyは、 background-imageを使用してアンダースコアをシミュレートする最も複雑なテクノロジーを開拓しました。これらはすべて便利なヒントですが、もはや必要ありません。

本物のアンダーラインスタイルを設定します

最終的に、2つの新しいCSSプロパティのおかげで、スタイルを犠牲にすることなくリンクを区別できます。

• text-underline-offset下線の位置を制御します。
• text-decoration-thicknessアンダースコア、オーバースコア、ストリケスルーの厚さを制御します。

WebKitブログによると：

また、両方のプロパティのfrom-fontを指定することもできます。これにより、使用するフォントファイル自体から関連するメトリック値が抽出されます。

UX Agency Clearleftは大胆に使用しています（Pseudo）は、カラフルなスタイルとのリンクへの人々の注意を明確に引き付けるために強調しています。これは、擬似的ではないものの例です。

 <code>a { text-decoration: none; border-bottom: #EA215A 0.125em solid; }</code>

この擬似的な存在数は、文字「Y」の下降する本体の下に明らかに位置していることに注意してください。

DevToolsを使用して、新しいCSSプロパティを使用して同じスタイルを真のアンダースコアに適用するのと同じ段落を次に示します。

 <code>a { text-decoration-color: #EA215A; text-decoration-thickness: .125em; text-underline-offset: 1.5px; }</code>

サンプルコードでEMユニットを使用したことに気付くでしょう。仕様では、厚さがフォントでスケーリングされるように、ピクセルの代わりに使用することを強くお勧めします。

これらのプロパティはSafariで公開されており、Firefox 70に表示されます。

Microsoft EdgeブラウザーがChromiumに移行すると、最終的にはtext-decoration-styleプロパティのクロスブラウザーサポートが得られます。これらの新しいプロパティを組み合わせて使用​​すると、さまざまな可能性が開かれます。

ただし、おそらくWeb上のアンダースコアの最大の改善は、開発者が何もしないと達成できることです。過去には、下降感は恵みからはほど遠いアンダースコアによって容赦なく遮断されていました。開発者は、背景色に合ったテキストシャドを適用することにより、この欠点を解決するために使用されていました。 text-decoration-skip-ink降下体の余地を残すためのより良い方法を提供します。

便利なことに、アンダースコアの新しいデフォルト値に設定されています。これは、アンダースコアの外観が改善され、ほとんどのWeb開発者がこのプロパティの存在をまだ知らないことを意味します。アンダースコアをグリフに渡すようにしたい場合は、このプロパティをnoneにも設定できます。

以上が実際のアンダーラインとのスタイリングリンクの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。