ga-05-d3

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

【 HTML/CSS逆引き辞典 】
背景色(36色)の使い方

カラー見本帳を独自に作成しました。コーディング時にカラーコード表を探す必要が無いことと、色の濃度を濃度1~濃度6迄の6段階で指定できることが便利です。

【 背景色(36色)】

画像

【 サンプル画像 】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
      登録された背景カラーの使い方
=====================================-->
<html>
<head>
    <title>登録された背景カラーの使い方</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" 
          href="style-1.css">
</head>
<body>
    <div class="box">
       <p class="blue1">
  青の色を薄い青から濃い青まで6段階に分けて、<br>
  背景カラーとして登録しました。薄い色から濃い色<br>
  の順番に1~6と名前を付けました。この色の場合は、<br>
  「class="blue1"」と書いてください。
       </p>
        <p class="blue2">
  青の色を薄い青から濃い青まで6段階に分けて、<br>
  背景カラーとして登録しました。薄い色から濃い色<br>
  の順番に1~6と名前を付けました。この色の場合は、<br>
  「class="blue2"」と書いてください。
       </p>
        <p class="blue3">
  青の色を薄い青から濃い青まで6段階に分けて、<br>
  背景カラーとして登録しました。薄い色から濃い色<br>
  の順番に1~6と名前を付けました。この色の場合は、<br>
  「class="blue3"」と書いてください。
       </p>
        <p class="blue4" style="color:white">
  青の色を薄い青から濃い青まで6段階に分けて、<br>
  背景カラーとして登録しました。薄い色から濃い色<br>
  の順番に1~6と名前を付けました。この色の場合は、<br>
  「class="blue4"」と書いてください。
       </p>
        <p class="blue5" style="color:white">
  青の色を薄い青から濃い青まで6段階に分けて、<br>
  背景カラーとして登録しました。薄い色から濃い色<br>
  の順番に1~6と名前を付けました。この色の場合は、<br>
  「class="blue5"」と書いてください。
       </p>
        <p class="blue6" style="color:white";>
  青の色を薄い青から濃い青まで6段階に分けて、<br>
  背景カラーとして登録しました。薄い色から濃い色<br>
  の順番に1~6と名前を付けました。この色の場合は、<br>
  「class="blue6"」と書いてください。
       </p>
    </div>
</body>
</html>
              
ワンポイント

CSSファイルに登録された36色とカラーネーム22色を利用できます。

CSSファイル(ファイル名 : style-1.css)
@charset "utf-8";
.box {width:400px;
     margin: 0 auto;
}
 
/*--====================================
     36色背景色カラーコード
--====================================*/
.red1 {background-color: #FFE4E1;}
.red2 {background-color: #ffcccc;}
.red3 {background-color: #ffb6c1;}
.red4 {background-color: #ff99cc;}
.red5 {background-color: #ff6699;}
.red6 {background-color: #ff0000;}

.green1 {background-color: #ccffcc;}
.green2 {background-color: #90ee90;}
.green3 {background-color: #32cd32;}
.green4 {background-color: #3cb371;}
.green5 {background-color: #008000;}
.green6 {background-color: #006400;}

.blue1 {background-color: #e0ffff;}
.blue2 {background-color: #aeeeee;}
.blue3 {background-color: #87ceeb;}
.blue4 {background-color: #1e90ff;}
.blue5 {background-color: #0066ff;}
.blue6 {background-color: #191970;}

.yellow1 {background-color: #ffffe0;}
.yellow2 {background-color: #fffacd;}
.yellow3 {background-color: #ffffbb;}
.yellow4 {background-color: #ffff99;}
.yellow5 {background-color: #ffff66;}
.yellow6 {background-color: #ffff00;}

.mono1 {background-color: #ffffff;}
.mono2 {background-color: #e8e8e8;}
.mono3 {background-color: #d0d0d0;}
.mono4 {background-color: #a0a0a0;}
.mono5 {background-color: #757575;}
.mono6 {background-color: #000000;}

.brown1 {background-color: #ffe4c4;}
.brown2 {background-color: #ffd700;}
.brown3 {background-color: #ff9900;}
.brown4 {background-color: #d2691e;}
.brown5 {background-color: #b22222;}
.brown6 {background-color: #800000;}

/*--====================================
     22色背景色カラーネーム
--====================================*/
.bg-mistyrose {background-color: mistyrose;}
.bg-pink {background-color: pink;}
.bg-red {background-color: red;}
.bg-lightyellow {background-color: lightyellow;}
.bg-yellow {background-color: yellow;}
.bg-gold {background-color: gold;}
.bg-orange {background-color: orange;}
.bg-tomato {background-color: tomato;}
.bg-lightgreen {background-color: lightgreen;}
.bg-limegreen {background-color: limegreen;}
.bg-green {background-color: green;}
.bg-darkgreen {background-color: darkgreen;}
.bg-lightcyan {background-color: lightcyan;}
.bg-lightblue {background-color: lightblue;}
.bg-deepskyblue {background-color: deepskyblue;}
.bg-blue {background-color: blue;}
.bg-darkblue {background-color: darkblue;}
.bg-white {background-color: white;}
.bg-whitesmoke {background-color: whitesmoke;}
.bg-lightgray {background-color: lightgray;}
.bg-gray {background-color: gray;}
            
ワンポイント

背景カラー36色とカラーネーム22色を別途のstyle-sheetに登録しておくと便利。style-sheetは複数設置できる。

 back
pagetop
 next

背景色の指定方法

背景色(36色)
の使い方

覚えておくと便利な
カラーネーム

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