| フォント（書体）タグ |
任意のテキスト文字の大きさ、色、スクロール、その他の装飾など |
<font size="±★">〜</font>
★･･･1〜7（１が最小） |
基準のフォントサイズから何段階大きいか小さいか±を使って相対的に指定します。デフォルト（指定がないとき）は「3」です。
ここで<font>はタグ、「size」は属性といい、属性は半角スペースを空けることで複数並べることができます。
「size」でなく「small」「big」それぞれ小さめ、大きめを指定することもできます。その場合は<small>〜</small>、<big>〜</big>と表示します。 |
<font size="★">〜</font>
★･･･1〜7（１が最小） |
フォントサイズを１〜７の固定値で指定します。デフォルト（指定がないとき）は「3」です。実際に表示される文字の大きさはユーザーのブラウザ設定（「表示」→「文字サイズ」）によって変わりますので絶対値ではありませんブラウザの設定を変えても文字サイズが変化しない方法は「応用」で書きます。（このページのほとんどはサイズが変化しないようにしています） |
<font color="★">〜</font>
★･･･色名または色指定値（#rrggbb） |
テキスト文字色を、色名または色指定値で指定します。色指定意値は、「#」のあとにｒ（赤）ｇ（緑）ｂ（青）の値をそれぞれ２桁の１６進数（00〜ｆｆ）で記述します。
「#000000」は黒色、「#ｆｆｆｆｆｆ」は白色になります。色名は環境によっては意図した色に見えない場合がありますので注意してください。ＨＴＭＬ全体の指定は後述する<body
text="★">等を使います。色名および色指定の代表は下表のとおりです。
red
#ff0000 |
navy
#000080 |
green
#008000 |
black
#000000 |
fuchsia
#ff00ff |
blue
#0000ff |
lime
#00ff00 |
gray
#808080 |
purple
#800080 |
aqua
#00ffff |
olive
#808000 |
silver
#c0c0c0 |
maroon
#800000 |
teal
#008080 |
yellow
#ffff00 |
white
#ffffff |
こちらにもう少し見やすいカラーサンプルを用意しました。
→カラーサンプル
上記以外の色は こちらのカラーテスト から選んでください。
新しく「RGBPicker」というのを手に入れました。好みの色のコードを調べるものです。→RGBPicker
|
<font face="★,★,★,･･･">〜</font>
★･･･フォントの名前（第１候補,第２候補,･･･） |
使用するフォントの種類を指定します。フォントの名前は文字の全角半角やスペースなども含めて正しく記入しないとそのとおりに表示されませんので、気を付けてください。どのフォントでも表示されないときは、ブラウザに設定されたデフォルトで表示されます。
こちらに書体と実際の表示例を用意しました。→ 書体（フォント） |
上記３つを組み合わせると、例えば
<font size="7" color="#006600" face="HG丸ｺﾞｼｯｸM-PRO">便利箱</font>
としたとき、右のようになります。
属性を複数組み合わせる場合は、それぞれ半角スペースで区切ります。 |
便利箱 |
<b>〜</b>
<em>〜</em>
<strong>〜</strong> |
<b>は太字、<em>と<strong>は強調タグです。表示はどちらも太字で同じですが、検索エンジンのキーワードとして利用する場合は<strong>が有利とされています。
書き方の例：
<font size="4"><strong>強調します。</strong></font> |
<i>〜</i>
<u>〜</u>
<s>〜</s> |
他にもありますが、比較的使用するのは
<i>斜体にする、
<u>下線をつける、
<s>取り消す
くらいで、それ以外はほとんど使わないでしょう。
|
| テキスト（文体）タグ |
段落、改行、ルビをつけるなど色々ありますが、よく使うタグをご紹介します。 |
| <p>〜</p> |
その範囲がひとつの段落であることを示します。一般的なブラウザでは、この範囲の前でテキストが改行され、さらに１行分の空白が挿入されます。終了タグの</p>は省略できますが、より正しくHTML文書を作成するためには省略しない方が良いでしょう。 |
| <br> |
最もよく使うのがこの<br>タグです。HTML文書で改行を入れても表示上は反映されません。実際に改行させるには<br>タグを記述します。また、何も記載のないところにこのタグを書くと１行空白ができます。これを利用して<br>タグを複数並べれば、複数行空くことになります。簡単な方法なのでよく使いますが、本当は正しい使い方ではないようです。 |
<blockquote>〜</blockquote>
<blockquote cite="★">〜</blockquote>
★･･･引用元のＵＲＬ |
比較的長い文章などを引用するときに使用します。タグに挟まれた上下に１行分の空白が挿入されます。また、他のサイトからの引用の場合は「属性」に「cite="★"」を付けます。ただし、今のところ特に表示変化はありません。 |
<ruby>〜<rt>〜</ruby>
使用例
<ruby>会社<rt>カイシャ</ruby>
表示 会社
|
ふりがなをつけるタグで、ひらがな・カタカナどちらでもできます。ただしルビの文字の大きさは指定できないようです。
Internet Explorer 5 以上に対応していて、Netscapeでは「会社カイシャ」と連続して表示され、ルビになりません。 |
<marquee ★>〜</marquee>
★サイズに関して
幅width、高さheight、マーキーの左右の余白hspace、マーキーの上下の余白vspace
★マーキーの動き方
behavior="scroll","alternate","slide"
★マーキーのスクロール方向
direction="left","right","up","down"
★動く回数
loop="回数"
|
テキストをスクロールさせるときのタグでよく見かけると思います。残念ながらInternet Explorerのみです。動作位置・回数など「属性」で細かく設定できます。
loop="回数" 指定しない場合デフォルトは無限です。
scrolldelay="秒数" 再描写までの時間で単位は1/1000秒。デフォルトは"85"。設定を大きくすると遅く見えます。"60"以下の設定はtruespeedで設定します。
scrollamount="ピクセル" 再描写までの距離。デフォルトは"6"で小さくなると遅く見えます。「scrollamount」はほとんど使いません、「scrollderay」だけでいいでしょう。
また、マーキーの背景色も指定できます。（bgcolor="*****"）
本当に細かく設定できるので書き切れません。使用例を書きますので、ご自身で内容を変更して確認ください。
<center><p><marquee width="360" behavior="alternate"
direction="left" scrolldelay="100" scrollamount="20"
loop="7" bgcolor="yellow">右や左に行ったり来たり</marquee></p></center>
動かない場合は、「更新」ボタンを押してください。
色んな動かし方の例を用意しました。 ≪動かし方の例≫
|
| ボディタグ |
背景色や壁紙を指定したり、位置を決めたり、テキストの大きさ・色など全体に関することを指定します。 |
<body bgcolor="★">〜</body>
★･･･色名または色指定値（#rrggbb） |
「bgcolor」で壁紙の色を指定します。「#」のあとにｒ（赤）ｇ（緑）ｂ（青）の値をそれぞれ２桁の１６進数（00〜ｆｆ）で記述します。
「#000000」は黒色、「#ｆｆｆｆｆｆ」は白色になります。色名は環境によっては意図した色にならない場合がありますので注意してください。
また、何も指定しないと「白色」と勘違いしますが、ユーザーの設定によって変化しますし、画面がちらつきやすいので「#ｆｆｆｆｆｆ」と指定しましょう。
ちなみに、このページの壁紙色は「#f9f0ff」です^^ |
<body background="★">〜</body>
★･･･画像ファイル名（ＵＲＬ）
画像の固定 bgproperties="fixed" |
壁紙に写真やイラストを貼り付ける「属性」です。読み込んだ画像は連続してタイル状に表示され、部分的に表示したりすることはできません。背景はサイズが大きいので、重い画像は避けた方が良いでしょう。表示させるＨＴＭＬと同じ階層にある「a.files」の中の「kabe.gif」という画像を背景にする場合は
<body background="a.files/kabe.gif">と相対ＵＲＬで指定します。
他のサイトの許可を得て使用する場合でも、そのサイトの画像にリンクを貼るのではなく、画像を保存してから使用しましょう。
また、壁紙を固定する場合は<body ････ bgproperties="fixed">とします。
詳しくは、「背景画像を一部に表示する」、「壁紙（背景）を固定する」に書きました。 |
<body ****="★">〜</body>
「****」部分は
text 標準のテキストの色指定
link まだ見ていないページへのリンク部の色
alink リンク部分を選択した瞬間の色
vlink すでに見たページへのリンク部の色
★･･･色名または色指定値（#rrggbb） |
「****」でテキストの種類を、「★」で色を指定します。。「text」「link」「vlink」はよく使いますが、「alink」は使ったことがありません。
色名は環境によっては意図した色にならない場合がありますので注意してください。
textのデフォルトは黒色（#000000）です。 |
<center>〜</center>
正しくは<div align="center">〜</div> |
挟まれた部分を左右の中央に配置します。広告などでよく見かける手法です。ＨＴＭＬ全体を中央に配置する場合は
<body><center>〜</center></body>とします。同様に「left」「right」があります。
テーブルや段落で指定する場合はalign属性で指定します。
<h>,<p>,<div>,<table>,<td>など。
今後は推奨しないタグや属性に指定されていますので、できるだけスタイルシートを使用した方が良いでしょう。
|
<hr>
<hr ★>
★･･･size="太さ"（ピクセル）
width="長さ"（ピクセルか％）
align="left","center","right"
noshade（平面的な横罫線） |
段落の仕切など、読みやすくするための工夫のひとつ。<hr>だけ指定すると横罫線が画面の左右いっぱいに表示されます。左右の位置について、デフォルトは「center」ですから、省略すれば中央に罫線を描きます。
罫線の色も指定でき、その場合は<hr color="★">です。色をつけると「noshade」の有無の差がほとんど判らなくなります。
<hr size="3" width="300" noshade> （上はnoshade）
|
<body ★>〜</body>
★･･･leftmargin="ピクセル"、以下同様に
rightmargin,topmargin,bottommargin |
ページの上下左右のマージン（余白）幅を設定します。
Internet Explorer 6のみ対応します。デフォルトは左右10ピクセル、上下15ピクセルです。
スタイルシートを使うと、他のブラウザでも有効になります。
|
| 基本情報タグ |
冒頭や<head>〜</head>間に書かれるタイトルやメタタグのことを示します。 |
| <!DOCTYPE> |
ＨＴＭＬでは各バージョンで使用するタグや属性などをＤＴＤ（文書型定義）として詳細に定義します。どのバージョンに従ってＨＴＭＬ文書を作成するのか宣言しなければなりません。ホームページビルダーなどを利用すると自動的に記述されますが、判らないときは書かない方が良いでしょう。今回は推奨されない要素や属性も書きますので、<head>より前に
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
と書きます。
フレームを使う場合は「Transitional」を「Frameset」に置き換えます。 |
<!-- 〜 -->
|
<!--タグと-->タグに挟まれた部分がコメントになります。ブラウザには表示されませんので、編集時のメモなどに利用します。また、この間に他のタグがあってもそのタグは実行されません。うまく利用しましょう。 |
<head>〜</head>間で
<title>〜</title> |
HTML文書にタイトルを付けます。一般的なブラウザではこのタイトルがテキストバーに表示され、「お気に入り」や「ブックマーク」に登録するときのタイトルにもなります。ホームページを検索エンジンなどに登録申請する場合は、このタイトル文字数に制限がありますので気を付けてください。 |
<head>〜</head>間で
<meta name="★" content="☆">
★･･･author,description,keywords,copyrightなど
☆･･･属性に対して設定する値 |
通称「メタタグ」と言います。文書の著者、内容、キーワードなどを定義します。name属性でキーワードを指定しておけば、検索エンジンが検索するために参照する情報を提供することができます。キーワードを複数並べるときは「,」カンマで区切ってください。このような機能は全ての検索エンジンで有効になるわけではありませんが、指定しておいた方が良いでしょう。このページの場合は、
<meta name="robots" content="index,follow">
<meta name="author" content="JoyWave">
<meta name="keywords" content="ＨＰ,制作,タグ,ソース">
<meta name="description" content="少しは役立つソース、タグの情報">
<meta name="copyright" content="http://joywave.net/">
ここでの注意として、検索を有利にするために内容に関係のない言葉の羅列などはＳＰＡＭ行為と見なされることがあります。タイトル、キーワードや説明文は内容に合った言葉で正しく書きましょう。 |
<head>〜</head>間で
<meta http-equiv="★" content="☆">
★･･･Content-Type,Content-Style-Type,
Content-Script-Typeなど
☆･･･属性に対して設定する値 |
ＨＴＭＬ文書のデフォルトで使用される文字コード、スタイルシート言語、スクリプト言語などを指定することができます。多くの場合はこれらの情報は記述しなくてもブラウザ側が自動的に判断しますが、文字化けや誤動作が生じる場合もありますので、指定しておきましょう。
一般的には、下記のようになります。
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript"> |
<head>〜</head>間で
<meta http-equiv="refresh"
content="★;url=☆">
★･･･読み込むまでの時間（秒）
☆･･･移動先の絶対ＵＲＬ（httpから始まる） |
今回の私のようにドメインやサーバーが変わったりしても、以前のＵＲＬにこのようなタグを用意しておけば、指定した時間を経過すれば自動的にこちらに移動します。でも、理由は判りませんがときどき移動しないときもありますので、本文には移動先の絶対ＵＲＬを書いておくのが親切でしょう。
なお、少し見にくいですが、★のあとの記号は「；」半角セミコロンです。 |
