 
【クリック募金】
【ウィルス対策】
【HTMLタグ】
【PCトラブル】
【ランキング】
【P R】
 
 
 
 
 
|
文字（フォント）
タグの簡易テスト（別窓）
| 改行 | 段落
| そのまま表示 | 大きさ
| 装飾・色 |
動く文字 | 読み仮名
| 上、下付文字 |
| 縦書き | リスト
| 文字化け防止 | コメント
| コメント（非表示） |
大きさ
| フォント | スタイルシート | 大きく・小さく | 見出し |
■フォント<font>
現在も多く使用されている<font>タグですが、これは非推奨のものだそうです。
1〜7までサイズ指定が出来ますが（ここでのご紹介は3まで）、ブラウザに依存した大きさで表示されます。WindowsでIE（インターネットエクスプローラー）をお使いの方はメニューバーの「表示」→「文字のサイズ」→「最大」や「最小」などを選んでみてください。
↓大きさが変わりませんか？
| 表示（大きさ） |
記述 |
| フォント1 |
<font size="1">文字</font> |
| フォント2 |
<font size="2">文字</font> |
| フォント3 |
<font size="3">文字</font> |
| フォント+1 |
<font size="+1">文字</font> |
| フォント+2 |
<font size="+2">文字</font> |
| フォント+3 |
<font size="+3">文字</font> |
| フォント-1 |
<font size="-1">文字</font> |
| フォント-2 |
<font size="-2">文字</font> |
| フォント-3 |
<font size="-3">文字</font> |
■スタイルシート<style>
上記の<font size="1〜7">に代わって使用を推奨されているのがスタイルシートによる定義です。
「ホームページできるかな」内でも、このスタイルシートでフォントサイズを固定しています。
スタイルシートは<body>〜</body>の表示部分とは別に、<head>〜</head>内に記述して使います。すると<body>〜</body>の表示部分は何もしなくてもよく、ページ全体にスタイルシートの内容が適用されます。
<html>
<head>
<title> </title>
☆スタイルシートはこの部分に記述します☆
</head>
<body>
</body>
</html>
| 例 |
記述 |
<body>16ピクセル
<td>10ピクセル |
<style type="text/css">
<!--
body { font-size: 16px}
td { font-size: 10px}
-->
</style> |
<body>16ピクセル、色#666666
<td>10ピクセル、色#CC0000 |
<style type="text/css">
<!--
body { font-size: 16px; color: #666666}
td { font-size: 10px; color: #CC0000}
-->
</style> |
※サイズは数字px（ピクセル）または数字pt（ポイント）で。
■大きく・小さく<big><small>
サイズやピクセルで指定する他に、<big>と<small>というタグがあります。厳密な指定はできませんので、とりあえず大きさを変えたい時に。
| 表示 |
記述 |
| 文字 |
<big>文字</big> |
| 文字 |
<small>文字</small> |
■見出し<h1〜h6>
記事の重要度によって付けられる「見出し」タグです。
数字が小さいほど重要度は高く、また通常ブラウザで表示される字も大きくなります。
| 表示 |
記述 |
h1
|
<h1>文字</h1> |
h2
|
<h2>文字</h2> |
h3
|
<h3>文字</h3> |
h4
|
<h4>文字</h4> |
h5
|
<h5>文字</h5> |
h6
|
<h6>文字</h6> |
※見出しタグは
ページタイトルに<h1>
サブタイトルに<h2>
各記事のタイトルに<h3>
というふうに、目的に合わせて使用（文章の構造を指定）するようにしましょう。
このページのトップへ
装飾・色
| 太字 | イタリック | 削除部分 | 取消し線 | 色 |
■太字<b>
太字にしたい文字を<b>〜</b>で囲みましょう。
■イタリック<i>
イタリック（斜体）にしたい文字を<i>〜</i>で囲みましょう。
■削除部分<del>
<del>〜</del>は、「これは削除されたものですよ」という意味です。すでに新しい文書があって、その違いを明示したい場合などに使われます。取り消し線が付くのですが、ブラウザによってはつかない場合もあるそうです。
■取消し線<s>
非推奨のタグではありますが<s>〜</s>で囲むことにより、上記の<del>よりも確実に取消し線を付けることができます。
■色
色の種類については「いろいろな色」をご覧ください。
| 表示（色） |
記述 |
| フォント1 |
色のみの記述
<font color="#FF0000">文字</font> |
| フォント2 |
サイズと色の記述
<font size="2" color="#0000FF">文字</font> |
| フォント2 |
色と太字の記述
<b><font color="#FF9933">フォント2</font></b>
|
このページのトップへ
動く文字
■マーキー<marquee>
IE（インターネットエクスプローラー）が独自に追加した要素で、文字をスクロールさせます（特に記述のない場合は右から左）。ブラウザによっては見えないかもしれません。
| <marquee direction="right">文字</marquee> |
| <marquee direction="right" width="幅">文字</marquee> |
| <marquee behavior="slide">文字</marquee> |
| <marquee behavior="alternate">文字</marquee> |
<marquee scrollAmount="数字">文字</marquee>
入れる数字が大きいほど早くなります。この表示例では"20"です |
| <marquee behavior="alternate" direction="up"
scrollAmount="速度" width="横幅" height="縦幅">文字</marquee> |
| <marquee direction="down" scrollAmount="速度"
width="横幅" height="縦幅">文字</marquee> |
| <marquee direction="up" scrollAmount="速度"
width="横幅" height="縦幅">文字</marquee> |
| <marquee width="幅" bgcolor="背景色の色"><font
color="フォントの色">文字</font></marquee> |
このページのトップへ
|
※このページに出てきた語句の意味
☆非推奨タグ/
Webに関する標準化団体「W3C」が発表した「HTML4.01」というHTMLの書き方・文法を細かく指定した勧告の中で、近い将来廃止予定とされたタグです（本当ですよ〜）。
「HTML4.01」は、「デザイン的なことはスタイルシートにまかせてHTMLはもっとシンプルにいこうよ」という主旨です。
HTMLはもともとブラウザへの指令書で、文章の構造の指定しかありませんでした。
<font>タグなどはそこへむりやりくっつけた色や大きさを指定するためのタグで、文章構造とは関係のないものです。
なので、初心にかえって文章構造を指定する以外のタグを排除しよう、デザイン的なことは文章の構造に沿ってスタイルシートで指定しよう、という訳です。
非推奨→いまは使えるけど近い将来無くなるもの
推奨→いまも使えるし、これから先も使えるもの
スタイルシート→ブラウザの対応は完璧ではないけれど、近い将来デザインの主流になるもの
と、覚えていただいていいと思いますよ。 |
このページのトップへ
|
ホームページのデザインテンプレートをダウンロードできるサイト
