CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSテキストデコレーション

Webページのテキストをデザインするときは、テキストに装飾を追加することをお勧めします。たとえば、重要な作業に下線を追加したり、古いテキストに線を追加したりできます。

そこで、CSS text-decorationプロパティが登場します。text-decorationプロパティを使用すると、テキストのブロック全体に表示される下線、上線、および線を追加できます。

このチュートリアルでは、例を使用して、text-decorationプロパティとその3つのサブプロパティを使用して、CSSのテキストブロックに装飾を追加する方法について説明します。このチュートリアルを読み終えると、text-decorationプロパティを使用してテキストを装飾するエキスパートになります。

CSSテキストデコレーション

下線、テキスト全体に表示される線、および上線を追加してテキストを装飾することは、Webページの主要なコンテンツに注意を引くための重要な方法です。

テキストに下線が引かれている場合、たとえば、下線が引かれているものは読む価値があることをユーザーに示します。さらに、テキストの装飾は、Webページでアクセス可能なエクスペリエンスを設計する上で重要な部分です。

これは、色だけのような視覚的インジケーターに依存することは、色覚異常のユーザーや同様の視覚障害を持つユーザーなど、すべてのユーザーがアクセスできるわけではないためです。下線、取り消し線、または上線を追加すると、テキストの一部が強調表示されていることにユーザーが気付く可能性が高くなります。

CSSでは、text-decorationの省略形プロパティを使用して、テキストに追加する装飾を指定できます。このプロパティは、他の3つのプロパティの省略形です。

  • text-decoration-line（必須）
  • text-decoration-color（オプション）
  • text-decoration-style（オプション）

text-decorationプロパティを使用するときにこれらのプロパティを組み合わせて、コードをより効率的にすることができます。それぞれを個別に指定する代わりに、次の構文を使用してテキスト装飾スタイルを定義できます。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

text-decoration: line color style;

text-decorationプロパティのスタイルを表示する特定の順序はありません。

text-decorationの省略形プロパティの基本がわかったので、それがどのように機能するかの例を見ていきましょう。このチュートリアルでは、独自のWebサイトを構築しようとしている地元のパン屋の例を使用します。

CSSテキスト装飾の例

私たちがサイトを開発している地元のパン屋は、各ページのタイトルを強調するように依頼しました。

たとえば、About ページ、タイトルAbout Us タイトルにユーザーの注意を引くために、下線を付ける必要があります。各タイトルには水色の単一の下線が必要であり、各行の幅は2pxである必要があります。次のコードを使用して、このようなタイトルを作成できます。

<html>

<h1>About Us</h1>

<style>

h1 {
	text-decoration: lightblue solid underline;
}

CSSテキストデコレーション 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

HTMLコードでは、テキストAbout Usを示す

タグを使用してヘッダーを定義しました。 Webページで。次に、CSSコードで、Webページ上のすべての

要素に適用されるルールを作成しました。このルールは、text-decorationプロパティを使用して、次のような下線を作成します。

  • 水色で表示されます（lightblueで示されます） ）
  • 1行あります（solidで示されます） ）
  • 下線スタイルを使用します（underlineで示されます） ）

これは、text-decorationプロパティを使用して作成されたアンダースコアの簡単な例です。それでは、text-decorationプロパティを構成する各プロパティについて見ていきましょう。

テキストデコレーションライン（text-decoration-line）

text-decoration-lineプロパティを使用すると、プロパティが適用されるテキストに表示される行のタイプを設定できます。このプロパティが受け入れる値は次のとおりです。

  • 下線：テキストのブロックの下に表示される線を作成します。
  • overline：テキストのブロックの上に表示される線を作成します。
  • line-through：テキストのブロックの中央に表示される取り消し線を作成します。
  • 点滅：スタイルが適用されているテキストを点滅させます（このスタイルは非推奨です）。

このプロパティを他のテキスト装飾なしで使用すると、黒の単線の下線が表示されます。

パン屋の例に戻って、このプロパティがどのように機能するかを説明しましょう。 Jefferson’s Family Bakeryと呼ばれるパン屋から、About Usのテキストのスタイルを設定するように依頼されたとします。 ページ。彼らは私たちに彼らのテキストの特定の部分に下線を引くように頼んだ。

text-decoration-lineプロパティを使用して、このタスクを実行できます。使用するコードは次のとおりです。 

<html>

<p>The Jefferson's Family Bakery, founded in 1899, is a family bakery that serves delicious baked goods to the people of Seattle, Washington. Our bakery is <span class="underline">most well-known for our bagels</span>, which have been reviewed highly by a number of local publications since we started selling them in 1950.

Today, Jeffersons employs ten people who work tirelessly to make the breads, rolls, and assorted baked goods enjoyed by our customers. If you're in the mood for a good bagel, bread, or baked cake, <span class="underline">come to Jeffersons</span>!</p>

<style>

.underline {
	text-decoration-line: underline;
}

CSSテキストデコレーション 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

コードを分解してみましょう。 HTMLコードでは、

タグで囲まれたテキストの段落を作成しました。

この段落の中には、ジェファーソンズファミリーベーカリーの説明があります。さらに、2つの用語—most well-known for our bagels とcome to Jeffersons -タグで囲まれます。このタグは、囲まれたテキストを段落の残りの部分から分離するために使用されます。

CSSコードでは、クラスunderlineを持つすべての要素に適用されるルールを定義します。 。したがって、この場合、すべてのタグは、定義したスタイルを使用します。これは、各タグもクラスunderlineに割り当てられているためです。 。定義したルールは、text-decoration-lineを使用して、強調表示するテキストに1つの黒い下線を追加します。

テキスト装飾色（text-decoration-color）

text-decoration-colorプロパティを使用すると、スタイルに適用されるテキスト装飾の色を定義できます。最後の例で定義した下線を緑色で表示したいとします。次のスタイルを使用してこれを実現できます。 

<html>

<p>The Jefferson's Family Bakery, founded in 1899, is a family bakery that serves delicious baked goods to the people of Seattle, Washington. Our bakery is <span class="underline">most well-known for our bagels</span>, which have been reviewed highly by a number of local publications since we started selling them in 1950.

Today, Jeffersons employs ten people who work tirelessly to make the breads, rolls, and assorted baked goods enjoyed by our customers. If you're in the mood for a good bagel, bread, or baked cake, <span class="underline">come to Jeffersons</span>!</p>

<style>

.underline {
	text-decoration-line: underline;
	text-decoration-color: green;
}

CSSテキストデコレーション 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

CSSコードに、値がgreenのtext-decoration-colorスタイルルールを追加しました。 。これにより、text-decoration-lineを使用して定義した下線の色が緑に設定されます。

また、線種を作成するために必要なtext-decoration-lineの値も指定しました。

テキスト装飾スタイル（text-decoration-style）

text-decoration-styleプロパティを使用すると、テキストのブロックにテキスト装飾を表示するスタイルを設定できます。 text-decoration-styleプロパティは、次のいずれかの値を受け入れます。

  • 実線：単一の線を作成します。
  • double：二重線を作成します。
  • 破線：破線を作成します。
  • 点線：点線を作成します。
  • 波状：波線を作成します。

パン屋の例に戻りましょう。パン屋から、About the Jeffersonsという見出しに点線の下線を追加するように依頼されたとします。 About Us ページ。この下線は水色で表示され、点線のスタイルを使用する必要があります。次のコードを使用して、この下線を作成できます。 

<html>

<h2>About the Jeffersons</h2>

<style>

h2 {
	text-decoration-line: underline;
	text-decoration-color: lightblue;
	text-decoration-style: dotted;
}

CSSテキストデコレーション 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

このコードでは、text-decoration-lineスタイルとtext-decoration-colorスタイルを使用して、下線を定義し、下線の色をそれぞれ水色に設定しました。次に、text-decoration-styleプロパティを使用して、アンダースコアのスタイルを点線に設定しました。

ハイパーリンクからアンダースコアを削除する

text-decorationプロパティは、通常、従来のHTMLリンクに表示される下線を削除するために使用されます。これは、text-decorationプロパティが値noneを受け入れるためです。 、要素に適用されているデフォルトのテキストスタイルを削除するために使用されます。

デフォルトでは、タグを使用してリンクを定義すると、下線が表示されます。ただし、すべてのWebサイトがリンクの下に下線を表示することを望んでいるわけではありません。

ジェファーソンズファミリーベーカリーのウェブサイトに、Contact Usというラベルの付いたハイパーリンクがあるとします。 、ページ/contact.htmlにリンクします 彼らのサイトで。ハイパーリンクのHTMLコードは次のとおりです。 

<a href="/contact.html">Contact Us</a>

このコンポーネントをレンダリングすると、次の応答が返されます。 CSSテキストデコレーション 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

ご覧のとおり、リンクは青色で下線付きで表示されます。この下線を削除したい場合は、次のコードを使用できます。

<html>

<a href="/contact.html">Contact Us</a>

<style>

a {
	text-decoration: none;
}

CSSテキストデコレーション 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

ご覧のとおり、2番目の例では、リンクの下にある下線が削除されています。 CSSコードでは、text-decoration：noneルールを使用し、それをすべてのタグに適用しました。これにより、適用される要素（この場合はすべてのタグ）からテキスト装飾が削除されます。

結論

テキスト装飾は、Webページ上の特定のテキストに注意を引き、テキストをより美しく見せるための1つの方法です。

CSS text-decorationプロパティとそれに関連するプロパティを使用すると、Webページ上のテキストのブロックで使用される装飾を定義できます。

このチュートリアルでは、例を参照して、text-decorationプロパティとそれに関連するプロパティを使用してWebページ上のテキストを装飾する方法について説明しました。これで、プロのWebデザイナーのようにテキストの装飾を開始するために必要な知識を身に付けることができます。


  1. CSSでのテキストのフォーマット

    CSSを使用すると、テキストをフォーマットして視覚的に魅力的なコンテンツを作成できます。次のプロパティは、CSSを使用してテキストのスタイルを設定するために使用されます。 色 このプロパティは、テキストの色を変更するのに役立ちます。 文字間隔 このプロパティは、文字間の間隔を設定するために使用されます。 行の高さ 線の高さは、このプロパティを使用して指定されます。 text-align テキストの水平方向の配置は、text-alignプロパティによって制御されます。 テキスト装飾 下線、取り消し線、または上線を引いてスタイルを設定するには、テキスト装飾を使用し

  2. CSSを使用したテキスト装飾

    CSS text-decorationプロパティは、選択した要素のテキストに装飾を適用するために使用されます。値として、ラインスルー、オーバーライン、アンダーラインなどを追加できます。これは、text-decoration-line、text-decoration-color、およびtext-decoration-styleの省略形です。 構文 text-decorationプロパティの構文は次のとおりです- Selector {    text-decoration: /*value*/ } 例 次の例は、CSSのテキスト装飾プロパティ-を示しています。 <!D