文字に関してのスタイルシート具体例


文字に関してのスタイシートの具体的な書き方です。
文字の大きさ・色・太さ・書体・スタイルに関しての具体的なスタイルシートの書き方を説明しています。


TOPページに戻る   文字サイズを変えるには Control キーを押しながらマウスのスクロールホイールを回してください
文字に関してのスタイルシート具体例       

全般的な注意事項
絶対値 相対値
in インチ 1in = 25.4 mm em 大文字 M の高さを基準にした単位
cm センチメートル ex 小文字 xの高さを基準にした単位
mm ミリメートル % パーセント
pt ポイント 1pt = 1 / 72 in    
pc パイカ 1pc = 12 pt px ピクセル 表示上の1ドット幅

上に戻る
文字の大きさ
font-size: 10pt;  または  font-size: 1.2em;  等

数字を変えて文字サイズを変更します。HTMLと違い、超特大サイズも作れます。
<HTML><HEAD><TITLE>  </TITLE>
<STYLE TYPE="text/css">
<!--
SPAN{ font-size: 14pt;}  
-->
</STYLE>
</HEAD>
<BODY>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使える<SPAN>マルチAVノート</SPAN>誕生。
</BODY></HTML>
<HTML><HEAD><TITLE>  </TITLE>
</HEAD>
<BODY>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使える<SPAN style="font-size: 14pt;">マルチAVノート</SPAN>誕生。
</BODY></HTML>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。


文字の色
color: red;  または  color: #FF0000;  等

色名、色記号どちらでもOKです
<HTML><HEAD><TITLE>  </TITLE>
<STYLE TYPE="text/css">
<!--
SPAN{ color: red;}  
-->
</STYLE>
</HEAD>
<BODY>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使える<SPAN>マルチAVノート</SPAN>誕生。
</BODY></HTML>
<HTML><HEAD><TITLE>  </TITLE>
</HEAD>
<BODY>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使える<SPAN style="color: #FF0000;">マルチAVノート</SPAN>誕生。
</BODY></HTML>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。



文字の太さ
font-weight: bold;  または  font-weight: 900;  等

太字にします。太くするときは bold と書きますが、数字も使えます。100〜900の100刻みの数字を使い900は極太です。
<HTML><HEAD><TITLE>  </TITLE>
<STYLE TYPE="text/css">
<!--
SPAN{ font-weight: bold;}  
-->
</STYLE>
</HEAD>
<BODY>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使える<SPAN>マルチAVノート</SPAN>誕生。
</BODY></HTML>
<HTML><HEAD><TITLE>  </TITLE>
</HEAD>
<BODY>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使える<SPAN style="font-weight: 900;">マルチAVノート</SPAN>誕生。
</BODY></HTML>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。

上に戻る

文字の書体
font-family: MS 明朝;  または  font-family: MS 明朝, Osaka;  等

書体を指定するときは、書体の名前を書きます。カンマで区切って複数並べるとまず最初の書体を探し、それがないと次の書体を探します。 WindowsとMacの両方に書体を指定したいときには便利です
<HTML><HEAD><TITLE>  </TITLE>
<STYLE TYPE="text/css">
<!--
BODY{ font-family: MS 明朝, Osaka;}  
-->
</STYLE>
</HEAD>
<BODY>
<SPAN>テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。</SPAN>
</BODY></HTML>
<HTML><HEAD><TITLE>  </TITLE>
</HEAD>
<BODY>
<SPAN style="font-family: MS 明朝, Osaka;">
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。</SPAN>
</BODY></HTML>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。


文字のスタイル
font-style: italic;  または  font-style: oblique;  等

italic と書けばイタリック体 oblique と書けば斜体になります。
<HTML><HEAD><TITLE>  </TITLE>
<STYLE TYPE="text/css">
<!--
SPAN{ font-style: italic;}  
-->
</STYLE>
</HEAD>
<BODY>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使える<SPAN>マルチAVノート</SPAN>誕生。
</BODY></HTML>
<HTML><HEAD><TITLE>  </TITLE>
</HEAD>
<BODY>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使える<SPAN style="font-style: italic;">マルチAVノート</SPAN>誕生。
</BODY></HTML>
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
AV感覚で気軽に使えるマルチAVノート誕生。


上に戻る TOPページに戻る 前に戻る 順番に次を見ていく