文字の表示の様々○文字サイズ○○○○○○○○○○一太郎で文字サイズ１０ 一太郎で文字サイズ２０ 一太郎で文字サイズ３０ 一太郎で文字サイズ４０ px指定で１０ px指定で２０ px指定で３０ px指定で４０ ○文字色○○○○○○○○○○○○赤い文字 青い文字 ○文字効果○○○○○○○○○○○影文字
影文字２段
|
ページのソース <!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">一太郎で文字サイズ１０</p> <p id="s20">一太郎で文字サイズ２０</p> <p id="s30">一太郎で文字サイズ３０</p> <p id="s40">一太郎で文字サイズ４０</p> <p id="ps10">px指定で１０</p> <p id="ps20">px指定で２０</p> <p id="ps30">px指定で３０</p> <p id="ps40">px指定で４０</p> <h2>○文字色○○○○○○○○○○○○</h2>
<p id="redm">赤い文字</p> <p id="bluem"><b>青い文字</b></p>
<h2>○文字効果○○○○○○○○○○○</h2>
<div id="kage1">影文字</div> <div id="kage2">影文字２段</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;
}