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マージン
マージン マージン崩壊
CSSパディング CSSの高さ/幅 CSSボックスモデル CSSの概要
概要 アウトライン幅 アウトラインカラー 概要速記 アウトラインオフセット
CSSテキスト
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
CSSフォント
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
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つのプロパティですべての背景プロパティを指定することもできます。これは省略形プロパティと呼ばれます。

書く代わりに：

body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

省略形のプロパティを使用できますbackground：

例

省略形のプロパティを使用して、1つの宣言で背景プロパティを設定します。

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

省略形のプロパティを使用する場合、プロパティ値の順序は次のとおりです。

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

他の値がこの順序である限り、プロパティ値の1つが欠落しているかどうかは関係ありません。上記の例では、値がないため、background-attachmentプロパティを使用していないことに注意してください。

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

エクササイズ：

<h1>要素の背景色を「水色」に設定します。

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

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

すべてのCSS背景プロパティ

Property Description
background Sets all the background properties in one declaration
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page
background-clip Specifies the painting area of the background
background-color Sets the background color of an element
background-image Sets the background image for an element
background-origin Specifies where the background image(s) is/are positioned
background-position Sets the starting position of a background image
background-repeat Sets how a background image will be repeated
background-size Specifies the size of the background image(s)

❮ 前 次 ❯