太字を使用せずに選択したオプションまたはリンクを強調表示するには、どのような方法がありますか？
選択したオプションを<strong>または<b>を使用せずにテキスト/リンク形式で強調表示する最良の方法は何ですか？
下線は既にリンクされているため使用できません。したがって、下線はクリック可能であることを示すために使用されています。
<em>やイタリック体は、あまりにも微妙でサイトのデザインとは関係がないと思うので、使用したくありません。
最良の方法は太字を使用することですが、テキスト選択を太字にすると、テキストのサイズが大きくなり、特定の場合にボックスのレイアウトが変更されます。次に例を示します。
現在、「エピソード」で並べ替えられているため、「エピソード」は太字で「治療日」に下線が引かれています。「エピソード」で表示していることがすぐにわかり、「治療日」での順序に変更できます。
ただし、これを行うと、「Treatment Days」が太字になり、大きくなるため、テキストの行を次の行に折り返します。
見た目が悪いだけでなく、「エピソード」も押し下げられ、ユーザーにとっては少し混乱したりぎこちなくなったりすることがあります。
このボックスをより適切に表示するにはどうすればよいですか？ボックス自体は非常に小さいことに注意してください（幅/高さは変わる可能性があります-これは<table>のセルであり、その幅と高さはテーブルの行と列に依存します）。これは「一般的な」サイズかもしれません。箇条書きのようなものなど、スペースが増えると使用できなくなる可能性があります。
編集： @mervinjのアイデアと回答の後、色で遊んだ-ボックス自体が非常に暗く、背景に対してさまざまな色がうまく表示されなかったため、苦労しました。だから私はこれを思いつきました：<span>の背景色とテキストの色を変更して、どちらが選択され、どれが選択可能かを示します。
これは理にかなっていますか？ 「よさそう」ですか。少し派手に見えます。どの領域が「選択されている」か、どの領域が選択されていないかが一目でわかりますか？
編集2：と言って...私はこのように（中途半端な家）
MicrosoftのMetro UIが処理する方法で、選択したテキストに特定の明るい色を与え、残りをグレー表示にして、なぜそれをしないのですか。この方法では、テキストサイズは同じままですが、選択したメニュー項目が強調表示されます。
ウェブサイトで使用されている別の例
したがって、あなたの例では、次のようになります：
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
以下のサイトで色のコントラストの提案を確認してください
すべての提案で改善できることの1つは、3つの異なる要素の視覚的な違いです。
たとえば、3を見ると、3つの要素はそれぞれ異なるスタイルを持っているため、ヘッダーから2つのオプションをグループ化することは困難です。
さらに、「治療日」のワードラップ（特に「日」は大文字で始まるため）により、「治療」、「日」、「エピソード」はすべて異なるオプションであるとユーザーが考える問題に遭遇する可能性があります。
以下の例では、オプションをインデントすることでグループ化することにしました。次に、上部は色付きの選択に基づいており、Bは淡色表示の非選択に、Cはチェックシンボルに基づいています。
Cが目で最も魅力的なものであることを確認することはかなり明白だと思います。
一部の人にとっては面白いように見えるかもしれませんが（他の人にとってはまったく面白いとは言えません）、 Gestalt Principles に少し慣れることをお勧めします。デザインのページの。