美しいテキストの下線

CSSCSSBeginner
今すぐ練習

This tutorial is from open-source community. Access the source code

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

この実験では、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.htmlstyle.cssが用意されています。

下線を引いた文字が下線を切り取らないようにするには、text-shadowを4つの値で使用して、下線との交差部分を覆う太い影を作成します。text-shadowの色をbackgroundの色と一致させ、より大きなフォントに対してpx値を調整します。background-imagelinear-gradient()currentColorを使って実際の下線を作成します。background-positionbackground-repeatbackground-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でさらに実験を行って練習してください。