下線を引いた文字を切り取らずにエレガントなテキストを作成する

はじめに

この実験では、CSS を使って下線を引いた美しいテキストを作成する方法を学びます。text-shadow と background-image を linear-gradient と組み合わせることで、下線として機能するグラデーションを作成し、テキストが選択可能なままにすることができます。この手法は、text-decoration: underline よりも視覚的に魅力的な代替手段を提供します。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。

美しいテキストの下線

VM 内には既にindex.htmlとstyle.cssが用意されています。

下線を引いた文字が下線を切り取らないようにするには、text-shadowを 4 つの値で使用して、下線との交差部分を覆う太い影を作成します。text-shadowの色をbackgroundの色と一致させ、より大きなフォントに対してpx値を調整します。background-imageとlinear-gradient()とcurrentColorを使って実際の下線を作成します。background-position、background-repeat、background-sizeを設定して、グラデーションを正しい位置に配置します。::selection疑似クラスセレクタを使って、テキストの影がテキスト選択を妨げないようにします。この効果は本来text-decoration-skip-ink: autoとして実装されていますが、下線に対する制御が少ないことに注意してください。

以下はコードの例です。

<div class="container">
  <p class="pretty-text-underline">
    Pretty text underline without clipping descenders.
  </p>
</div>

.container {
  background: #f5f6f9;
  color: #333;
  padding: 8px 0;
}

.pretty-text-underline {
  display: inline;
  text-shadow:
    1px 1px #f5f6f9,
    -1px 1px #f5f6f9,
    -1px -1px #f5f6f9,
    1px -1px #f5f6f9;
  background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: 100% 1px;
}

.pretty-text-underline::selection {
  background-color: rgba(0, 150, 255, 0.3);
  text-shadow: none;
}

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080タブを更新してウェブページをプレビューできます。

まとめ

おめでとうございます！美しいテキストの下線の実験を完了しました。技術力を向上させるために、LabEx でさらに実験を行って練習してください。