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

はじめに

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/BasicStylingGroup -.-> css/text_styling("Text Styling") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/IntermediateStylingGroup -.-> css/pseudo_elements("Pseudo-elements") subgraph Lab Skills css/selectors -.-> lab-35231{{"美しいテキストの下線"}} css/colors -.-> lab-35231{{"美しいテキストの下線"}} css/text_styling -.-> lab-35231{{"美しいテキストの下線"}} css/margin_and_padding -.-> lab-35231{{"美しいテキストの下線"}} css/display_property -.-> lab-35231{{"美しいテキストの下線"}} css/positioning -.-> lab-35231{{"美しいテキストの下線"}} css/backgrounds -.-> lab-35231{{"美しいテキストの下線"}} css/pseudo_elements -.-> lab-35231{{"美しいテキストの下線"}} end

美しいテキストの下線

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でさらに実験を行って練習してください。