文字に関してのスタイルシート具体例
文字に関してのスタイシートの具体的な書き方です。
文字の大きさ・色・太さ・書体・スタイルに関しての具体的なスタイルシートの書き方を説明しています。
文字の大きさ・色・太さ・書体・スタイルに関しての具体的なスタイルシートの書き方を説明しています。
損をしない自動車保険選び損をしないクレジットカード選び銀行の利用就職・アルバイト情報
TOPページに戻る 文字サイズを変えるには Control キーを押しながらマウスのスクロールホイールを回してください
文字に関してのスタイルシート具体例
▲
全般的な注意事項
- 大文字、小文字の区別はありません。
- 数字を使うときには、ほとんどの場合単位をつけます。
- 単位には絶対的な大きさを表す絶対値と、相対的な大きさを表す相対値がありますので、 自分の使いやすいものを各々一つずつ用意しておくと便利です。
- 相対値を使っておくと利用している人が、好きなサイズに変更することができます。
例えば、このページは相対値を使っていますので「ctrl」キーを押しながら、マウスの スクロールホイールを回せば、文字サイズが変更できます。 - 絶対値を使うとこのようなことはできませんが、レイアウトが崩れる心配は減ります。
- 但し 1cm と記入したからといって、画面上で実際に 1cm に表示されるわけでは有りません。 ディスプレーの設定次第で、同じ 1cm でも変化します。
| 絶対値 | 相対値 | ||
| 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> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使える<SPAN>マルチＡＶノート</SPAN>誕生。 </BODY></HTML> |
|
|
<HTML><HEAD><TITLE> </TITLE>
</HEAD> <BODY> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使える<SPAN style="font-size: 14pt;">マルチＡＶノート</SPAN>誕生。 </BODY></HTML> |
 |
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。 |
文字の色
color: red; または color: #FF0000; 等
色名、色記号どちらでもOKです
|
|
<HTML><HEAD><TITLE> </TITLE>
<STYLE TYPE="text/css"> <!-- SPAN{ color: red;} --> </STYLE> </HEAD> <BODY> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使える<SPAN>マルチＡＶノート</SPAN>誕生。 </BODY></HTML> |
|
|
<HTML><HEAD><TITLE> </TITLE>
</HEAD> <BODY> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使える<SPAN style="color: #FF0000;">マルチＡＶノート</SPAN>誕生。 </BODY></HTML> |
|
|
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。 |
文字の太さ
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> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使える<SPAN>マルチＡＶノート</SPAN>誕生。 </BODY></HTML> |
|
|
<HTML><HEAD><TITLE> </TITLE>
</HEAD> <BODY> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使える<SPAN style="font-weight: 900;">マルチＡＶノート</SPAN>誕生。 </BODY></HTML> |
|
|
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。 |
文字の書体
font-family: ＭＳ 明朝; または font-family: ＭＳ 明朝, Osaka; 等
書体を指定するときは、書体の名前を書きます。カンマで区切って複数並べるとまず最初の書体を探し、それがないと次の書体を探します。 WindowsとMacの両方に書体を指定したいときには便利です
|
|
<HTML><HEAD><TITLE> </TITLE>
<STYLE TYPE="text/css"> <!-- BODY{ font-family: ＭＳ 明朝, Osaka;} --> </STYLE> </HEAD> <BODY> <SPAN>テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</SPAN> </BODY></HTML> |
|
|
<HTML><HEAD><TITLE> </TITLE>
</HEAD> <BODY> <SPAN style="font-family: ＭＳ 明朝, Osaka;"> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。</SPAN> </BODY></HTML> |
|
|
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。 |
文字のスタイル
font-style: italic; または font-style: oblique; 等
italic と書けばイタリック体 oblique と書けば斜体になります。
|
|
<HTML><HEAD><TITLE> </TITLE>
<STYLE TYPE="text/css"> <!-- SPAN{ font-style: italic;} --> </STYLE> </HEAD> <BODY> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使える<SPAN>マルチＡＶノート</SPAN>誕生。 </BODY></HTML> |
|
|
<HTML><HEAD><TITLE> </TITLE>
</HEAD> <BODY> テレビも映画も音楽も、ワンタッチですばやく楽しめる。 ＡＶ感覚で気軽に使える<SPAN style="font-style: italic;">マルチＡＶノート</SPAN>誕生。 </BODY></HTML> |
|
|
テレビも映画も音楽も、ワンタッチですばやく楽しめる。
ＡＶ感覚で気軽に使えるマルチＡＶノート誕生。 |
上に戻る TOPページに戻る 前に戻る 順番に次を見ていく