ga-05-e7

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

【 HTML/CSS逆引き辞典 】
蛍光ペンを引く
 

「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%);
}
        
ワンポイント

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

 back
pagetop
 next

アンダーラインを引く

蛍光ペンを引く

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

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