たまちゃんHTMLのおうち たまちゃんHTMLのおうち

ホームページ作成講座   STEP3 文字のスタイルと位置


メニュー

文字の色や太さ、大きさなどを変えてみましょう

■STEP3  文字のスタイルと位置 サンプルを表示

★文字の色と太さ

文字を赤、かつ太字にしてみましょう。

ソースコード(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; /* フォントの大きさは1.5倍 */
}

/* 文字サイズのサンプル */
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; /* 行の高さはフォントサイズの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へ

このページのトップ