CSS - テキスト

こんにちは、将来のウェブ開発者さんたち！今日は、CSSのテキストプロパティの素晴らしい世界に飛び込んでみましょう。あなたの近所の親切なコンピュータ教師として、この旅を案内するのが楽しみです。自転車に乗るのを学ぶのと同じように、CSSをマスターするには練習が必要ですが、楽しい promiseします！

CSS テキスト - テキストカラー

まずはカラフルなことを始めましょう！CSSでは、colorプロパティを使って簡単にテキストの色を変更できます。まるで言葉に魔法の絵の具を塗っているようなものです！

p {
color: blue;
}

この簡単な一行で、すべての段落のテキストが青色になります。でも、まだあります！色の名前、HEXコード、RGB値を使うこともできます：

h1 {
color: #FF5733; /* 明るいオレンジのHEXコード */
}

span {
color: rgb(50, 205, 50); /* ライムグリーンのRGB値 */
}

CSS テキスト - テキストアラインメント

次に、テキストのアラインメントについて話しましょう。本棚に本を並べるのと同じように、左に並べる、右に並べる、または中央に揃えることができます。

.left-align {
text-align: left;
}

.right-align {
text-align: right;
}

.center-align {
text-align: center;
}

.justify-align {
text-align: justify;
}

justify値は特に興味深いです。テキストを行全体に均等に広げます。新聞の栏のように並べます。

CSS テキスト - 垂直アラインメント

垂直アラインメントは少し難しいですが、心配しないでください！これはインラインまたはテーブルセル要素で最もよく使われます。

img {
vertical-align: middle;
}

td {
vertical-align: top;
}

このプロパティはtop、middle、bottom、sub、super、そして特定の長さ値など、さまざまな値を取ることができます！

CSS テキスト - 方向

私たちの地球村里では、右から左に読む言語を扱う必要があります。そこで便利なdirectionプロパティが登場します：

.arabic-text {
direction: rtl; /* 右から左 */
}

.english-text {
direction: ltr; /* 左から右 */
}

CSS テキスト - テキスト装飾

テキストに少しの風情を加えたいですか？テキスト装飾があなたの友です！言葉に装身具を付けるようなものです。

.underline {
text-decoration: underline;
}

.overline {
text-decoration: overline;
}

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

.no-decoration {
text-decoration: none;
}

プロティップ：リンクのデフォルトの下線を削除するには、text-decoration: none;を使ってください！

CSS テキスト - テキスト装飾スキップ

このプロパティは、テキスト装飾を適用する際にスキップすべきテキストの部分を決定します。

p {
text-decoration: underline;
text-decoration-skip: spaces;
}

これはテキストを下線にしますが、スペースをスキップしてより洗練された見た目にします。

CSS テキスト - テキスト装飾スキップインク

これは楽しいものです！テキスト装飾が「インク」(すなわちテキストそのもの)の上に描かれるか下に描かれるかを決定します。

p {
text-decoration: underline;
text-decoration-skip-ink: auto;
}

autoを指定すると、ブラウザがgやyなどの文字の下降部を智能的にスキップします。

CSS テキスト - テキスト変換

全角大文字で叫びたい、または小文字で囁きたいですか？テキスト変換があなたのものです！

.uppercase {
text-transform: uppercase;
}

.lowercase {
text-transform: lowercase;
}

.capitalize {
text-transform: capitalize;
}

capitalize値は特に便利です。各単語の最初の文字を大文字にします。

CSS テキスト - テキスト強調

テキスト強調は、テキストに強調マークを追加します。文字の上や下に小さな点や円を追加するようなものです。

.emphasis {
text-emphasis: filled;
text-emphasis-position: over right;
}

これは各文字の上と右に塗りつぶされた円を追加します。

CSS テキスト - テキストインデント

先生が最初の行をインデントするように言ったことを覚えていますか？CSSで自動的にできます！

p {
text-indent: 50px;
}

これは各段落の最初の行を50ピクセルインデントします。

CSS テキスト - 字間

字間は、文字間のスペースを調整するのに使います。文字に少しの個人的なスペースを与えるようなものです！

h1 {
letter-spacing: 5px;
}

これは見出しの各文字間に5ピクセルのスペースを追加します。

CSS テキスト - 単語間隔

字間と似ていますが、全体の単語間のスペースを調整します：

p {
word-spacing: 10px;
}

これは各単語間に10ピクセルの余分なスペースを追加します。

CSS テキスト - 白-space

white-spaceプロパティは、要素内の空白をどのように処理するかを決定します。

.nowrap {
white-space: nowrap;
}

.pre {
white-space: pre;
}

.pre-wrap {
white-space: pre-wrap;
}

nowrapはテキストが次の行に折り返されないようにします、preはHTMLに書かれた空白をそのまま保持します、pre-wrapは空白を保持しつつ折り返しを許可します。

CSS テキスト - 白-spaceの収束

このプロパティは、先ほど話したwhite-spaceプロパティの一部です。空白がどのように収束されるかを決定します。

CSS テキスト - テキストシャドー

テキストに深みを加えたいですか？テキストシャドーがお手伝いします！

h1 {
text-shadow: 2px 2px 5px red;
}

これは赤いシャドーを右に2ピクセル、下に2ピクセル、ぼかし5ピクセルで追加します。

CSS テキスト - 行ブレイク

line-breakプロパティは、単語内での行ブレイクを指定します。

p {
line-break: strict;
}

これは厳しい行ブレイクルールを適用します。

CSS テキスト - 単語ブレイク

line-breakと似ていますが、行末での単語のブレイクを指定します：

p {
word-break: break-all;
}

これは単語がどこででもブレイクされることを許可します。

CSS テキスト - 関連プロパティ

以下は、私たちが話し合ったすべてのプロパティの簡単な参照表です：

プロパティ	説明
color	テキストの色を設定します
text-align	テキストの水平アラインメントを指定します
vertical-align	インラインまたはテーブルセル要素の垂直アラインメントを設定します
direction	テキストの方向/書き方向を指定します
text-decoration	テキストに追加される装飾を指定します
text-decoration-skip	テキスト装飾が要素の内容のどの部分をスキップすべきかを指定します
text-decoration-skip-ink	オーバーラインとアンダーラインが文字の上升部と下降部をどのように跨ぐかを指定します
text-transform	テキストの大文字小文字を制御します
text-emphasis	テキストに強調マークを追加します
text-indent	テキストブロックの最初の行のインデントを指定します
letter-spacing	文字間のスペースを増減します
word-spacing	単語間のスペースを増減します
white-space	要素内の空白をどのように処理するかを指定します
text-shadow	テキストにシャドーを追加します
line-break	行のブレイクを指定します
word-break	単語のブレイクルールを指定します

そして、ここまでです！あなたは今、テキストをさまざまな方法でスタイル化するための知識を持ちました。CSSをマスターする鍵は練習です。それでは、実験をし、美しく読みやすいウェブページを作成してください。ハッピーコーディング！

Credits: Image by storyset