ITコース CSS基礎 022_テキスト、フォント、リンク
テキスト
CSSテキスト制御は、Webページ上のテキスト情報をより良く表示し、Webページの視覚効果を向上させるのに役立ちます。
インデント
テキストの最初の行のインデントを設定するために使用されます。段落の最初の行のインデントシナリオに適しており、インライン要素での使用は避けてください。 プロパティは絶対値または相対値を受け入れることができます。絶対値の単位にはピクセル（px）、インチ（in）、センチメートル（cm）、ミリメートル（mm）などがあります。相対値の単位にはem、rem、vw、vhなどがあります。
例：
p { text-indent: 2em;}効果： 
書字方向
CSSの書字方向とは、テキストの配置方向を指し、水平、垂直、混合モードが含まれます。実際には、ページ上のブロックレベル要素の表示方向を設定します—上から下、右から左、または左から右。これがテキストの方向を決定します。
horizontal-tb: ブロックの流れが上から下へ。対応するテキスト方向は水平です。vertical-rl: ブロックの流れが右から左へ。対応するテキスト方向は垂直です。vertical-lr: ブロックの流れが左から右へ。対応するテキスト方向は垂直です。
例：
body { writing-mode: vertical-rl;}効果： 
書字方向を切り替えると、ブロックとインラインテキストの方向も変わります。horizontal-tb書字方向では、ブロックの方向は上から下への水平ですが、vertical-rl書字方向では、ブロックの方向は右から左への垂直です。したがって、ブロック次元は常にページの書字方向でのブロックの表示方向を指します。インライン次元は常にテキストの方向を指します。
この図は、水平書字方向での2つの次元を示しています。
この画像は、垂直書字方向での2つの次元を示しています。
テキスト方向
directionプロパティを使用して、テキストの読み取り方向を設定します。左から右（ltr）、右から左（rtl）。 多言語Webサイトに適しており、テキストの言語に基づいて読み取り方向を設定します。一部の言語（アラビア語など）は水平に書かれますが、右から左に書かれます。
例：
html { direction: rtl;}効果：
テキスト装飾
text-decorationプロパティを使用して、テキストの線装飾効果を設定します。
- none：線なし
- overline：上線
- underline：下線
- line-through：取り消し線
例：
<p style="text-decoration: none;">テキスト線なし</p><p style="text-decoration: overline;">上線があります</p><p style="text-decoration: underline;">下線があります</p><p style="text-decoration: line-through;">取り消し線があります</p>効果： 
テキスト配置
テキストの水平配置を設定します。
- left：テキスト左揃え、ほとんどの言語でデフォルト。
- center：テキスト水平中央揃え
- right：テキスト右揃え
- justify：テキスト両端揃え、各行間に余分なスペースを追加して埋めます。テキストの配置とコンテナ幅（短いテキスト、スペースの欠如、少ない行数、単一言語）により、場合によっては両端揃えの効果が見えにくいことがあります。
- justify-all（あまり一般的ではない）：justifyに似ていますが、行末だけでなく、行頭と行末の両方に余分なスペースを均等に分配します。
- start：ブラウザのテキスト方向に応じて、テキストが開始端（通常は左端）で揃えられることを示します。
- end：ブラウザのテキスト方向に応じて、テキストが終了端（通常は右端）で揃えられることを示します。
例：
<p style="text-align: left;">このテキストは左揃えです</p><p style="text-align: right;">このテキストは右揃えです</p><p style="text-align: center;">このテキストは中央揃えです</p>効果： 
行の高さ
line-heightプロパティを使用して、テキスト行間の高さを設定できます。フォントサイズとデザイン要件に基づいて行の高さを調整すると、可読性が向上します。
例：
<p>これは通常の行の高さです<br>これは通常の行の高さです</p><p style="line-height: 3;">この行の高さを見てください<br>この行の高さを見てください</p>効果： 
間隔
テキストコンテンツ間の間隔を設定します。
letter-spacingは文字、中国語文字、数字間の間隔を設定します。word-spacingは単語間の間隔（スペースの両側の文字）を設定します。
例：
<p style="letter-spacing: 10px;">私のテキスト間隔CSSを見てください</p><p style="word-spacing: 10px;">私の テキスト間隔 CSS 123を見てください</p>効果： 
改行
テキストの折り返し方法を制御します。
word-wrap：主に長い単語やURLの折り返し方法を制御するために使用され、英語のシナリオにより適しています。
normal（デフォルト）：通常の折り返し規則に従い、単語内での改行は許可されません。break-word：単語内での改行を許可し、長い単語やURLを強制的に折り返すことができます。
例：
.base{ background: #d7d8d9; width: 60px;}.example1{ word-wrap: normal;}.example2{ word-wrap: break-word;} <p class="base example1">改行の方法を見てください HelloCSS Hello-CSS</p> <p class="base example2">改行の方法を見てください HelloCSS Hello-CSS</p>効果： 
white-space：スペースや改行を含む、要素内の空白文字の処理方法を制御するために使用されます。
normal（デフォルト）：通常の空白処理、連続した空白文字を結合し、改行に基づいて折り返します。nowrap：テキストの折り返しを許可せず、改行を無視します。pre：空白文字を保持しますが、連続した空白文字は結合せず、テキストはソースコード形式で表示されます。pre-line：改行を保持し、連続した空白文字を結合し、他の空白文字は通常の規則に従って処理されます。pre-wrap：空白文字を保持し、連続した空白文字を結合し、改行を保持します。
例：
.base{ background: #d7d8d9; width: 60px;}.example1{ white-space: normal;}.example2{ white-space: nowrap;}.example3{ white-space: pre;} <p class="base example1">改行の方法を見てください HelloCSS Hello-CSS</p> <p class="base example2">改行の方法を見てください HelloCSS Hello-CSS</p> <p class="base example3">改行の方法を見てください HelloCSS Hello-CSS</p>効果： 
影
テキストに1つまたは複数（カンマ区切り）の影効果を追加して、テキストの可読性を高めたり、ユニークなデザイン効果を作成したりできます。
h-shadow：水平影の位置。正の値（右にオフセット）または負の値（左にオフセット）にできます。v-shadow：垂直影の位置。正の値（下にオフセット）または負の値（上にオフセット）にできます。blur：オプション。影のぼかし度を示し、値が大きいほどぼやけます。省略できます。color：影の色。具体的な色の値、キーワード、またはRGBA値にできます。
例：
<p style="text-shadow: 2px 2px black;">私の影を見てください</p><p style="text-shadow: 1px 1px 1px red;">私の影を見てください</p><p style="text-shadow: 3px 3px 5px darkgrey;">私の影を見てください</p><p style="text-shadow: 2px 2px 2px black, -2px -2px 2px white;">私の影を見てください</p>効果： 
変換
テキストの大文字小文字変換効果を制御するために使用されます。
none：デフォルト、元のテキストの大文字小文字を保持します。capitalize：各単語の最初の文字を大文字に変換します。uppercase：すべてのテキストを大文字に変換します。lowercase：すべてのテキストを小文字に変換します。
例：
<p style="text-transform: none;">変換方法を見てください hello CSS</p><p style="text-transform: capitalize;">変換方法を見てください hello CSS</p><p style="text-transform: uppercase;">変換方法を見てください hello CSS</p><p style="text-transform: lowercase;">変換方法を見てください hello CSS</p>効果： 
テキストオーバーフロー
CSSでは、overflowプロパティを使用してテキストのオーバーフローを処理できます。
- visible：テキストはオーバーフローせず、完全に表示されます。
- hidden：テキストがオーバーフローすると、非表示になります。
- scroll：テキストがオーバーフローすると、スクロールバーが表示され、ユーザーはスクロールしてすべてのコンテンツを表示できます。
- auto：テキストがオーバーフローすると、要素の幅と高さに基づいてスクロールバーを表示するかどうかを決定します。
例：
.base{ white-space: nowrap; background: #d7d8d9; width: 120px;}.example1{ overflow: visible;}.example2{ overflow: hidden;}.example3{ overflow: scroll;}.example4{ overflow: auto;} <p class="base example1">テキストコンテンツがオーバーフローするかどうかを見てください</p> <p class="base example2">テキストコンテンツがオーバーフローするかどうかを見てください</p> <p class="base example3">テキストコンテンツがオーバーフローするかどうかを見てください</p> <p class="base example4">テキストコンテンツがオーバーフローするかどうかを見てください</p>効果：
フォント
フォントの制御と定義方法は、Webデザインの重要な部分です。
フォントファミリー
font-familyプロパティを通じてフォントを定義します。font-familyは1つのフォントを指定できますが、複数の代替フォントを提供することをお勧めします。ブラウザは優先順位に従ってこれらのフォントを順番に試し、適切な利用可能なフォントが見つかるまで続けます。フォント名にスペース、特殊文字、または中国語文字が含まれている場合は、引用符で囲むことをお勧めします。Webフォントサービスを使用できますが、フォントの著作権に注意してください。
例：
<p style="font-family: Arial, sans-serif;">hello CSS hello CSS</p><p style="font-family: Gabriola; ">hello CSS hello CSS</p>効果：
サイズ
CSSでのフォントサイズはfont-sizeプロパティを使用して設定できます。 テキストフォントのサイズを設定するために使用されます。フォントサイズは絶対値または相対値を使用して指定できます。 絶対値を使用する場合、フォントサイズは固定され、画面解像度の変化に応じて変化しません。絶対値の単位には：ピクセル（px）、インチ（in）、センチメートル（cm）、ミリメートル（mm）などがあります。 相対値を使用する場合、フォントサイズは親要素のフォントサイズに対する相対値です。相対値の単位には：em、rem、vw、vhなどがあります。 キーワードを使用してフォントサイズを指定すると、可読性と一貫性が向上します。キーワードには：xx-small、x-small、small、medium、large、x-large、xx-largeがあります。
例：
body { font-size: 16px;}レスポンシブデザイン：
- レスポンシブデザインでのフォントサイズは、さまざまな画面サイズとデバイスで良好な読み取り体験を確保するために相対的である必要があります。
アクセシビリティ：
- フォントサイズがアクセシビリティ標準を満たすのに十分な大きさであることを確認してください。本文では少なくとも16pxのフォントサイズを使用することをお勧めします。
フォント単位の選択：
- 相対単位（em、rem、%）を使用すると、ブラウザで設定されたユーザーのフォントサイズの好みによりよく適応でき、Webサイトのアクセシビリティが向上します。
行の高さの設定：
- フォントサイズに基づいて適切に行の高さを設定して、テキストの可読性を向上させます。通常、行の高さはフォントサイズの1.4〜1.6倍に設定できます。
太さ
CSSでのフォントの太さはfont-weightプロパティを使用して設定できます。
normal：デフォルトのフォントの太さ。bold：太字フォント。bolder：親要素より太いフォント。lighter：親要素より細いフォント。- 数値：数値を使用してフォントの太さを設定します。数値の範囲は通常100〜900です。
例：
<div style="font-weight: normal;">デフォルトのフォントの太さ</div>
<div style="font-weight: bold;"> 太字フォント <div style="font-weight: bolder;">親要素より太いフォント</div></div>
<div style="font-weight: 700;"> 数値で太字にしたフォント <div style="font-weight: lighter;">親要素より細いフォント</div></div>効果： 
スタイル
CSSでのフォントスタイルはfont-styleプロパティを使用して設定できます。
normal：デフォルトのフォントスタイル。italic：斜体フォントスタイル、フォントファイルで特別に設計された斜体効果を使用します。oblique：傾斜フォントスタイル、斜体に似ていますが、フォントファイルに特別に設計された斜体効果がない場合、通常のフォントを強制的に傾斜させることができます。
例：
<div style="font-style: normal;">デフォルトのフォントスタイル 123 ABC</div><div style="font-style: italic;">斜体スタイル 123 ABC</div><div style="font-style: oblique;">傾斜スタイル 123 ABC</div>効果： 
色
CSSでのフォントの色はcolorプロパティを使用して設定できます。
- 定義済みの色名：例えば、
red、green、blueなど。 - 16進数の色値：例えば、
#FF0000、#00FF00、#0000FFなど。 - RGB、RGBAの色値：例えば、
rgb(255, 0, 0)、rgba(0, 255, 0, 0.5)など。 - HSL、HSLAの色値：例えば、
hsl(0, 100%, 50%)、hsla(120, 100%, 50%, 0.7)など。
例：
<div style="color: blue;">フォントの色</div><div style="color: #ff6a00;">フォントの色</div><div style="color: rgba(0, 128, 0);">フォントの色</div><div style="color: rgba(0, 128, 0, 0.5);">フォントの色</div><div style="color: hsla(0, 100%, 50%);">フォントの色</div><div style="color: hsla(0, 100%, 50%, 0.7);">フォントの色</div><div style="color: transparent;">フォントの色</div>効果： 
リンク
CSSでは、colorプロパティを使用してリンク（ハイパーリンク）のフォントの色を設定できます。
リンクの色を設定
- a - グローバルリンクの色を設定
- a:link - 通常、未訪問のリンク
- a:visited - ユーザーが訪問したリンク
- a:hover - ユーザーのマウスがリンク上にあるとき
- a:active - リンクがクリックされた瞬間
例：
/* グローバルリンク */a { color: #3498db; /* 青 */}
/* 未訪問のリンク */a:link { color: #3498db; /* 青 */}
/* 訪問済みのリンク */a:visited { color: #884dff; /* 紫 */}
/* マウスホバー時のリンク */a:hover { color: #ff6600; /* オレンジ */}
/* クリック時のリンクの色 */a:active { color: #ff0000; /* 赤 */}リンクの下線を設定
例：
a { text-decoration: none; /* 下線を削除 */}
a:hover { text-decoration: underline; /* ホバー時に下線を表示 */}