ga-05-d2

HTML/CSS初心者の為の
無料で挫折させない ホームページ作成講座

【 HTML/CSS逆引き辞典 】
背景色の指定方法

背景色を指定するには、「background-colorプロパティ」を使います。色の指定方法には、RGB(red・green・blue 例 : #ff0000)を指定する方法とカラー名(例:red)を指定する方法と他にも16進数で指定する方法、透明度を指定する方法、他がありますが、RGB指定方式とカラー名指定方式を紹介します。

background-colorプロパティ  リファレンス

■ 記述形式 : セレクタ{background-color:値}

■ 値の形式 : transparent(透明)、#rrggbb(RGB16進数)、色の名前

■ 初期値 : transparent

■ 適用可能要素 : すべての要素

■ 継承 : しない

【サンプル画像】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
           背景色の指定方法
=====================================-->
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" 
        href="style-1.css">
</head>
<body>
<!--====================================
        ◆RGBで背景色を指定する◆
=====================================-->
<div class="box lightyellow-rgb">
     <h3>◆RGBで背景色(#FFFFE0:薄黄)を
      指定する◆</h3>
</div>
<!--====================================
     ◆カラー名で背景色を指定する◆
=====================================-->
<div class="box lightgreen-name">
     <h3>◆カラー名で背景色(lightgreen:薄緑)
      を指定する◆</h3>
</div>
</body>
</html>
            
CSSファイル(ファイル名 : style-1.css)
@charset "utf-8";
/*--====================================
      背景色を指定するBOX
--====================================*/
.box{
    text-align: center;
    width: 500px;
    margin: 30px auto;
    padding:10px;
    border:solid 1px gray;
}
/*--====================================
      RGBの指定
--====================================*/
.lightgreen-rgb{
    background-color: #A3ED90;}
.lightyellow-rgb{
    background-color: #FFFFE0;}
.whitesmoke-rgb{
    background-color: #F5F5F5;}
/*--====================================
      カラー名の指定
--====================================*/
.lightgreen-name{
    background-color: lightgreen;}
.lightyellow-name{
    background-color: lightyellow;}
.whitesmoke-name{
    background-color: whitesmoke;}
              
 back
pagetop
 next

文字色の指定方法

背景色の指定方法

背景色(36色)
の使い方

Copyright (c) 無料で挫折させないホームページ作成講座 All Rights Reserved.
by yorozuken