テキスト関連のCSSプロパティ
この記事ではテキスト関連のCSSプロパティについて説明します。
text-alignやtext-decoration、text-transformプロパティについて、利用用途や記述の仕方を学べます。
YouTube Video
プレビュー用のHTMLの作成
css-text.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Text-Related CSS Properties</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-text.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>Text-Related CSS Properties</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Typography (Text-Related)</h2>
20 </header>
21 <article>
22 <h3>text-align</h3>
23 <section>
24 <header><h4>text-align: left</h4></header>
25 <section class="sample-view">
26 <p class="text-align-left">This is left-aligned text.</p>
27 </section>
28 <header><h4>text-align: center</h4></header>
29 <section class="sample-view">
30 <p class="text-align-center">This is center-aligned text.</p>
31 </section>
32 <header><h4>text-align: right</h4></header>
33 <section class="sample-view">
34 <p class="text-align-right">This is right-aligned text.</p>
35 </section>
36 <header><h4>text-align: justify</h4></header>
37 <section class="sample-view">
38 <p class="text-align-justify">This is justified text, meaning it will be spaced so that the left and right edges are aligned evenly.</p>
39 </section>
40 </section>
41 </article>
42 <article>
43 <h3>text-decoration</h3>
44 <section>
45 <header><h4>text-decoration: underline</h4></header>
46 <section class="sample-view">
47 <p class="text-decoration-underline">This text has an underline.</p>
48 </section>
49 <header><h4>text-decoration: overline</h4></header>
50 <section class="sample-view">
51 <p class="text-decoration-overline">This text has an overline.</p>
52 </section>
53 <header><h4>text-decoration: line-through</h4></header>
54 <section class="sample-view">
55 <p class="text-decoration-line-through">This text has a line-through.</p>
56 </section>
57 <header><h4>text-decoration: underline; text-decoration-color: red; text-decoration-style: wavy; text-decoration-thickness: 2px;</h4></header>
58 <section class="sample-view">
59 <p class="text-decoration-custom-underline">This text has a custom underline (color and style).</p>
60 </section>
61 </section>
62 </article>
63 <article>
64 <h3>text-transform</h3>
65 <section>
66 <header><h4>text-transform: none</h4></header>
67 <section class="sample-view">
68 <p class="text-transform-none">This is no transformation applied.</p>
69 </section>
70 <header><h4>text-transform: capitalize</h4></header>
71 <section class="sample-view">
72 <p class="text-transform-capitalize">this is a sentence in lowercase but will be capitalized.</p>
73 </section>
74 <header><h4>text-transform: uppercase</h4></header>
75 <section class="sample-view">
76 <p class="text-transform-uppercase">This text will be transformed to uppercase.</p>
77 </section>
78 <header><h4>text-transform: lowercase</h4></header>
79 <section class="sample-view">
80 <p class="text-transform-lowercase">THIS TEXT WILL BE TRANSFORMED TO LOWERCASE.</p>
81 </section>
82 </section>
83 </article>
84 </main>
85</body>
86</html>タイポグラフィ（テキスト関連）
text-alignプロパティ
1/* Text align examples */
2.text-align-left {
3 text-align: left; /* Align text to the left */
4}
5
6.text-align-center {
7 text-align: center; /* Center align text */
8}
9
10.text-align-right {
11 text-align: right; /* Align text to the right */
12}
13
14.text-align-justify {
15 text-align: justify; /* Justify text (aligns text to both left and right edges) */
16}text-alignは、CSSでテキストやインライン要素の水平方向の配置を指定するためのプロパティです。通常、段落やヘッディングのテキストを左右・中央に整列させる際に使われます。特にWebページのレイアウトやテキストの整形において重要な役割を果たします。
text-alignで使用できる主な値
left（左揃え）
1p {
2 text-align: left;
3}leftはテキストを左揃えにします（これは多くの言語でのデフォルトの整列方法です）。
right（右揃え）
1p {
2 text-align: right;
3}rightはテキストを右揃えにします。アラビア語やヘブライ語などの右から左へ書かれる言語で特に有効です。
center（中央揃え）
1p {
2 text-align: center;
3}centerはテキストを中央揃えにします。タイトルや見出しなどに頻繁に使われます。
justify（両端揃え）
1p {
2 text-align: justify;
3}justifyは行の左右両端を均等に揃え、整列した印象を与えます。新聞や雑誌のようなレイアウトで使われます。
start（開始位置揃え）
1p {
2 text-align: start;
3}startはテキストの開始位置を基準に揃えます。左から右に書かれる言語の場合、左揃えと同じ動作をします。
end（終了位置揃え）
1p {
2 text-align: end;
3}endはテキストの終了位置を基準に揃えます。左から右に書かれる言語では右揃えと同じ動作になります。
text-alignの使い方と活用例
中央揃えを使ったタイトル
- ウェブページや文書のタイトルに中央揃えをよく使います。見栄えがよく、視覚的にバランスの取れたデザインになります。
段落を左揃えまたは右揃え
- テキスト段落は通常、左揃えがデフォルトですが、特定のデザイン上では右揃えや中央揃えを使うことがあります。
justifyで均等に揃える
justifyで両端揃えにすると、テキストの各行が左右両端に均等に揃います。新聞や雑誌スタイルのレイアウトに便利です。
まとめ
text-alignは、テキストやインライン要素を水平方向に整列させるためのCSSプロパティです。- 左揃え、右揃え、中央揃え、両端揃えなど、さまざまなレイアウトに対応できます。
- レイアウトやデザインの目的に応じて適切な整列を選択することが、読みやすく美しいデザインを実現するポイントです。
text-alignを使って、テキストの配置をデザインの一部として有効に活用しましょう。
text-decorationプロパティ
1/* Text decoration examples */
2.text-decoration-underline {
3 text-decoration: underline;
4}
5
6.text-decoration-overline {
7 text-decoration: overline;
8}
9
10.text-decoration-line-through {
11 text-decoration: line-through;
12}
13
14.text-decoration-custom-underline {
15 text-decoration: underline;
16 text-decoration-color: red;
17 text-decoration-style: wavy;
18 text-decoration-thickness: 2px;
19}text-decorationプロパティは、テキストに下線や上線、打ち消し線、オーバーライン、またはカスタムスタイルの線を適用するためのCSSプロパティです。このプロパティを使用することで、テキストのスタイルをより装飾的にしたり、視覚的に強調したりすることができます。
説明:
- **
text-decoration-underline**クラスはテキストに下線を表示します。 - **
text-decoration-overline**クラスはテキストの上に線を引きます。 - **
text-decoration-line-through**クラスはテキストに打ち消し線を引きます。 - **
text-decoration-custom-underline**クラスは下線の色、スタイル、太さをカスタマイズした例です。
text-decorationの主な値
none
1p {
2 text-decoration: none;
3}noneを指定するとテキストが装飾されなくなります。リンクの下線を消したい場合などに使用します。
underline
1p {
2 text-decoration: underline;
3}underlineを指定するとテキストに下線が引かれます。リンクや強調したい部分などに使えます。
overline
1p {
2 text-decoration: overline;
3}overlineを指定するとテキストの上に線が引かれます。見た目を変える際や、特別な装飾に使えます。
line-through
1p {
2 text-decoration: line-through;
3}line-throughを指定するとテキストに打ち消し線が引かれます。訂正を表す場合に使われます。
blink（点滅）
blinkはテキストを点滅させる効果を持つ値ですが、現在はほとんどのブラウザでサポートされていないため、実際には使用されません。
text-decorationの詳細設定
text-decorationは、以下のように細かい設定も可能です：
text-decoration-color
1p {
2 text-decoration: underline;
3 text-decoration-color: red;
4}text-decoration-colorプロパティで下線や打ち消し線の色を指定できます。デフォルトではテキストの色と同じになりますが、異なる色にすることで、視覚的なアクセントを加えることができます。
text-decoration-style
1p.dshed {
2 text-decoration: underline;
3 text-decoration-style: solid;
4}
5p.double {
6 text-decoration: underline;
7 text-decoration-style: double;
8}
9p.dotted {
10 text-decoration: underline;
11 text-decoration-style: dotted;
12}
13p.dashed {
14 text-decoration: underline;
15 text-decoration-style: dashed;
16}
17p.wavy {
18 text-decoration: underline;
19 text-decoration-style: wavy;
20}text-decoration-styleプロパティで装飾線のスタイルを指定できます。値には以下のようなものがあります。solid（デフォルト、実線）double（二重線）dotted（点線）dashed（破線）wavy（波線）
**text-decoration-thickness
1p {
2 text-decoration: underline;
3 text-decoration-thickness: 2px;
4}text-decoration-thicknessプロパティで装飾線の太さを指定できます。例えば、2pxや0.1emなどの単位で調整できます。
まとめ:
- **
text-decoration**は、テキストに装飾的な線を追加するためのプロパティで、下線や打ち消し線などを設定できます。 text-decoration-color、text-decoration-style、text-decoration-thicknessを使うことで、より詳細なカスタマイズが可能です。- リンクや重要なテキストの強調、またはデザイン要素として頻繁に利用されます。
text-decorationを使うことで、テキストにさりげないアクセントや強調を加えることができます。
text-transformプロパティ
1/* Text transform examples */
2.text-transform-none {
3 text-transform: none;
4}
5
6.text-transform-capitalize {
7 text-transform: capitalize;
8}
9
10.text-transform-uppercase {
11 text-transform: uppercase;
12}
13
14.text-transform-lowercase {
15 text-transform: lowercase;
16}text-transformは、CSSでテキストの大文字・小文字を変換するためのプロパティです。このプロパティを使うことで、HTMLで指定されたテキストの表示形式をコントロールすることができ、ユーザーが入力したテキストや既存のテキストの大文字・小文字を自動的に変換できます。
説明:
- **
text-transform-none**クラスは元のテキストを変えずに表示します。 - **
text-transform-capitalize**クラスは各単語の頭文字を大文字に変換します。 - **
text-transform-uppercase**クラスはテキスト全体を大文字に変換します。 - **
text-transform-lowercase**クラスはテキスト全体を小文字に変換します。
text-transformの主な値
none
1p {
2 text-transform: none;
3}noneを指定するとテキストは変換されません。
capitalize
1/* "this is a sentence" -> "This Is A Sentence" */
2p {
3 text-transform: capitalize;
4}capitalizeを指定すると各単語の最初の文字を大文字に変換します。単語の区切りは、スペースや句読点などで認識されます。
uppercase
1/* "hello world" -> "HELLO WORLD" */
2p {
3 text-transform: uppercase;
4}uppercaseを指定するとテキスト全体を大文字に変換します。
lowercase
1/* "HELLO WORLD" -> "hello world" */
2p {
3 text-transform: lowercase;
4}lowercaseを指定するとテキスト全体を小文字に変換します。
full-width
full-widthを指定するとテキストを全角文字に変換します。これは、通常、漢字やかなを扱う際の特別なスタイルで使用されますが、サポートするブラウザは少ないです。
まとめ:
- **
text-transform**は、テキストの大文字・小文字を変更するための便利なCSSプロパティです。 - 見出しやナビゲーションメニュー、フォームのテキストなどで、視覚的な統一感を持たせるためによく使われます。
- ユーザーの入力に関係なく、特定のスタイルでテキストを表示したい場合に有効です。
このプロパティを使うことで、見た目の統一性を保ちつつ、テキストを簡単に操作することができます。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。