テキスト関連のCSS（段落のレイアウトを考えるときの参考）

Webサイトを作るときに、なんとなくで設定していた「フォントのスタイルとレイアウト」をまとめました

目次

1. font-family
2. colorとfont-size
3. 文字間の調整について
4. テキストの行間の調整
5. レイアウト対策のCSS
   1. overflow-wrapとword-break
   2. white-space
   3. overflowやtext-overflow

font-family

フォントの設定です
＊ちなみに文字の書体には「明朝体（欧文の書体の｢セリフ体｣）」や「ゴシック体（欧文の書体の「サンセリフ体」）」などがあり、フォントは文字の種類（製品）を表します

システムフォントはコンピューターのOSに最初からインストールされているフォントで、ユーザーの環境ごとに異なります（Windows・Mac・iPhone・AndroidなどOSでインストールされているフォントは異なります）

「システムフォント」を使うデメリットは、表示されるフォントはユーザーの環境に左右されるため統一されないこと、メリットはフォントデータを読み込む必要がないことです

基本的には、「font-family」プロパティで、複数のシステムフォントを設定し、最低限の指定として通常は最後に「明朝体」や「ゴシック体」の総称フォント（serif・sans-serif）を指定します
ブラウザが、リストの先頭から利用可能なフォントを判断して使用します
ブラウザの実装に依存しているので、「明朝体」「ゴシック体」の設定も100％確実ではありません！

下記のCSSでは「明朝体（serif）かゴシック体（sans-serif）」のみを指定して、ブラウザがシステムフォントを選択します

ユーザーの環境に関係なくフォントを統一したいときは、Webフォントを利用します
「Webフォント（有料と無料がある）ファイル」をサーバーへアップロードしたり、
「Google Fonts」などWebフォントサービスを利用したりします

個人的には、日本語は容量が大きいくページ表示速度が遅くなるので、ほとんど利用していません
＊Androidでは明朝体がないことが多く「Androidでも明朝体にしたい」というときなどに利用します
「Google Fonts」はライセンスの心配もなくてオススメだと思います

日本語 Google Fonts

直近（2022年2月）のメモ
＊ブラウザやOSの実装は進化するので、たまにチェックw

/* ゴシック体 */
body {
  font-family: "Helvetica Neue", Arial,
 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", 
 "メイリオ", Meiryo, 
 sans-serif,
}

/* 明朝体 (Google Fonts利用)*/
body {
  font-family: Georgia, "Noto Serif JP", serif;
}

英文に「欧文フォント」を使いたいときは、「font-family」の先頭に欧文フォントを指定します

ちなみに欧文フォントは、すべてのシステムで一般的に利用できる欧文フォント（ウェブセーフフォント）があります
sans-serif：Arial、Verdana
serif：Georgia、Times New Roman
mdn web doc参考にしました

「游ゴシック」について
「游ゴシック」はWindowsとMacで同じフォントが使える書体ですが・・・
Windowsで文字が細くなります（太さが違うため）IEだと文字下に変な余白が入ったり、別途対策が必要です
Macを使っているわたしには、確認できないため、超安全策をとる場合は游ゴシックは回避したいです💦
＊system-ui（新しい総称フォント指定）を使うと、Windowsでは游フォントで表示されるようなので、こちらも回避

ちなみに、Windowsには「ヒラギノフォント」は入っていません
Macで「ヒラギノフォント」でデザインしたときにWindowsで代替えとなるフォントを何にするかは、「メイリオ」が無難なようです

メイリオ（https://ja.wikipedia.org/wiki/メイリオ）より

ヒラギノ（https://ja.wikipedia.org/wiki/ヒラギノ）より

フォントを選ぶときの参考に

等幅フォントとプロポーショナルフォント

「等幅フォント」は、すべての文字が同じ文字幅でデザインされているフォントです
「プロポーショナルフォント」は、文字によって幅が異なるフォントです
印刷やWebでの表示に使う場合は、基本的には「プロポーショナルフォント」の方が読みやすいようです
特に英文で等幅書体を使うと「i」も「w」も等幅になり読みにくくなります
反対にプログラミングのコードには等幅フォントが向いています
＊等幅フォントの総称はmonospaceです

フォントには「TrueTypeフォント」と「OpenTypeフォント」という2つのフォーマットが存在します

「TrueTypeフォント」は、歴史の古いフォントで、「OpenTypeフォント」はTrueTypを拡張したフォントです

colorとfont-size

Webサイトのテキストの色は、真っ黒（#000000）だと目が疲れるので避けたほうがいいようです

有名サイトのテキストのカラーコード（ヘキサコード）です
カラーコードの色で表示しています

「font-size」は基本的には相対単位を使います
pxはテキストを表示したい高さのピクセル数ですが、絶対単位です
pxで指定するとユーザーが端末で拡大や縮小の設定をしても反映されません

emは相対単位で1emが親要素に設定されているフォントサイズに等しくなります（ネストしていると計算がややこしくなります）
remは1rem が親要素ではなくルート要素（html）に設定されたフォントサイズに等しくなり計算が楽です（注意点は IE8以下はサポートされていません）

ちなみにルート要素のfont-sizeはブラウザ標準のサイズは「16px」です
20pxにしたいときは20÷16で1.25remを指定します

10px未満のテキストはGoogle Chromeで表示できません
またテキストの太さは、フォントにより利用可能なバリエーション数が異なるので、システムフォントでは、通常「太い（bold）」以外の選択肢は使用しません
Google Fontsを使うときなどは、あらかじめ使いたい太さを複数えらんでバリエーションを増やせます

文字間の調整について

フォントの文字幅は種類ごとに異なるので、すべてのフォントで読みやすさを提供してくれる単一の設定値はありません

「letter-spacing」プロパティで文字間のスペースを均一に増やしたり、減らしたりします
＊単語間の間隔やタグは「word-spacing」プロパティで指定します

正の値では文字と文字の間が開き、負の値では文字と文字が近づきます
初期値はnormalでブラウザが決めます（0になることがほとんどのようです）
設定するときはpxではなくemで文字サイズに合わせます
1emが文字の高さになります（0.05em〜0.1emがベスト）

font-feature-settings: "palt"で、個々の文字(「」、。など)ごとに文字詰めに対応します
（注意）font-feature-settingsは、OpenTypeフォントの拡張書体の特性を制御するものなので「OpenTypeフォント」以外のフォントでは利用できません
またWindowsの「メイリオ」はプロポーショナルメトリクス情報がなくfont-feature-settings: "palt"は利用できません
IEは11以降対応されます

(Adobe) CSSでのOpenType機能の構文

テキストの行間の調整

「line-height」プロパティで、文字の上下にスペースを空けて行の高さを設定します

「単位なし」の設定がオススメで、「単位なし」の場合は、その要素自身のフォントサイズの高さが「1」となる相対値になります（単位ありだと、ボックス内にいろいろなフォントサイズの要素があっても、親要素のフォントサイズが基準になりレイアウトが崩れたりします）
＊1.5〜2.0くらいがベストです
フォントにもよりますがブラウザの標準はおおよそ1.2です

レイアウト対策のCSS

例えばブログ記事などで、事前に内容が決まっていないときのレイアウト対策です

overflow-wrapとword-break

改行について
英単語では単語の区切り位置でのみ改行されるため、長い単語はボックスを突き抜けます
日本語は単語途中でも改行され、ボックス内に収まります
＊日本語メインであれば、ほぼURLなどの区切りのない英数字対策だと思いますw

日本語は「overflow-wrap」や「word-break」を指定しなくても通常は改行されて収まりますが、英数字は「スペース」「?」「-」があるときだけ改行されます
初期値はnormal
＊下記の例ではURLとの間に「スペース」はありません（日本語ではURLの間は区切りと判断されて改行されています）

「overflow-wrapやword-break」の値を「break-word」にすると、URLなどスペースが入っていいない英数字は単語の途中でも強制的に改行します
適当なスペースが入っている英数字は、normalと同じで単語の区切りで改行されます
＊詳細は備考を参照（Chomeでは試した限りは、違いはありませんでした）

（備考）「overflow-wrap」と「word-break」はどちらも枠から文字列がはみ出るときの改行の設定です
「overflow-wrap」は、インライン要素に対して途中で改行を入れるかどうか、「word-break」はみ出たときにどうするかを指定します
word-break:break-word（IEは未対応）は、「overflow-wrap」の値とは関係なくword-break: normal やoverflow-wrap: anywhereと同じ効果になる、とのこと
既に設定されている「overflow-wrap」を上書きできるってことかなw 違いがよくわからない💦

word-break:break-allを設定すると、CJK (中国語、台湾語、日本語、韓国語) 以外のテキスト、要するに英単語の途中でもテキストが枠からあふれたところで (次の行に送ればよい場合でも) 改行します
＊ちなみに日本語でもURLの間は区切りと判断されていません

英単語の途中で改行や、行頭の句読点を黙認するなら、word-break:break-allが無難かなw

あまり使うことはないと思いますが、word-breakの値にkeep-allを設定すると、CJK (中国語、台湾語、日本語、韓国語) のテキストの改行規則が解除されます
日本語は「スペース」と「 。」で改行されます

white-space

「white-space」プロパティはテキストの改行やスペース、タブの扱いを指定するプロパティです

HTML内では、スペース、タブ、改行が連続で入力されても、1つの空白文字にまとめられます

• normal（初期値）
  連続する半角スペース、タブ、改行を一つの半角スペースにまとめ、端まできたら折り返します
• nowrap
  連続する半角スペース、タブ、改行を一つの半角スペースにまとめ、端にきても折り返しません
• pre
  半角スペース、タブ、改行をそのまま表示して、 折り返しません
• pre-wrap
  半角スペース、タブ、改行をそのまま表示して、折り返します
• pre-line
  半角スペース、タブは一つの半角スペースにまとめ、改行は改行し、端まできたら折り返します

入力した通りに表示したいときは、white-space:pre-wrapを使います
white-space:pre-wrapは入力したまま反映されて、はみ出ることもありません

その他「line-break」プロパティは日本語などのCJKテキスト禁則処理のルールを設定します（ブラウザにより改行位置は異なります）

改行についてまとめると
ブラウザの影響もあり、静的なサイト以外では自動で反映される改行にこだわったレイアウトはできません💦
改行したいところに<br> タグを手動で含めます（WordPressの投稿では「Shift」+「Enter」）
WordPressは既存のブロックで「word-break」が設定されているので、具体的なブロックで対応が必要な場合もあります

overflowやtext-overflow

「高さを制限したいとき」や「横幅がわからないとき」は、超えた部分はあえて非表示にする必要があります

overflow:hiddenは、はみ出した部分を隠します
overflow:scrollは、はみ出た部分を隠してスクロールできるようにします
＊例では縦にスクロールですが、もちろん横スクロールもできます

text-overflowは横方向（インラインの進行方向）にはみ出す内容に作用します
white-space: nowrap;でまずはテキストを改行しないようにします
overflow: hidden;もつけます
＊どうしても1行にしたいときなどに利用します
text-overflow: clipは端でテキストを切り取るので、文字の途中でもきれる場合もあります
text-overflow: ellipsisは省略記号 (‘…’) を表示します

指定した行数でテキストを省略表示にすることができます（IE11では動作しません）

.line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}