ga-04-06

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

6.文字(テキスト)の装飾

目   次

1.文字色を変更する(color)

2.文字の太さを変更する(font-weight)

3.文字のサイズを指定する(font-size)

4.行間を変える(line-height)

5.字間を変える(letter-spacing)

6.アンダーラインを引く(text-decoration)

7.蛍光ペンを引く

8.一部の文字の設定を変える

9.文字に影を付ける

  1.文字色を変更する(color)

A.サンプル1(色名指定)
  プロパティの書き方 ・・・ color:red;
  <p style="color:red; "> 文字色変更のサンプルです。</p>
   文字色変更のサンプルです。

B.サンプル2(カラーコード指定)
  プロパティの書き方 ・・・ color:#00CC00
  <p style="color:#00CC00; "> 文字色変更のサンプルです。</p>
   文字色変更のサンプルです。

※文字色の指定については、
 「基本の基本 5.文字色と背景色」に詳しく解説しています。

  
  2.文字の太さを変更する(font-weight) 

A.サンプル1(太字指定)
  プロパティの書き方 ・・・ font-weight: bold;
  <p style="font-weight: bold; "> 文字の太さを太くするサンプルです。</p>
   文字の太さを太くするサンプルです。
  ※当ページの設定が「font-weight: bold」なので変わりません。

B.サンプル2(通常指定:デフォルト)
  プロパティの書き方 ・・・ font-weight: normal;
  <p style="font-weight: normal; "> 文字の太さを通常にするサンプルです。</p>
   文字の太さを通常にするサンプルです。

C.サンプル3(細字指定)
  プロパティの書き方 ・・・ font-weight: normal;
  <p style="font-weight: lighter; "> 文字の太さを細くするサンプルです。</p>
   文字の太さを細くするするサンプルです。
  ※細字指定と通常指定は、ほとんど変わりません。

  
  3.文字のサイズを指定する(font-size) 

A.サンプル1(pxによる指定)
  プロパティの書き方 ・・・ font-size:18px
  <p style="font-size:18px; "> 文字のサイズを[px]で指定するサンプルです。</p>
   文字のサイズを[px]で指定するサンプルです。

B.サンプル2(emによる指定)
  プロパティの書き方 ・・・ font-size:1.3em
  <p style="font-size:1.3em; "> 文字のサイズを[em]で指定するサンプルです。</p>
   文字のサイズを[em]で指定するサンプルです。


ワンポイント

「em」はfont-sizeプロパティの値を1とする大きさ。つまりフォントサイズの大きさを1として考える。  

  
  4.行間を変える(line-height)

A.サンプル1(倍数指定:1.0)
  プロパティの書き方 ・・・ line-height: 1.0
  <p style="line-height: 1.0; "> 行間変更のサンプルです。行間変更のサンプルです。行間変更のサンプルです。行間変更のサンプルです。行間変更のサンプルです。</p>   

行間変更のサンプルです。行間変更のサンプルです。行間変更のサンプルです。行間変更のサンプルです。行間変更のサンプルです。

B.サンプル2(倍数指定:1.5)
  プロパティの書き方 ・・・ line-height: 1.5
  <p style="ine-height: 1.5; "> 行間変更のサンプルです。行間変更のサンプルです。行間変更のサンプルです。行間変更のサンプルです。行間変更のサンプルです。</p>   

行間変更のサンプルです。行間変更のサンプルです。行間変更のサンプルです。行間変更のサンプルです。行間変更のサンプルです。

C.サンプル3(倍数指定:2.0)
  プロパティの書き方 ・・・ line-height: 2.0
  <p style="line-height: 2.0; "> 行間変更のサンプルです。行間変更のサンプルです。行間変更のサンプルです。行間変更のサンプルです。行間変更のサンプルです。</p>   

行間変更のサンプルです。行間変更のサンプルです。行間変更のサンプルです。行間変更のサンプルです。行間変更のサンプルです。

ワンポイント

「line-height」は行間ではなくて、行の高さを指定する。  

  
  5.字間を変える(letter-spacing:)

A.サンプル1(0.0em)
  プロパティの書き方 ・・・ letter-spacing:0.0em
  <p style="letter-spacing:0.0em; "> 字間を変えるサンプルです。</p>
   字間を変えるサンプルです。

B.サンプル2(0.2em)
  プロパティの書き方 ・・・ letter-spacing:0.2em
  <p style="letter-spacing:0.2em; "> 字間を変えるサンプルです。</p>
   字間を変えるサンプルです。

C.サンプル3(0.4em)
  プロパティの書き方 ・・・ letter-spacing:0.4em
  <p style="letter-spacing:0.4em "> 字間を変えるサンプルです。</p>
   字間を変えるサンプルです。

  
  6.アンダーラインを引く(text-decoration)

A.サンプル
  プロパティの書き方 ・・・ text-decoration:underline
  <p style="text-decoration:underline; "> アンダーラインのサンプルです。</p>
   アンダーラインのサンプルです。


  
  7.蛍光ペンを引く
 

「A.色違いの蛍光ペンのサンプル」と「B.太さ違いの蛍光ペンのサンプル」を用意しました。

A.色違いの蛍光ペンのサンプル

【サンプル画像(色違いの蛍光ペン)】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
     文字(テキスト)の装飾
           蛍光ペン(色違い)
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style-1.css">
</head>
<body>
    <div style="width:470px;
                height:auto;
                margin:20px auto;
                padding:10PX 20PX 10PX 20px;
                font-weight: bold;
                border: solid 1px gray">

        <p>A.赤色の蛍光ペン ・・・ これは
            <span class="d-keikoupen-red">
            蛍光ペンのサンプル</span>です。
        </p>

        <p>B.青色の蛍光ペン ・・・ これは
            <span class="d-keikoupen-blue">
            蛍光ペンのサンプル</span>です。
        </p>

        <p>C.緑色の蛍光ペン ・・・ これは
            <span class="d-keikoupen-green">
            蛍光ペンのサンプル</span>です。
        </p>

        <p>D.黄色の蛍光ペン ・・・ これは
            <span class="d-keikoupen-yellow">
            蛍光ペンのサンプル</span>です。
        </p>

    </div>
</body>
</html>
        
CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
         文字(テキスト)の装飾
          蛍光ペン
--====================================*/
/*赤色の蛍光ペン*/
.d-keikoupen-red{background:
    linear-gradient(transparent 70%,#ff99ab 70%);
}
/*青色の蛍光ペン*/
.d-keikoupen-blue{background:
    linear-gradient(transparent 70%, #6cf 70%);
}
/*緑色の蛍光ペン*/
.d-keikoupen-green{background:
    linear-gradient(transparent 70%, #6f6 70%);
}
/*黄色の蛍光ペン*/
.d-keikoupen-yellow{background:
    linear-gradient(transparent 60%, yellow 60%);
}
        
ワンポイント

グラデーション機能を使って蛍光ペンを表現している。%の値は文字の上部から透明化する割合。

B.太さ違いの蛍光ペンのサンプル

【サンプル画像(太さ違いの蛍光ペン)】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
     文字(テキスト)の装飾
          蛍光ペン(太さ違い)
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style-1.css">
</head>
<body>
    <div style="width:540px;
                height:auto;
                margin:20px auto;
                padding:10PX 20PX 10PX 20px;
                font-weight: bold;
                border: solid 1px gray">

        <p>A.黄色の蛍光ペン(細い) ・・・ これは
            <span class="d-keikoupen-yellow-90">
            蛍光ペンのサンプル</span>です。
        </p>

        <p>B.黄色の蛍光ペン(適度) ・・・ これは
            <span class="d-keikoupen-yellow-60">
            蛍光ペンのサンプル</span>です。
        </p>

        <p>C.黄色の蛍光ペン(太い) ・・・ これは
            <span class="d-keikoupen-yellow-30">
            蛍光ペンのサンプル</span>です。
        </p>

        <p>D.黄色の蛍光ペン(全体) ・・・ これは
            <span class="d-keikoupen-yellow-0">
            蛍光ペンのサンプル</span>です。
        </p>

    </div>
</body>
</html>
        
CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
       文字(テキスト)の装飾
       蛍光ペン
--====================================*/
/*細い蛍光ペン*/
.d-keikoupen-yellow-90{background:
    linear-gradient(transparent 90%, yellow 90%);
}
/*適度の太さの蛍光ペン*/
.d-keikoupen-yellow-60{background:
    linear-gradient(transparent 60%,yellow 60%);
}
/*太い蛍光ペン*/
.d-keikoupen-yellow-30{background:
    linear-gradient(transparent 30%,yellow 30%);
}
/*文字全体の蛍光ペン*/
.d-keikoupen-yellow-0{background:
    linear-gradient(transparent 0%,yellow 0%);
}
        
ワンポイント

%の値の大きいものほど蛍光ペンが細くなる。

  
  8.一部の文字の設定を変える

A.サンプル1(一部の文字を赤にする)
プロパティの書き方 ・・・ 
<span style="color:red;">xxxx</span>
  一部の文字を 赤字にする サンプルです。

B. サンプル2(一部の文字にアンダーラインを付ける)
プロパティの書き方 ・・・ 
<span style="text-decoration:underline;">xxxx</span>
  一部の文字にアンダーラインを付ける サンプルです。

C.サンプル3(一部の文字の背景を黄色にする)
プロパティの書き方 ・・・ 
<span style="background-color: yellow;">xxxx</span>
  一部の文字の背景を黄色にする サンプルです。

  
  9.文字に影を付ける(text-shadow)
 

文字に影を付けるサンプルを6種類用意しました。

【サンプル画像(文字に影を付ける)】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
     文字(テキスト)の装飾
            文字影
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style-1.css">
</head>
<body>
<div style="width:325px;
            height:auto;
            text-align: center;
            margin:20px auto;
            padding:10PX 20PX 10PX 20px;
            font-weight: bold;
            border: solid 1px gray">

    <small>文字色:濃い青色、文字影:薄い灰色</small>
    <div CLASS="m-mojikage-a" 
           style="font-size: 36px;
                 color: darkblue;"> 
          文字影のサンプルA
    </div>

                <BR>
    <small>文字色:濃い青色、文字影:灰色</small>
    <div CLASS="m-mojikage-b" 
          style="font-size: 36px;
                 color: darkblue;"> 
          文字影のサンプルB
    </div>

                <BR>
    <small>文字色:濃い青色、文字影:明るい青色</small>
    <div CLASS="m-mojikage-c" 
          style="font-size: 36px;
                 color: darkblue;"> 
          文字影のサンプルC
    </div>
                <BR>
    <small>文字色:赤色、文字影:薄い灰色</small>
    <div CLASS="m-mojikage-a" 
           style="font-size: 36px;
                 color: red;"> 
          文字影のサンプルD
    </div>
                <BR>
    <small>文字色:赤色、文字影:灰色</small>
    <div CLASS="m-mojikage-b" 
          style="font-size: 36px;
                 color: red;"> 
          文字影のサンプルE
    </div>
                <BR>
    <small>文字色:赤色、文字影:明るい青色</small>
    <div CLASS="m-mojikage-c" 
          style="font-size: 36px;
                 color: red;"> 
          文字影のサンプルF
    </div>
</div>
</body>
</html>
        
CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
    文字(テキスト)装飾
       文字影
--====================================*/
.m-mojikage-a {font-weight: bold; 
              text-shadow: 3px 3px 5px #aaa;"> 
}
.m-mojikage-b {font-weight: bold;
              text-shadow: 3px 3px 5px GRAY;"> 
}
.m-mojikage-c {font-weight: bold;
              text-shadow: 3px 3px 5px skyblue;"> 
}
        
ワンポイント

 右へ3px、下へ3px、ぼかし5px、影の色skyblue

 back
pagetop
 next

文字色と背景色

文字(テキスト)
の装飾

枠線(ボーダー)
の活用

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