コード表示と引用関連のCSSプロパティ
この記事ではコード表示と引用関連のCSSプロパティについて説明します。
quotesやuser-selectなどのコード表示と引用関連のCSSプロパティについて、利用用途や記述の仕方を学べます。
YouTube Video
プレビュー用のHTML
css-code-quotation.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>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-code-quotation.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Code Display And Quotations</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Code Display And Quotations Related Properties</h2>
20 </header>
21 <article>
22 <h3>white-space</h3>
23 <section>
24 <header><h4>white-space: normal</h4></header>
25 <section class="sample-view">
26 <p class="white-space-normal">This is an example with multiple spaces. The spaces will be collapsed.</p>
27 </section>
28 <header><h4>white-space: nowrap</h4></header>
29 <section class="sample-view">
30 <p class="white-space-nowrap">This is an example with no line breaks. The text will not wrap.</p>
31 </section>
32 <header><h4>white-space: pre</h4></header>
33 <section class="sample-view">
34<p class="white-space-pre">This is an
35 example with multiple
36 spaces and
37 line breaks.</p>
38 </section>
39 <header><h4>white-space: pre-wrap</h4></header>
40 <section class="sample-view">
41<p class="white-space-pre-wrap">This is an
42 example with multiple
43 spaces and
44 line breaks. The text will wrap when it reaches the edge.</p>
45 </section>
46 </section>
47 </article>
48 <article>
49 <h3>overflow-wrap</h3>
50 <section>
51 <header><h4>overflow-wrap: normal</h4></header>
52 <section class="sample-view">
53 <section class="overflow-wrap-example">
54 <p class="overflow-wrap-normal">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
55 </section>
56 </section>
57 <header><h4>overflow-wrap: break-word</h4></header>
58 <section class="sample-view">
59 <section class="overflow-wrap-example">
60 <p class="overflow-wrap-break-word">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
61 </section>
62 </section>
63 </section>
64 </article>
65 <article>
66 <h3>quotes</h3>
67 <section>
68 <header><h4>quotes: "(" ")"</h4></header>
69 <section class="sample-view">
70 <p>Here's an example of a quote: <q>CSS makes the web beautiful.</q></p>
71 </section>
72 <header><h4>quotes: "(" ")" "[" "]"</h4></header>
73 <section class="sample-view">
74 <p>Here's a nested quote: <q>He said, <q>CSS is powerful.</q></q></p>
75 </section>
76 </section>
77 </article>
78 <article>
79 <h3>user-select</h3>
80 <section>
81 <header><h4>user-select: auto</h4></header>
82 <section class="sample-view">
83 <p class="select-auto">This text is selectable.</p>
84 </section>
85 <header><h4>user-select: none</h4></header>
86 <section class="sample-view">
87 <p class="select-none">This text cannot be selected.</p>
88 </section>
89 <header><h4>user-select: all</h4></header>
90 <section class="sample-view">
91 <p class="select-all">All text will be selected at once.</p>
92 </section>
93 </section>
94 </article>
95 <article>
96 <h3>tab-size</h3>
97 <section>
98 <header><h4>tab-size: initial</h4></header>
99 <section class="sample-view">
100<pre>
101function example() {
102 console.log("Initial Tab size is 8");
103}
104</pre>
105 </section>
106 <section>
107 <header><h4>tab-size: 2</h4></header>
108 <section class="sample-view">
109<pre class="tab-size-2">
110function example() {
111 console.log("Tab size is set to 2");
112}
113</pre>
114 </section>
115 <header><h4>tab-size: 4</h4></header>
116 <section class="sample-view">
117<pre class="tab-size-4">
118function example() {
119 console.log("Tab size is set to 4");
120}
121</pre>
122 </section>
123 <header><h4>tab-size: 20px</h4></header>
124 <section class="sample-view">
125<pre class="tab-size-20px">
126function example() {
127 console.log("Tab size is set to 20px");
128}
129</pre>
130 </section>
131 </section>
132 </article>
133 <article>
134 <h3>text-indent</h3>
135 <section>
136 <header><h4>text-indent: 0</h4></header>
137 <section class="sample-view">
138 <p class="text-indent-0">This text has no indentation. The first line starts flush with the left margin.</p>
139 </section>
140 <header><h4>text-indent: 20px</h4></header>
141 <section class="sample-view">
142 <p class="text-indent-20px">This paragraph has a 20px indentation on the first line.</p>
143 </section>
144 <header><h4>text-indent: -10px</h4></header>
145 <section class="sample-view">
146 <p class="text-indent--10px">This paragraph has a negative indentation, pulling the first line to the left.</p>
147 </section>
148 <header><h4>text-indent: 10%</h4></header>
149 <section class="sample-view">
150 <p class="text-indent-10percent">This paragraph has a first-line indentation of 10% of the containing block's width.</p>
151 </section>
152 <header><h4>text-indent: -20px; margin-left:40px;</h4></header>
153 <section class="sample-view">
154 <p class="text-indent-with-margin">This is an example paragraph using a hanging indent. The second and subsequent lines are indented, while the first line is outdented.</p>
155 </section>
156 </section>
157 </article>
158
159 </main>
160</body>
161</html>コード表示と引用関連のCSSプロパティ
white-spaceプロパティ
1.white-space-normal {
2 white-space: normal;
3 border: 1px solid black;
4 padding: 10px;
5 width: 300px;
6}
7
8.white-space-nowrap {
9 white-space: nowrap;
10 border: 1px solid black;
11 padding: 10px;
12 width: 300px;
13}
14
15.white-space-pre {
16 white-space: pre;
17 border: 1px solid black;
18 padding: 10px;
19 width: 300px;
20}
21
22.white-space-pre-wrap {
23 white-space: pre-wrap;
24 border: 1px solid black;
25 padding: 10px;
26 width: 300px;
27}white-space は、要素内の空白や改行がどのように処理されるかを指定するための CSS プロパティです。デフォルトでは、HTML では複数の空白は1つの空白として扱われますが、white-space を使うことで、この挙動を変えることができます。
white-space の主な値
normalはデフォルト値で、複数の空白は1つにまとめられ、行の折り返しが自動的に行われます。nowrapを指定すると空白は1つにまとめられますが、行の折り返しが行われません。コンテンツは1行に表示されます。preを指定すると空白や改行がそのまま保持されます。行の折り返しも行われません。pre-wrapを指定すると空白や改行が保持され、行の折り返しが行われます。pre-lineを指定すると空白はまとめられますが、改行は保持され、行の折り返しも行われます。break-spacesを指定すると空白や改行を保持し、長い単語や空白部分での改行を許可します。
overflow-wrapプロパティ
1.overflow-wrap-example {
2 width: 200px;
3 border: 1px solid #000;
4}
5
6.overflow-wrap-normal {
7 overflow-wrap: normal;
8}
9
10.overflow-wrap-break-word {
11 overflow-wrap: break-word;
12}overflow-wrapは、以前は word-wrapとして知られていたプロパティで、単語がコンテナの幅を超えた場合にどのように処理するかを定義します。このプロパティを使用することで、テキストがコンテナの境界を超えてレイアウトを壊さないように、適切に単語を折り返すことができます。
この例では、normalの場合、長い単語がコンテナからはみ出し、横スクロールが発生しますが、break-wordを使用することで、長い単語を強制的に折り返すことができます。
プロパティの値
overflow-wrap には主に次の2つの値があります。
-
normalnormalはデフォルト値で、ブラウザは通常の単語の折り返し規則に従います。通常、単語はスペースやハイフンなどの分割可能な位置でのみ折り返されます。もし単語が非常に長い場合、コンテナの幅を超えてしまい、レイアウトが崩れることがあります。 -
break-wordbreak-wordは単語の長さにかかわらず、必要であれば強制的に改行を挿入し、テキストを次の行に折り返します。これにより、長い単語が原因でコンテナのレイアウトが崩れるのを防ぐことができます。break-wordを指定すると、スペースやハイフンがない場所でも単語を途中で折り返し、画面幅に収まるように表示されます。特にURLや非常に長い単語がある場合に役立ちます。
overflow-wrap と他のプロパティの違い
overflow-wrapと似た動作をするプロパティとして、word-breakとwhite-spaceがあります。
word-break との違い
word-breakは、単語全体をどのように扱うかを定義しますが、overflow-wrapは単語がコンテナに収まりきらない場合にだけ折り返しを発生させます。例えば、word-break: break-all;は、単語が長くなくても任意の位置で改行を行いますが、overflow-wrapはあくまで単語がコンテナに収まりきらない場合に限って改行します。
white-space との違い
white-spaceプロパティは、テキスト全体の改行とスペースの扱いを制御します。overflow-wrapとは異なり、white-spaceは改行やスペースを保持するかどうかに関するルールを設定しますが、単語の折り返しには直接影響しません。
例えば、white-space: nowrap;を使用すると、テキスト全体が一行に収められ、折り返されることがなくなります。一方、overflow-wrap は折り返しを制御するプロパティです。
実際の使いどころ
overflow-wrapは、次のようなシチュエーションで特に有効です。
- URL表示: 長いURLを表示する際、レイアウトが崩れるのを防げます。
- 技術用語: 連続した英単語や技術用語がコンテナの幅を超える場合に対応できます。
- レスポンシブデザイン: 小さな画面でも長いテキストが崩れないようにできます。
quotesプロパティ
1q {
2 quotes: "(" ")" "[" "]";
3}quotesプロパティは、引用符をカスタマイズするために使用されます。通常、<blockquote>や<q>要素の内容を囲む際に、自動で引用符が挿入されますが、quotesプロパティを使用することで、カスタムの引用符を指定できます。
この例では、外側の引用符として丸括弧((,))が使用されます。また、ネストされた引用符は角括弧([,])になります。
構文
1element {
2 quotes: [opening-quote closing-quote] [, opening-quote closing-quote] ...;
3}quotesプロパティには次のような値を指定できます。
none: 引用符を表示しません。- 一連の引用符: 開始と終了の引用符を指定します。最初のセットは外側の引用符で、2番目以降のセットはネストされた引用のためのものです。
quotes の主なポイント
quotes プロパティは、文章の引用に使われるクォートマークをカスタマイズするための便利なプロパティです。デザインや言語に応じた適切な引用符を設定することで、より洗練されたページ表現を実現できます。quotesプロパティを用いることで以下のような利点があります。
- 引用符をカスタマイズ: デフォルトの引用符の形を変えたり、特定のデザインに合わせた引用符を設定することができます。
- ネストされた引用にも対応: ネストされた引用に対して異なるセットの引用符を適用することができます。
- 国や言語によるカスタマイズ: 言語や国によって異なるスタイルの引用符を簡単に適用できるため、国際的なウェブサイトで有用です。
user-select プロパティ
1.select-auto {
2 user-select: auto;
3}
4
5.select-none {
6 user-select: none;
7}
8
9.select-all {
10 user-select: all;
11}-
user-selectプロパティは、ユーザーがテキストを選択できるかどうかを制御するために使用されるCSSプロパティです。このプロパティを使用することで、特定の要素やページ全体で、テキストがコピーされることを防いだり、逆に選択可能にすることができます。user-selectプロパティにallを指定すると、その要素全体が一度に選択されます。例えば、ユーザーがテキストフィールドやパラグラフをクリックすると、要素全体が一気に選択される効果があります。 -
ソースコードの一括選択にも利用できます。
-
この例では、最初の段落のテキストは選択可能ですが、2つ目の段落のテキストは選択できません。
select-allクラスでは、user-selectプロパティにallが適用されており、その要素全体が一度に選択されます。
構文
1element {
2 user-select: auto | none | text | all | contain;
3}user-selectプロパティには、次の値を指定できます。
auto: ブラウザのデフォルト動作を使用します。ほとんどの要素ではテキスト選択が許可されていますが、一部のインタラクティブな要素（ボタンやリンクなど）では選択が制限されることがあります。none: テキストの選択が完全に無効になります。ユーザーはその要素内のテキストを選択できなくなります。text: 要素内のテキストのみ選択可能にします。all: 要素全体が一度に選択されます。部分的な選択ではなく、要素全体がまとめて選択されます。contain: 一部ブラウザでのみサポートされています。クリックした場所にある要素だけを選択可能にします。
対応ブラウザ
user-select プロパティは、ほとんどのモダンなブラウザでサポートされています。ただし、一部のブラウザではベンダープレフィックス（例: -webkit-user-select）が必要になる場合があります。
- Chrome: サポート
- Firefox: サポート
- Safari: サポート（
-webkit-プレフィックスが必要） - Edge: サポート
- Internet Explorer: サポートされていない
主な使用場面
user-selectプロパティを用いることで以下のような利点があります。
- UI要素: クリックやドラッグの操作に干渉しないようにテキスト選択を無効にできます。
- テキストコピーの防止: 特定の要素でテキストの選択やコピーを防ぐことができます。
- フォームやインタラクティブ要素: テキストの選択が不要なインタラクティブな要素に適用して、ユーザー体験を向上させることができます。
まとめ
user-selectプロパティは、ウェブページ上でのテキストの選択を柔軟に制御できる便利なCSSプロパティです。ユーザーが誤って不要なテキストを選択してしまう場面を防いだり、逆に一度に全体を選択できるようにするなど、さまざまなインタラクションに対応できます。
tab-size プロパティ
1.tab-size-2 {
2 tab-size: 2;
3}
4
5.tab-size-4 {
6 tab-size: 4;
7}
8
9.tab-size-20px {
10 tab-size: 20px;
11}tab-sizeプロパティは、タブ文字のスペースをカスタマイズするためのプロパティです。デフォルトではタブ幅は通常 8スペースに設定されていますが、tab-sizeを使用することで任意の値に変更可能です。
構文
1element {
2 tab-size: length | number;
3}tab-sizeプロパティには、次の種類の値を指定できます。
number: タブ文字の幅を文字数で指定します。整数または小数を指定できます。length: タブ文字の幅を長さの単位（px, em など）で指定します。
注意点
-
tab-sizeは、主にモノスペースフォントと使用するのが一般的です。プロポーショナルフォントと併用すると、タブの幅が不均一になる可能性があります。 -
文字数を指定する場合、異なるデバイスでのスケーリングに注意してください。
まとめ
tab-sizeプロパティを使用すると、コードやタブ文字を表示する際の柔軟性が向上します。開発者として、タブ幅を適切に設定することで、コードの可読性やデザインの一貫性を確保することができます。
text-indent プロパティ
1p.text-indent-0 {
2 text-indent: 0;
3}
4
5p.text-indent-20px {
6 text-indent: 20px;
7}
8
9p.text-indent--10px {
10 text-indent: -10px;
11}
12
13p.text-indent-10percent {
14 text-indent: 10%;
15}
16
17p.text-indent-with-margin {
18 text-indent: -20px;
19 margin-left: 20px;
20}text-indentプロパティは、ブロック要素内の最初の行のテキストを、指定された距離だけインデント（字下げ）するために使用します。このプロパティを使うことで、段落の先頭行だけをスタイリングすることができます。
構文
1element {
2 text-indent: length | percentage;
3}text-indentプロパティには、次の種類の値を指定できます。
length: インデントを長さの単位（px, em など）で指定します。percentage: コンテナ要素の幅に基づいた割合でインデントを指定します。
注意点
text-indentはブロック要素にのみ適用されます。インライン要素に対しては効果がありません。
まとめ
text-indentは、シンプルながらも強力なプロパティであり、読みやすいテキストデザインを構築するための重要なツールです。基本的な使い方をマスターするだけでなく、応用例や注意点を理解することで、より効果的にスタイリングを行うことができます。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。