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 】フォントを設定を一括指定する方法
【CSS】
【 font 】プロパティ
フォントを設定を一括指定する方法
【 font 】プロパティ
フォントを設定を一括指定する方法
「font」プロパティは、
フォントに関する設定を一括で指定ができる「CSSプロパティ」。
「font」プロパティで指定できるのは、
下記のフォント関連プロパティの値です。
「font」プロパティだけで、
上記のフォント設定をすべて一括指定できてしまう便利なプロパティ。
「font」プロパティの使い方
「font」プロパティは、
複数の値を指定することで、
「フォント」関連の設定を一括で指定することができる。
もちろん「font」プロパティで「単一」の設定も可能。
「font」プロパティは、一括指定できますが、
必要のない設定値は、指定しなくても大丈夫。
指定されなかった値は、初期値が適用される。
「font」プロパティが一括指定できるフォント関連プロパティ
| プロパティ名 | 説明 |
|---|---|
| font-family | フォントの種類 |
| font-size | フォントのサイズ |
| font-stretch | フォントの横幅 |
| font-style | フォントのスタイル |
| font-variant | フォントフェイス |
| font-weight | フォントの太さ |
| line-height | フォントの高さ |
「font」プロパティの書式
.クラス名{
font: font-style font-variant-css21 font-weight font-stretch font-size line-height font-family;
}
font: font-style font-variant-css21 font-weight font-stretch font-size line-height font-family;
font: フォントスタイル フォントフェイス フォントの太さ フォントの横幅 フォントサイズ フォントの高さ フォントの種類;
//最低限の複数設定（「font-size」「font-family」は必須）
font: font-size font-family;
.sample { font: message-box; }
.sample { font: 100% Arial; }
.sample { font: 100%/1.5em Arial; }
.sample1 { font: italic 100% Arial; }
.sample2 { font: italic small-caps 100% Arial; }
.sample3 { font: italic small-caps bold 100% Arial;}
p { font: 12px/14px sans-serif }
・フォントの大きさ = 12px
・行の高さ = 14px
・フォントファミリ = sans-serif
p { font: 80% sans-serif }
・フォントの大きさ = 親要素の 80%
・フォントファミリ = sans-serif
p { font: bold italic large serif }
・フォントの太さを太字に、
・フォントスタイルを斜体に、 ・フォントの大きさを large に、
・フォントファミリーは serif に設定する */
p { font: status-bar }
・ウィンドウのステータスバーと同じフォントに設定する
font: font-style font-variant-css21 font-weight font-stretch font-size line-height font-family;
}
font: font-style font-variant-css21 font-weight font-stretch font-size line-height font-family;
font: フォントスタイル フォントフェイス フォントの太さ フォントの横幅 フォントサイズ フォントの高さ フォントの種類;
//最低限の複数設定（「font-size」「font-family」は必須）
font: font-size font-family;
.sample { font: message-box; }
.sample { font: 100% Arial; }
.sample { font: 100%/1.5em Arial; }
.sample1 { font: italic 100% Arial; }
.sample2 { font: italic small-caps 100% Arial; }
.sample3 { font: italic small-caps bold 100% Arial;}
p { font: 12px/14px sans-serif }
・フォントの大きさ = 12px
・行の高さ = 14px
・フォントファミリ = sans-serif
p { font: 80% sans-serif }
・フォントの大きさ = 親要素の 80%
・フォントファミリ = sans-serif
p { font: bold italic large serif }
・フォントの太さを太字に、
・フォントスタイルを斜体に、 ・フォントの大きさを large に、
・フォントファミリーは serif に設定する */
p { font: status-bar }
・ウィンドウのステータスバーと同じフォントに設定する
「font-variant-css21」の値
| 値 | 説明 |
|---|---|
| normal | 通常のフォントフェイスを定義 |
| small-caps | 小さな大文字の表示を有効にする（大文字の形はしているが、サイズは小文字の大きさに縮小） |
「font」プロパティの注意点
「システムキーワード」を指定する場合、下記の1つのみ指定可能。
| caption | ボタンやドロップダウンなどのキャプションコントロールで使用されているフォント |
| icon | ラベルアイコンに使用されているフォント |
| menu | メニューで使用されているフォント |
| message-box | ダイアログボックスで使用されているフォント |
| small-caption | スモールコントロールで使用されているフォント |
| status-bar | ステータスバーで使用されているフォント |
| 接頭辞付きのシステムフォントキーワード |
ブラウザーが独自に実装している接頭辞付きのキーワードで、指定できるシステムフォントがあるそうです。 「Gecko」の接頭辞付きのシステムフォントキーワードは、 ・-moz-window ・-moz-document ・-moz-desktop ・-moz-info ・-moz-dialog ・-moz-button ・-moz-pull-down-menu ・-moz-list ・-moz-field などが実装されているとのこと。 |
「font」プロパティ指定に必ず含める値
・font-size
・font-family
・font-family
「font」プロパティ指定に任意で含める値
・font-style
・font-variant
・font-weight
・font-stretch
・line-height
・font-variant
・font-weight
・font-stretch
・line-height
「font」プロパティの指定順序
・「font-size」よりも前に指定する値 = 「font-style」「font-variant」「font-weight」
・「font-variant」の値で指定できるのは、「CSS 2.1」で定義された値「normal」「small-caps」 のみ。
・「font-stretch」の値は、「単一キーワード値」のみを指定可能。
・「line-height」は、「font-size」直後に、 「/」で区切って、「16px/3」という書式で指定する。
・「font-family」の値は、一番最後に指定する。
・「font-variant」の値で指定できるのは、「CSS 2.1」で定義された値「normal」「small-caps」 のみ。
・「font-stretch」の値は、「単一キーワード値」のみを指定可能。
・「line-height」は、「font-size」直後に、 「/」で区切って、「16px/3」という書式で指定する。
・「font-family」の値は、一番最後に指定する。
Back
