HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

CSSチュートリアル

CSSホーム CSSの紹介 CSS構文 CSSセレクター CSSハウツー CSSコメント CSSの色
色 RGB HEX HSL
CSSの背景
背景色 背景画像 背景の繰り返し 背景の添付ファイル 背景速記
CSSボーダー
ボーダーズ 境界線の幅 ボーダの色 ボーダーサイド ボーダー速記 丸みを帯びた境界線
CSSマージン
Margins Margin Collapse
CSSパディング CSSの高さ/幅 CSSボックスモデル CSSの概要
Outline Outline Width Outline Color Outline Shorthand Outline Offset
CSSテキスト
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
CSSフォント
フォントファミリー フォントWebセーフ フォントのフォールバック フォントスタイル フォントサイズ Font Google フォントの組み合わせ フォントの速記
CSSアイコン CSSリンク CSSリスト CSSテーブル
Table Borders Table Size Table Alignment Table Style Table Responsive
CSSディスプレイ CSSの最大幅 CSSの位置 CSSZ-index CSSオーバーフロー CSSフロート
Float Clear Float Examples
CSSインラインブロック CSS整列 CSSコンビネータ CSS疑似クラス CSS疑似要素 CSSの不透明度 CSSナビゲーションバー
Navbar Vertical Navbar Horizontal Navbar
CSSドロップダウン CSS画像ギャラリー CSS画像スプライト CSS AttrSelectors CSSフォーム CSSカウンター CSSWebサイトのレイアウト CSSユニット CSSの特異性 CSS！重要 CSS数学関数

CSS Advanced

CSSの丸みを帯びたコーナー CSSボーダー画像 CSSの背景 CSSの色 CSSカラーキーワード CSSグラデーション
Linear Gradients Radial Gradients Conic Gradients
CSSシャドウ
Shadow Effects Box Shadow
CSSテキスト効果 CSSWebフォント CSS2D変換 CSS3D変換 CSSトランジション CSSアニメーション CSSツールチップ CSSスタイルの画像 CSS画像反射 CSSオブジェクト適合 CSSオブジェクトの位置 CSSマスキング CSSボタン CSSページ付け CSSの複数の列 CSSユーザーインターフェイス CSS変数
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
CSSボックスのサイズ設定 CSSメディアクエリ CSSMQの例 CSSFlexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSSレスポンシブ

RWDイントロ RWDビューポート RWDグリッドビュー RWDメディアクエリ RWD画像 RWDビデオ RWDフレームワーク RWDテンプレート

CSSグリッド

グリッドイントロ グリッドコンテナ グリッドアイテム

CSS SASS

SASSチュートリアル

CSSの例

CSSテンプレート CSSの例 cssクイズ CSS演習 CSS証明書

CSSリファレンス

CSSリファレンス CSSセレクター CSS関数 CSSリファレンスオーラル CSSWebセーフフォント CSSアニメーション可能 CSSユニット CSSPX-EMコンバーター CSSの色 CSSの色の値 CSSのデフォルト値 CSSブラウザのサポート

CSSフォントプロパティ

❮ 前 次 ❯

CSSフォントプロパティ

コードを短くするために、1つのプロパティですべての個別のフォントプロパティを指定することもできます。

プロパティは、次のfont略記プロパティです。

  • font-style
  • font-variant
  • font-weight
  • font-size/line-height
  • font-family

注：font-sizeとのfont-family 値は必須です。他の値の1つが欠落している場合は、それらのデフォルト値が使用されます。

例

font1つの宣言で複数のフォントプロパティを設定するために使用します。

p.a {
  font: 20px Arial, sans-serif;
}

p.b {
  font: italic small-caps bold 12px/30px Georgia, serif;
}

エクササイズで自分をテストする

エクササイズ：

<h1>のフォントを「Verdana」に設定します。

<style>
h1 {
  : Verdana;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
</body>

すべてのCSSフォントのプロパティ

Property Description
font Sets all the font properties in one declaration
font-family Specifies the font family for text
font-size Specifies the font size of text
font-style Specifies the font style for text
font-variant Specifies whether or not a text should be displayed in a small-caps font
font-weight Specifies the weight of a font

❮ 前 次 ❯