文字を赤、かつ太字にしてみましょう。
ソースコード(CSSファイル)
*.red_bold {
color: red;
font-weight: bold;
}
span.font-weight_sample1 {font-weight: normal; }
span.font-weight_sample2 {font-weight: bold; }
span.font-weight_sample3 {font-weight: lighter; }
span.font-weight_sample4 {font-weight: bolder; }
span.font-weight_sample100 {font-weight: 100; }
span.font-weight_sample200 {font-weight: 200; }
span.font-weight_sample300 {font-weight: 300; }
span.font-weight_sample400 {font-weight: 400; }
span.font-weight_sample500 {font-weight: 500; }
span.font-weight_sample600 {font-weight: 600; }
span.font-weight_sample700 {font-weight: 700; }
span.font-weight_sample800 {font-weight: 800; }
span.font-weight_sample900 {font-weight: 900; }
ソースコード(HTML)
<p class=
"red_bold"
>赤い太字です</p>
♪♪♪文字の太さのサンプルです♪♪♪<br>
<span class="font-weight_sample1">標準の太さ(400と同じ)</span><br>
<span class="font-weight_sample2">一般的な太字(700と同じ)</span><br>
<span class="font-weight_sample3">相対的に一段階細く</span><br>
<span class="font-weight_sample4">相対的に一段階太く</span><br>
<span class="font-weight_sample100">太さ100</span><br>
<span class="font-weight_sample200">太さ200</span><br>
<span class="font-weight_sample300">太さ300</span><br>
<span class="font-weight_sample400">太さ400</span><br>
<span class="font-weight_sample500">太さ500</span><br>
<span class="font-weight_sample600">太さ600</span><br>
<span class="font-weight_sample700">太さ700</span><br>
<span class="font-weight_sample800">太さ800</span><br>
<span class="font-weight_sample900">太さ900</span>
表示
赤い太字です
♪♪♪文字の太さのサンプルです♪♪♪
標準の太さ(400と同じ)
一般的な太字(700と同じ)
相対的に一段階細く
相対的に一段階太く
太さ100
太さ200
太さ300
太さ400
太さ500
太さ600
太さ700
太さ800
太さ900
単純に<strong>〜</strong>でも太字になります。
このページのトップ
赤の太字を右寄せにしてみましょう。
ソースコード(CSSファイル)
*.red_bold_right {
color: red;
font-weight: bold;
text-align: right;
}
p.text-align_sample1 {text-align: left; }
p.text-align_sample2 {text-align: center; }
p.text-align_sample3 {text-align: right; }
p.text-align_sample4 {text-align: justify;
text-justify: distribute-all-lines; }
ソースコード(HTML)
<p class=
"red_bold_right"
>右寄せの赤い太字です</p>
♪♪♪行揃えのサンプルです♪♪♪<br>
<p class="text-align_sample1">左寄せです</p>
<p class="text-align_sample2">中央揃えです</p>
<p class="text-align_sample3">右寄せです</p>
<p class="text-align_sample4">text-alignプロパティで均等割付を指定する際には、
同時にtext-justifyプロパティで均等割付の形式を指定する必要があります。
「text-justify: distribute-all-lines;」を指定するとW3Cの検証に通らないので、削除しました。</p>
表示
右寄せの赤い太字です
♪♪♪行揃えのサンプルです♪♪♪
左寄せです
中央揃えです
右寄せです
text-alignプロパティで均等割付を指定する際には、
同時にtext-justifyプロパティで均等割付の形式を指定する必要があります。
text-alignプロパティで均等割付を指定する際には、同時にtext-justifyプロパティで均等割付の形式を指定をする必要があります。
これは、IE6に対してのことらしいです。「text-justify: distribute-all-lines;」を指定するとW3Cの検証に通らないので、削除しました。
無視したくなければ、条件分岐の記述で書く方法があります。
このページのトップ
文字の大きさを変えてみましょう。
ソースコード(CSSファイル)
*.blue_1p5_size {
color: blue;
font-size: 1.5ex;
}
span.font-size_sample1 {font-size: 12px; }
span.font-size_sample2 {font-size: 12em; }
span.font-size_sample3 {font-size: 12ex; }
span.font-size_sample4 {font-size: 80%; }
span.font-size_sample5 {font-size: 100%; }
span.font-size_sample6 {font-size: 120%; }
span.font-size_sample7 {font-size: xx-small; }
span.font-size_sample8 {font-size: x-small; }
span.font-size_sample9 {font-size: small; }
span.font-size_sample10 {font-size: medium; }
span.font-size_sample11 {font-size: large; }
span.font-size_sample12 {font-size: x-large; }
span.font-size_sample13 {font-size: xx-large; }
ソースコード(HTML)
<p class=
"blue_1p5_size"
>1.5倍サイズの青文字です</p>
♪♪♪文字サイズのサンプルです♪♪♪<br>
<span class="font-size_sample1">文字12px</span><span class="font-size_sample10">(1pxは1ピクセル)</span><br>
<span class="font-size_sample2">文字12em</span><span class="font-size_sample10">(emはフォントの高さ)</span><br>
<span class="font-size_sample3">文字12ex</span><span class="font-size_sample10">(exは小文字の高さ)</span><br>
<span class="font-size_sample4">文字80%</span><span class="font-size_sample10">(%値)</span><br>
<span class="font-size_sample5">文字100%</span><br>
<span class="font-size_sample6">文字120%</span><br>
<span class="font-size_sample7">文字xx-small</span><span class="font-size_sample10">(7段階中、最小サイズ。mediumが標準サイズで1段階で1.2倍のサイズ)</span><br>
<span class="font-size_sample8">文字x-small</span><br>
<span class="font-size_sample9">文字small</span><br>
<span class="font-size_sample10">文字medium</span><br>
<span class="font-size_sample11">文字large</span><br>
<span class="font-size_sample12">文字x-large</span><br>
<span class="font-size_sample13">文字xx-large</span><br><br>
表示
1.5倍サイズの青文字です
♪♪♪文字サイズのサンプルです♪♪♪
文字12px(1pxは1ピクセル)
文字12em(emはフォントの高さ)
文字12ex(exは小文字の高さ)
文字80%(%値)
文字100%
文字120%
文字xx-small(7段階中、最小サイズ。mediumが標準サイズで1段階で1.2倍のサイズ)
文字x-small
文字small
文字medium
文字large
文字x-large
文字xx-large
このページのトップ
行の高さを変えてみましょう。行の高さは読みやすさに影響を与えますが、文字の重なりなども注意する必要があります。
ソースコード(CSSファイル)
*.green_1p5_height {
color: green;
line-height: 1.5;
}
p.line-height_sample1 {line-height: normal;}
p.line-height_sample2 {line-height: 15px;}
p.line-height_sample3 {line-height: 1.5em;}
p.line-height_sample4 {line-height: 1.5;}
p.line-height_sample5 {line-height: 200%;}
ソースコード(HTML)
<p class=
"green_1p5_height"
>フォントサイズの1.5倍の行の高さ フォントサイズの1.5倍の行の高さ
フォントサイズの1.5倍の行の高さ フォントサイズの1.5倍の行の高さ フォントサイズの1.5倍の行の高さ
フォントサイズの1.5倍の行の高さ フォントサイズの1.5倍の行の高さ</p>
♪♪♪行の高さのサンプルです♪♪♪<br>
<p class="line-height_sample1">行の高さ:normal 行の高さ:normal 行の高さ:normal 行の高さ:normal
行の高さ:normal 行の高さ:normal 行の高さ:normal 行の高さ:normal 行の高さ:normal 行の高さ:normal
行の高さ:normal 行の高さ:normal 行の高さ:normal 行の高さ:normal 行の高さ:normal 行の高さ:normal
行の高さ:normal 行の高さ:normal 行の高さ:normal 行の高さ:normal 行の高さ:normal</p>
<p class="line-height_sample2">行の高さ:15px 行の高さ:15px 行の高さ:15px 行の高さ:15px
行の高さ:15px 行の高さ:15px 行の高さ:15px 行の高さ:15px 行の高さ:15px 行の高さ:15px
行の高さ:15px 行の高さ:15px 行の高さ:15px 行の高さ:15px 行の高さ:15px 行の高さ:15px
行の高さ:15px 行の高さ:15px 行の高さ:15px 行の高さ:15px 行の高さ:15px</p>
<p class="line-height_sample3">行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em
行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em
行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em
行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em</p>
<p class="line-height_sample4">行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5
行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5
行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5
行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5</p>
<p class="line-height_sample5">行の高さ:200% 行の高さ:200% 行の高さ:200% 行の高さ:200%
行の高さ:200% 行の高さ:200% 行の高さ:200% 行の高さ:200% 行の高さ:200% 行の高さ:200%
行の高さ:200% 行の高さ:200% 行の高さ:200% 行の高さ:200% 行の高さ:200% 行の高さ:200%
行の高さ:200% 行の高さ:200% 行の高さ:200% 行の高さ:200% 行の高さ:200%</p>
表示
フォントサイズの1.5倍の行の高さ フォントサイズの1.5倍の行の高さ
フォントサイズの1.5倍の行の高さ フォントサイズの1.5倍の行の高さ フォントサイズの1.5倍の行の高さ
フォントサイズの1.5倍の行の高さ フォントサイズの1.5倍の行の高さ
♪♪♪行の高さのサンプルです♪♪♪
行の高さ:normal 行の高さ:normal 行の高さ:normal 行の高さ:normal
行の高さ:normal 行の高さ:normal 行の高さ:normal 行の高さ:normal 行の高さ:normal 行の高さ:normal
行の高さ:normal 行の高さ:normal 行の高さ:normal 行の高さ:normal 行の高さ:normal 行の高さ:normal
行の高さ:normal 行の高さ:normal 行の高さ:normal 行の高さ:normal 行の高さ:normal
行の高さ:15px 行の高さ:15px 行の高さ:15px 行の高さ:15px
行の高さ:15px 行の高さ:15px 行の高さ:15px 行の高さ:15px 行の高さ:15px 行の高さ:15px
行の高さ:15px 行の高さ:15px 行の高さ:15px 行の高さ:15px 行の高さ:15px 行の高さ:15px
行の高さ:15px 行の高さ:15px 行の高さ:15px 行の高さ:15px 行の高さ:15px
行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em
行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em
行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em
行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em
行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5
行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5
行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5
行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5
行の高さ:200% 行の高さ:200% 行の高さ:200% 行の高さ:200%
行の高さ:200% 行の高さ:200% 行の高さ:200% 行の高さ:200% 行の高さ:200% 行の高さ:200%
行の高さ:200% 行の高さ:200% 行の高さ:200% 行の高さ:200% 行の高さ:200% 行の高さ:200%
行の高さ:200% 行の高さ:200% 行の高さ:200% 行の高さ:200% 行の高さ:200%
単位pxは1ピクセル、emはフォントの高さを1とする単位です。
単位を付けない場合は、フォントサイズに対する高さで、基本的にはemと%の単位と同じになりますが。
しかし、同じにならない場合があります。たとえばem要素(テキストの強調)との組み合わせでは思うような
高さが反映されない場合があります。
詳細は、lucky bagさん
のページを参照してください。
結果的に、フォントの高さには単位を付けない使い方がお勧めのようです。
また、値としては1.4くらいが見やすいといわれているようです。
以下は、文字サイズを2倍にして、strong要素で強調表示をした例です。単位ありとなしの違いが明らかです。
ソースコード(CSSファイル)
p.line-height_sample3 {line-height: 1.5em;}
p.line-height_sample4 {line-height: 1.5;}
p.line-height_sample3 strong {font-size: 200%; }
p.line-height_sample4 strong {font-size: 200%; }
ソースコード(HTML)
<p class=
"line-height_sample3"
><em>
行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em
行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em
行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em
行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em
</em></p>
<p class=
"line-height_sample4"
><em>
行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5
行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5
行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5
行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5
</em></p>
表示
行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em
行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em
行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em
行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em 行の高さ:1.5em
行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5
行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5
行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5
行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5 行の高さ:1.5
ステップ3までで学んだ内容だけでホームページを作りました。ボタンをクリックしてください。
スタイルシートは、一度保存してからかまたは直接見てください。
▼STEP4へ