ITメモ
CSS
「CSS」の「Topics」
「印刷用CSS」を「コンテンツ」に適用する方法「表示サイズ別」に「CSS」を適用する方法「スマートフォン」に「CSS」を適用する方法「コンテンツ」の「縦位置」を「真ん中」に配置する方法「コンテンツ」の「横位置」を「真ん中」に配置する方法「ベージ表示」を「フワッ」とした「フェードイン」で表示する方法「CSS」で「スクロールバー」を表示・設定する方法
背景・背景画像関連
背景画像のスライドショーを作成する方法背景画像を表示場所に自動フィットさせる設定背景画像を表示位置を調整する方法「背景色」に「透明度」を加える方法 「背景色」を「グラデーション」にする方法
画像関連
画像の下にできる空白を消す方法背景や画像に透明感を加える方法画像の横に文字を回り込ませる方法「CSS」で画像を変更する方法
「CSS」の基礎知識
「CSS」のファイル書式「CSS」のヘッダー書式「CSS」のコード書式「CSS」を「HTML」ファイルに記述する方法「CSS」外部ファイルをHTMLファイルとリンクさせる方法「CSS」でコメントを使う方法「CSS」で利用する単位「CSS」でテキストを編集する方法「CSS」での「セレクタ」優先順位「CSS」の命名規則「BEM」とは
CSSプロパティ【レイアウト関連】
【 width 】「横幅」を指定する方法【 height 】「高さ」を指定する方法【 margin 】「枠線外側」の「余白」を指定する方法【 padding 】「枠線内側」の「余白」を指定する方法【 border 】「枠線(ボーダー)」を付ける方法【 outline 】「枠線(ボーダー)」を付ける方法【 border-radius 】要素の四隅に丸みを付ける【 transform 】コンテンツに「2D変形」「3D変形」を適用【 display 】「ブロック要素」「インライン要素」に変換【 position 】コンテンツの配置指定【 float 】コンテンツを片側に寄せる方法
CSSプロパティ【コンテンツ関連】
【 content 】コンテンツの追加
CSSプロパティ【背景関連】
【 background 】背景を設定する方法
CSSプロパティ【文字・テキスト関連】
【 color 】文字の色を設定する【 font 】フォントを設定を一括指定する方法【 font-size 】フォントサイズを変更する方法【 font-family 】フォントの変更をする方法【 font-style 】フォントのスタイルを指定する方法【 font-weight 】文字を太字にする方法【 font-stretch 】文字を横幅(フェイス)を指定する方法【 font-size-adjust 】小文字の大きさを設定する方法【 line-height 】テキストラインの高さを設定する【 text-indent 】テキストインデントを設定する【 text-align 】テキストの配置位置を設定する【 text-decoration 】テキストに加えるで装飾を設定する【 text-underline-position 】テキストのアンダーライン位置を設定する【 text-shadow 】テキストのシャドー位置を設定する【 text-transform 】テキストの文字形態を設定する【 white-space 】要素内のホワイトスペースを設定する【 word-break 】テキストの自動改行の設定をする【 word-spacing 】単語間の隙間を指定【 letter-spacing 】文字間の隙間を指定【 text-justify 】文章右端空白にならないように、単語間・文字間のスペースを調整【 text-autospace 】表意文字(漢字)と非表意文字(半角英数字)の隙間を指定【 word-wrap 】テキストの自動改行の設定をする【 writing-mode 】縦書きを設定【 direction 】文章の方向を設定【 unicode-bidi 】単語の並びを設定【擬似要素】「:before」 - 文字の先頭にマークを表示する方法
CSSプロパティ【カラー関連】
【linear-gradient】二色以上でグラデーションを作るカラー設定
CSSプロパティ【アニメーション関連】
【 animation 】アニメーション操作をする方法【 transition 】変化をスムーズにスムーズにする方法【 opacity 】要素の透明度を設定する





【CSS】【 font-family 】フォントの変更をする方法

【CSS】
【 font-family 】プロパティ
フォントの変更をする方法




「font-family」プロパティは、
「フォント」を指定することができる「CSSプロパティ」。


「font-family」プロパティでは、
「フォントファミリー名」と「総称フォントファミリー名」で指定します。


指定で使用する「フォントファミリー」は、
アルファベットならば「A-Z」「0−9」をまとめたもの。

「総称フォントファミリー」は、
似ている「フォントファミリー」をまとめたもの。


「font-family」プロパティで、
フォントを指定するのは簡単だが、
いくつか指定する時のルールがあるので注意が必要。


使用したい「フォントファミリー」を指定する場合は、
使用できなかったことを考え、
「総称フォントファミリー名」も一緒に指定するのが大切。



「font-family」プロパティの使い方


「font-family」プロパティは、
「フォント」を指定できる「CSSプロパティ」で、
「フォントファミリー名」や「総称ファミリー名」の優先順位リストを指定することができる。


「フォントファミリー名」は、
通称「フォント」と呼ばれ、
アルファベットなら「A〜Z」のフォントをまとめたものをいう。

「総称ファミリー」は、
字のデザインが似ている「フォントファミリー」を複数集めた集合体です

・「A」=「フォント」
・「A〜Z」「0〜9」=「フォントファミリー」
・複数の「フォントファミリー」=「総称ファミリー」



「font-family」プロパティの書式


「font-family」プロパティの指定方法(記述方法)には、
少しルールがあります。



「font-family」プロパティの指定ルールは、

・複数のフォントを指定する場合は、「,(カンマ)」で区切る。
・「フォント名」に「スペース(空白)」が含まれる場合は、「""」で囲む。
・指定フォントがない場合に備え、「総称ファミリー」を1つは入れておく。
・最初に指定するフォントが1番優先順位が高い。

などがあります。




■ フォントファミリー名と総称ファミリー名の指定方法
font-family: フォントファミリー名, 総称ファミリー名;
font-family: "空白のあるフォントファミリー名", sans-serif;
font-family: "Gill Sans Extrabold", sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

「フォントファミリー名」を指定するときは、
使用できなかった時のために、
必ず「総称ファミリー名」を指定する。


■ 「/総称ファミリー名」の指定方法
font-family: 総称ファミリー名;
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: ui-serif;
font-family: ui-sans-serif;
font-family: ui-monospace;
font-family: ui-rounded;
font-family: emoji;
font-family: math;
font-family: fangsong;


■ 「グローバル値」の指定方法
font-family: inherit;
font-family: initial;
font-family: revert;
font-family: unset;





「font-family」の値

説明
family-name 「フォントファミリー名」を指定する値。
空白を含むフォントファミリー名は、引用符「""」で囲む必要がある。
generic-name 「総称フォントファミリー名」を指定する値。
指定された「フォントファミリー」が利用できなかった場合、
総称ファミリーの中のフォントをシステムが選択し適用する。

引用符「""」で囲まない。
囲んではいけません。
総称フォントファミリーは、フォントファミリー名リストの最終選択肢である必要があります。
定義されているキーワードは、下記の「generic-name(総称フォントファミリーの種類)」でご確認ください。
  
  
generic-name(総称フォントファミリーの種類)
総称フォントファミリー説明
serif 終わりが止めや払い、または実際の活字のセリフの形をした角を持つ字形です。 例: Lucida Bright, Lucida Fax, Palatino, Palatino Linotype, Palladio, URW Palladio, serif
sans-serif 平たい角の端を持つ字形です。 例: Open Sans, Fira Sans, Lucida Sans, Lucida Sans Unicode, Trebuchet MS, Liberation Sans, Nimbus Sans L, sans-serif.
monospace すべての字が同じ幅を持つ字形です。 例: Fira Mono, DejaVu Sans Mono, Menlo, Consolas, Liberation Mono, Monaco, Lucida Console, monospace
cursive 筆記体フォントの字形には、一般に、続け書き、もしくは、イタリック体の特性以上に、その他の筆記体の特性があります。字形は、部分的に、あるいは完全につながっていて、仕上がりは、印刷された活字というよりは、手書きのペンまたは毛筆で書かれたように見えます。 例: Brush Script MT, Brush Script Std, Lucida Calligraphy, Lucida Handwriting, Apple Chancery, cursive
fantasy fantasy フォントは、遊び心に溢れた文字表現を含む、主として装飾的なフォントです。 例: Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy
system-ui 指定されたプラットフォームの既定のユーザーインターフェイスフォントからグリフを取ります。文字の伝統は世界で様々であるため、この総称は他の総称にきれいに一致しない文字フォントを提供します。
ui-serif ユーザーインターフェイス既定のセリフ付きフォントです。
ui-sans-serif ユーザーインターフェイス既定のセリフなしフォントです。
ui-monospace ユーザーインターフェイス既定の等幅フォントです。
ui-rounded ユーザーインターフェイス既定の丸い特性を持ったフォントです。
math これは、数式を表現するための特別なスタイル上の概念のためのものです。上付き文字と下付き文字、複数行をまたぐ括弧、式の入れ子、明確な意味を持つ二重のグリフなどです。
emoji 絵文字を表示するために特別にデザインされたフォントです。
fangsong セリフ風の Song と手書き風の Kai の形の間にある中国語の文字の特定のスタイルです。このスタイルは政府文書によく使用されます。



Back