ga-05-e9

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

【 HTML/CSS逆引き辞典 】
文字に影を付ける

文字に影を付けるサンプルを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

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

文字に影を付ける

ul・liを使った
黒ポチのついた
箇条書き

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