ga-04-05

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

5.文字色と背景色

目   次

1.文字色の指定方法

2.背景色の指定方法

3.背景色(36色)の使い方

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

5.参照カラーコード表(外部)



  1.文字色の指定方法

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

【サンプル画像】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
           文字色の指定方法
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title>文字色の指定方法</title>
    <link rel="stylesheet" 
          href="style-1.css">
</head>
<body>
<!--====================================
         ◆RGBで文字色を指定する◆
=====================================-->
    <div class="box">
        <h3>◆RGBで文字色を指定する◆</h3>
      <P style="color:#FF0000;">
        文字色が赤色(#FF0000)の文章</P>
      <P style="color:#008000;">
        文字色が緑色(#008000)の文章</P>
      <P style="color:#0000FF;">
        文字色が青色(#0000FF)の文章</P>
    </div>
<!--====================================
         ◆カラー名で文字色を指定する◆
=====================================-->
    <div class="box">
        <h3>◆カラー名で文字色を指定する◆</h3>
      <P style="color:red;">
        文字色が赤色(red)の文章</P>
      <P style="color:green;">
        文字色が緑色(green)の文章</P>
      <P style="color:blue;">
        文字色が青色(blue)の文章</P>
    </div>
</body>
</html>
            
CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
      文字色を指定するBOX
--====================================*/
.box{
    text-align: center;
    line-height: 0px;
    width: 350px;
    margin: 30px auto;
    padding:10px;
    font-weight: bold;
    border:solid 1px gray;
}       
            
  
  2.背景色の指定方法

背景色を指定するには、「background-colorプロパティ」を使います。色の指定方法は文字色の指定方法と同じです。

【サンプル画像】

画像

【サンプル コード】
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;}
              
  
  3.背景色(36色)の使い方

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

【 背景色(36色)】

画像

【 サンプル画像 】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
      登録された背景カラーの使い方
=====================================-->
<html>
<head>
    <title>登録された背景カラーの使い方</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" 
          href="style-2.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は複数設置できる。

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

覚えておくと便利なカラーネーム表を作りました。

画像

  
  5.参照カラーコード表(外部)

    カラーコード表は、次のサイトが便利です。

WEBカラーリファレンス

 

 back
pagetop
 next

CSSの書き方
(実用的サンプル)

文字色と背景色

文字(テキスト)
の装飾

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