文字の表示の様々○文字サイズ○○○○○○○○○○一太郎で文字サイズ10 一太郎で文字サイズ20 一太郎で文字サイズ30 一太郎で文字サイズ40 px指定で10 px指定で20 px指定で30 px指定で40 ○文字色○○○○○○○○○○○○赤い文字 青い文字 ○文字効果○○○○○○○○○○○影文字
影文字2段
|
ページのソース <!DOCTYPE html> <HTML lang="ja"> <HEAD> <META charset=UTF-8"> <META NAME="KEYWORDS" CONTENT="HTML5,文字表示"> <TITLE>文字関係のサンプル</TITLE> <link rel="stylesheet" href="mojisample.css"> </HEAD> <body> <h1>文字の表示の様々</h1> <hr> <h2>○文字サイズ○○○○○○○○○○</h2>
<p id="s10">一太郎で文字サイズ10</p> <p id="s20">一太郎で文字サイズ20</p> <p id="s30">一太郎で文字サイズ30</p> <p id="s40">一太郎で文字サイズ40</p> <p id="ps10">px指定で10</p> <p id="ps20">px指定で20</p> <p id="ps30">px指定で30</p> <p id="ps40">px指定で40</p> <h2>○文字色○○○○○○○○○○○○</h2>
<p id="redm">赤い文字</p> <p id="bluem"><b>青い文字</b></p>
<h2>○文字効果○○○○○○○○○○○</h2>
<div id="kage1">影文字</div> <div id="kage2">影文字2段</div> </p> </p> </body> </html> |
mojisample.css の内容
@charset "UTF-8";
p {
line-height: 0.1em;
}
#s10 {
font-size:0.95em;
}
#s20 {
font-size:1.91em;
}
#s30 {
font-size:2.86em
}
#s40 {
font-size:3.81em
}
#ps10 {
color:black;
font-size: 10px;
}
#ps20 {
color:black;
font-size: 20px;
}
#ps30 {
color:black;
font-size: 30px;
}
#ps40 {
color:black;
font-size: 40px;
}
#redm {
color: red;
}
#bluem {
color: blue;
}
div {
margin: 10px;
font-family: Ariel, Helvetica, sans-serif;
font-weight: bold;
font-size:40px;
}
#kage1 {
text-shadow: 10px 10px 4px silver;
}
#kage2 {
text-shadow: 15px 20px 3px #555555, 30px 30px 10px #222222;
}