ga-05-d1

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

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

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

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

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

■ 値の形式 : #rrggbb(RGB16進数)、色の名前、
         inherit(親要素の色を継承)

■ 初期値 : ブラウザによって決まっている

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

■ 継承 : する

【サンプル画像】

画像

【サンプル コード】
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;
}       
            
 back
pagetop
 next

classを複数記述する
サンプル

文字色の指定方法

背景色の指定方法

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