
HTML HEAD TITLE META LINK BASE SCRIPT NOSCRIPT STYLE BODY DIV HR Hn P BLOCKQUOTE CENTER TABLE CAPTION TR TH TD UL OL LI DL DT DD FORM INPUT TEXTAREA SELECT OPTION SPAN A IMG MAP AREA BR SUP SUB RUBY RB RT RP FONT TT I B BIG SMALL U S STRIKE BLINK EM STRONG DFN CODE SAMP KBD VAR FRAMESET FRAME NOFRAMES IFRAME NOBR WBR COMMENT PRE MARQUEE
A AREA B BASE BIG BLINK BLOCKQUOTE BODY BR CAPTION CENTER CODE COMMENT DD DFN DIV DL DT EM FONT FORM FRAME FRAMESET HEAD Hn HR HTML I IFRAME IMG INPUT KBD LI LINK MAP MARQUEE META NOBR NOFRAMES NOSCRIPT OL OPTION P PRE RB RP RT RUBY S SAMP SCRIPT SELECT SMALL SPAN STRIKE STRONG STYLE SUB SUP TABLE TD TEXTAREA TH TITLE TR TT U UL VAR WBR
要素名
| ||||||||
|
この文章がHTMLで書かれていることを表している(のか?)。 が、無くてもエラーにならない。 しかも、あるからと言ってどうというわけでもない、全く謎なタグ。 ブラウザによっては意味があるかも知れないが、IE、NC共に無意味。 このタグからはみ出して書いたとしても、ちゃんと認識されますし。 HTML分文全体をこれでくくってしまえばいい。 | |
| (始) (終) (Root) <HEAD><BODY> HEAD BODY | |
| lang |
言語を指定する。書いてもあんまり意味なさそう。 日本語のページなら lang="ja"とすればいい。 |
|
ヘッダです。頭です。誰がなんと言おうと頭です。英語辞書にも載ってます。 このタグの中にはこのページについてのいろいろなことを書きます。 ページタイトルやらロボット系サーチエンジンへの自己主張やらをしまい込んでおくのにつかいます。あと、JavaScriptやVBScriptのプログラムを置いたりもします。 あとタイトルとか。タイトルは必須らしいです。 | |
| (始) (終) (HTML) <TITLE><META><LINK><BASE><SCRIPT><STYLE>etc. TITLE META LINK BASE SCRIPT STYLE |
|
タイトルです。ヘッダ(<head>〜</head>)の中に書きます。
このタグで囲った文字が、そのページのタイトルになり、ブラウザの一番上に表示されたり、「戻る」ときの目印になったりします。 長さに限界は無い(と思う)けど、他のタグ(aやfontやimg)が効きません。 | |
| <始> <終> (HEAD) [テキスト] HEAD |
|
ヘッダの中に書く、補足タグです。 自己顕示欲の強いページビルダが自分の名前やバージョンを書き込んでみたり、自己顕示欲の強いページの管理人がサーチエンジンへの自己主張をしたりするのに使う、便利、かつ汎用性にとんだ基本的には無意味なタグです。 登録式サーチエンジンにはここに更新情報をのせればそれを検索対象にしてくれるちなみちゃんみたいなのもあります。 また、ロボット系のサーチエンジンがHPに何が書いてあるかとか、何語で書かれているかなどの情報を得るもとにもなるみたい。 まぁ、好き勝手書いていいってわけでしょうねぇ、たぶん。 オートリロード機能やらをページに持たせることも可能。 | |
| <始> [--] (HEAD) HEAD | |
| name |
名前。なにが名前だかは良く分からないが、「私はnameです。私の持っている情報はcontentですよ〜」って感じのnameを指定します。Author(著者)、Keywords(キーワード)、Expires(キャッシュの有効期限)、その他その他。Lastmodified(最終更新)なんかもあったかなぁ・・・
|
| content |
上のやつのcontent、つまり、nameさんの持っている情報を書きます。 Authorなら「 世界で最強のオトコ」とか「どこかのだれか」とか。 Keywordsなら「今日の朝ごはん」とか「リンクリスト」とか。 Expiresなら「Sun, 19 Nov 2001 00:00:00 GMT」とか。
|
| http-equiv | HTTPのヘッダ情報の付加情報。もはや意味不明。 |
とりあえず、良く使うやつだけ例を書いておきます。
<meta http-equiv="Refresh" content="180">
3分(180秒)ごとにこのページをリロードしますよ、という指示。
<meta http-equiv="Refresh" content="180;URL=http://www.sp.cup.com/">
3分たったらURLで指定したページに勝手にジャンプしますよ、という指示。上の例ではサーファーズパラダイスに。ページが移転したときなどによく見掛けるアレです。 | |
|
他の文章との関係を書くのに使ったりするらしいです。が、僕はスタイルシートのファイル以外が入ってるのを見たことありません。 ヘッダ(<head>〜</head>)の中に書きます。 | |
| <始> [--] (HEAD) HEAD | |
| rel | 目標のものとどんな関係かを書く。 |
| type | 目標のもののMIMEタイプを書く |
| href | 目標のもののURLを書く |
| title | 目標のもののタイトルを書く |
スタイルシートを埋め込む時は次のようにする。
本来なら上みたいに書くとjkn.cssが常時適用され、jkntags.cssかjkntags2.cssをユーザーが選んで適用するはずなのですが、IEでは全部適用されます。NN6ではちゃんと動きます。
| |
| ベース、すなわち「基準」をあらわすタグ。ヘッダ(<head>〜</head>)の中に書きます。 | |
| <始> [--] (HEAD) HEAD | |
| href |
相対パスで指定されているすべてのアドレスに効果。対象アドレスの基準ディレクトリを変更する。 |
| target | すべてのリンクアンカーに効果。対象アンカーのターゲット属性の規定値を変更する。 |
|
スクリプト言語(JavaScriptとか)を記述します。 そのなんちゃら言語を記述して何が楽しいかというと、普通HTMLでは記述できない、動的な処理(時間によってあいさつ文を変えるとか)ができるようになります。 でもスクリプト言語自体の解説をしているととてもじゃないけどこのスペースでは足りないのでここではやりません。 | |
| <始> <終> (HEAD)(BODY)(I) [SCRIPT] HEAD BODY NOSCRIPT | |
| language |
スクリプトが何語で書かれているかを指定します。何語といっても英語とか日本語とかではなく、JavaScriptとかVBScriptです。
|
| src |
スクリプト言語を外部参照する時に使います。src="mm.js"とするとmm.jsを読み込んで実行するわけですね。この時、<SCRIPT src="mm.js"></SCRIPT>のように、タグを閉じるのを忘れないようにしましょう。 |
表示する時に現在時刻を表示するには、
を表示させたい位置に書き込みます。
| |
| SCRIPTに対応していないブラウザのための代替表記を示します。 | |
| <始> <終> (B) [B][I] SCRIPT |
|
ヘッダの中に書いて、スタイルシートを記述します。 スタイルシートは普通<LINK>で関連付けるんですけど、そのHTMLでしか絶対使用しないようなスタイルならばこのタグで記述します。 | |
| <始> <終> (HEAD) [StyleSeet] HEAD LINK BODY | |
| type |
スタイルシートの種類。必須です。type="text/css"って書くとCSSのスタイルシートということになります。
|
上の例は背景色その他もろもろを変更し、なおかつリンクの下線を消した上太字にし、リンクにマウスを重ねると色を変えて下線を表示するという例です。実験室で使っているまんまです。 | |
|
ボディー、つまり体、本体のことです。 このタグで本文を囲め、と言うことなのでしょうが、はみ出して書いても特に何も言われません。 | |
| (始) (終) (HTML) [B][SCRIPT] HTML STYLE | |
| bgcolor | 背景の色を指定します。 |
| text | 文字の色を指定します。 |
| link | 未訪問のリンクの色を指定します。 |
| vlink | 訪問済みのリンクの色を指定します。 |
| alink | クリックしているリンクの色を指定します。 |
| background | 背景画像を指定します。 |
| bgproperties |
よく分からないんですが、IEではここにFIXEDを指定すると、画面をスクロールしても背景画像が動かなくなります。
|
色の指定方法はいつもと同じです。たとえば
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#ff0000" alink="#ff00ff">
とすると、背景白、文字黒、未訪問青、訪問済み赤、クリックすると紫、てなもんです。これらを指定しないと、ブラウザ側の設定がそのまま使用されます。部分的に書いても部分的に使用されますから、たとえば文字色黒とだけ指定したとき、ブラウザのデフォルト背景色が黒だと何も見えなくなるので、一個でも指定するときは全部指定してあげてください。 また、何かの拍子に背景画像を読み込めないことがあるかもしれませんから、背景色は背景画像の色調と合わせるのがいいでしょう。 | |
ブロック要素は要素の前と後ろが改行されます。たぶん。
全てがalign属性を持ってます。
|
意味のないブロック要素。意味がないことに意味があるのです。 他のブロック系タグで意味付けできないものを囲うらしいですね。 主な用途はセンタリングや右寄せ左寄せなど。 | |
| <始> <終> (B) [B][I] CENTER IMG SPAN | |
| align |
表示位置指定というか回り込み制御というか。 IMGタグのAlignと働きは同じです。 left、center、rightを指定します。 |
センタリングする時は
こう。
| |
| ほりぞんたりーるーらー、即ち水平線を引きます。ところで縦線はないのでしょうかねぇ? | |
| <始> [--] (B) | |
| align |
回り込み制御。
left、center、rightを指定します。 |
| size | 線の太さ。ピクセル指定。高さじゃないところがオツ。 |
| width | 線の幅。ピクセルとかパーセントとか。 |
| color | 線の色。指定方法はいつもと同じ。 |
| NOSHADE | 線の影。=なんとかの指定はない。これをつければ影がなくなるだけ。 |
普通は<HR>とだけ書きます。いや、閉じタグ禁止ですし、他に書くような属性もないですからね。
| |
|
<H1>〜</H1>
<H2>〜</H2>
<H3>〜</H3>
<H4>〜</H4>
<H5>〜</H5>
<H6>〜</H6>
を総称してHnと書きますが、ようは見出しです。 数字が小さいほど強い見出しになります。 特に文句はいわれませんが、<H1>から順番に使わなければいけません。 見出しですから、センタリングや文字サイズの変更のためだけにこのタグを使ってはいけません。<SPAN>や<FONT>、<BIG>等を使いましょう。 | |
| <始> <終> (B) [I] SPAN FONT BIG | |
| align |
回り込み制御。わりとあたらしいブラウザしか対応していなかったりも。
left、center、rightを指定します。 |
「<H1>から順番」というのは、つまりこういうことです
| |
|
このタグで囲まれた文字は「1段落」として考えられます。
実は段落の中にはテーブルや水平線などのブロック要素が入らないので、このタグでセンタリングしようなどと思わないで下さい。 | |
| <始> (終) (B) [I] BR TABLE HR |
|
これで挟んだテキストは引用文と言うことになって、NNやIEのデフォルトでは上下左右が結構空きます。 インデントされたように見えるので、インデント目的で使う人もいますが、反則ですので止めましょう。なんてゆーか、3対1で負けてるしね。あなたのインデントは上下右も空くのかと問いつめたいですな。 インデントは普通<P>にスタイルを指定して行います。 | |
| <始> <終> (B) [B][SCRIPT] P | |
| cite | 引用元URL |
表示すると
こう。 中身は<BODY>要素と同じもの、すなわちブロック要素のみということで。 | |
|
このタグで囲まれた文字は中央に寄ります。 これがあると何もないページでも見栄えがするし、なにより簡単なのでおそらくどのサイトにも一つぐらいはあるんじゃなかろうかと思われます。 <DIV align="center">と同じ。 | |
| <始> <終> (B) [B][I] DIV |
ブロック要素・テーブルを記述するために必要な要素(タグ)
|
テーブル、つまり日本語で言うところの「表」を創ります。表の中に表を入れるような技ももちろん可能。 当たり前のように、簡単なモノなら簡単ですが複雑なモノは強烈に複雑怪奇な形をしてしまう、恐怖のタグです。なにしろ、このタグを打つためのソフトまで出るほどです。 ページビルダーなどでつくるのが無難かと思われますが、使いこなせればページの見栄えが相当よくなります。 閉じ忘れに気を付けましょう。閉じ忘れるとどうなるかわかりませんよ。 | |
| <始> <終> (B) [表] CAPTION TR TH TD | |
| border |
枠線の太さをピクセル数で指定。border=0で見えなくなる。
|
| bgcolor |
テーブル全体の背景色。指定方法はいつもと同じ。 <TR>や<TD>で上書きできる。 |
| bordercolor | 枠線の色。 |
| background |
表の背景画像です。 試したところでは、IEではテーブル全体に背景として表示されましたが、NCではテーブルのマスごとに画像が表示されました。 |
| align |
いつもと同じ回り込み制御。テーブルのセンタリングはこれで行います。
left、center、rightを指定します。 |
| width | テーブルの横幅です。ピクセルかパーセンテージで指定します。 |
| summary | テーブルの概略です。HTML4を名乗るなら、書いたほうがいいらしいです。 |
すぐに例と言われても困るんですが、参考までにこのページの基本的なテーブルを。
| |
テーブルのタイトル(キャプション)です。<table><caption>図1</caption>というふうに、<table>の後に付けます。無くても構いません。
| |
| <始> <終> (TABLE) [I] TABLE | |
| align |
テーブルのどこに表示するかをtop、bottom、left、rightで指定します。それぞれテーブルの上、下、左、右ですね。 |
|
テーブルの行を表します。 <TR>から</TR>までが一行になります。 一行の中には必ず一つ以上の<TH>か<TD>が入ります。むしろその二つの入らない行は存在しないので<TR>を書く意味がないでしょう。 ここの属性値をいじると、TDに引き継がれます。 | |
| <始> (終) (表) <TD><TH> TABLE TH TD | |
| align |
中の文字の水平方向表示位置をいつものようにleft、center、rightで指定します。 |
| valign |
中の文字の垂直方向表示位置をtop、middle、bottomで指定します。 |
| bgcolor | 横一列の背景色です。 |
| background | 横一列の背景。NNのみ? |
| 表には付き物の「月曜日」「火曜日」・・・・のような「見出し」です。 基本的に<TD>と同じですが、文字が太字で表示されたりしてそれっぽくなります。 属性は全て<TD>と同じです。 | |
| <始> (終) (TR) [B][I] TABLE TR TD | |
| colspan |
横(右)方向にいくらかまたがる枠をつくります。colspan=2とすると、二つ分の幅の枠が出来ます。その行に入る<TH>や<TD>の数を一つ減らしてください。
|
| rowspan |
縦(下)方向に枠をまたぎます。 縦にまたぐととたんにテーブルがややこしくなりますよ・・・(体験談 |
| width | セルの横幅をピクセル数かパーセンテージで指定します。 |
| height | セルの縦幅をピクセル数で指定します。 |
| background | セルの背景画像を指定します。 |
| bgcolor | セルの背景色を指定します。 |
| align |
セル中の文字の水平方向表示位置をいつものようにleft、center、rightで指定します。 |
| valign |
中の文字の垂直方向表示位置をtop、middle、bottomで指定します。 |
| NOWRAP | =なんとかの指定はありません。これをつけると項目内で改行されなくなります。 |
| 表のセル一つです。<TR>と</TR>に挟んで使います。 属性は全て<TH>と同じです。 | |
| <始> (終) (TR) [B][I] TABLE TR TH | |
| colspan |
横(右)方向にいくらかまたがる枠をつくります。colspan=2とすると、二つ分の幅の枠が出来ます。その行に入る<TH>や<TD>の数を一つ減らしてください。
|
| rowspan |
縦(下)方向に枠をまたぎます。 縦にまたぐととたんにテーブルがややこしくなりますよ・・・(体験談 |
| width | セルの横幅をピクセル数かパーセンテージで指定します。 |
| height | セルの縦幅をピクセル数で指定します。 |
| background | セルの背景画像を指定します。 |
| bgcolor | セルの背景色を指定します。 |
| align |
セル中の文字の水平方向表示位置をいつものようにleft、center、rightで指定します。 |
| valign |
中の文字の垂直方向表示位置をtop、middle、bottomで指定します。 |
| NOWRAP | =なんとかの指定はありません。これをつけると項目内で改行されなくなります。 |
ブロック要素・リストを記述するために必要な要素(タグ)
|
アンオーダードリスト(順不同のリスト)をつくります。テーブルと同じように姉妹タグ<LI>と併せて使います。 入れ子にすると少しずつインデント(左側にスペースが入る)されていくらしい。 入れ子は、<UL>ではなく、<OL>を使ってもいい。 | |
| <始> <終> (B) <LI> OL LI | |
| type |
リストの項目ごとに先頭につくマークを指定します。circle、square、discを指定可能。何が表示されるかは使用例を見て下さい。 |
| 使用例はLI要素を参照 | |
|
OLであることを表すタグです。つまりスチューデントをブレイク可能な・・・いや、違います。はい。 OLとはオーダードリスト、すなわち順序つきリストのことです。間違ってもオフィスレディを表示するタグではありません。だったらいいなぁ、と、いくら妄想しても無駄ですからあきらめましょう。 (ULにスタイルシートを適用してマークをOLの絵にすればOLさんのリストを作ることができるかもしれませんが・・・) テーブルと同じように姉妹タグ<LI>と併せて使います。 入れ子にすると少しずつインデント(左側にスペースが入る)されていくらしい。 入れ子は、<OL>ではなく、<UL>を使ってもいい。 | |
| <始> <終> (B) <LI> UL LI | |
| type |
振り番号の形式を指定します。これを指定しないとtype=1を指定したことになります。指定できるのは A、a、I、i、1です。何が表示されるかは使用例を見て下さい。 |
| start | 開始番号を指定。というよりも、この番号より低い番号は振ってはダメ、と宣言する属性。 |
| 使用例はLI要素を参照 | |
| <UL>や<OL>の中に書いて、リストの項目を定義します。終タグは省略可。省略した方がわかりやすいかも。 | |||
| <始> (終) (UL/OL) [B][I] UL OL | |||
| type | <UL>や<OL>のtype属性と同じ。 | ||
| value | 振り番号(項目)を指定します。 | ||
| |||
|
デフィニション(定義)リストを作成します。定義リストとは、あるタームとその定義が交互に出現するようなもの、らしいです。 ふつうのリストとの違いは、振り番号もマークも何も付かないことぐらいかなぁ・・・ <DT>や<DD>と併せてつかう。けど使い道あるのかなぁ・・・・謎だ。 | |
| <始> <終> (B) <DT/DD> DT DD | |
| COMPACT | これを書くと、省スペースで表示するらしい。 |
| デフィニションターム(定義語)を指定します。終タグは省略可。 | |
| <始> (終) (DL) [I] DL DD |
| デフィニションディスクリプション(定義内容)を指定します。終タグは省略可。 | |
| <始> (終) (DL) [B][I] DL DT |
ブロック要素・フォームを記述するために必要な要素(タグ)
|
CGIプログラムやJavaScript等のスクリプト言語に渡す引数を書くタグを書きますよ、というタグ。 <INPUT>等の部品を使うときにそれを囲うタグ。 実は入れ子にするのを禁止されていたりも。 | |
| <始> <終> (B) [B][SCRIPT]-<FORM> INPUT TEXTAREA SELECT OPTION | |
| action | サブミット(送信)ボタンが押されたときに、フォームのデータを送る先のアドレスを指定する。 |
| method |
データを送る方法。通常は無難にmethod=postとする。
通の人はgetを使ったりしますよ〜〜
|
| name | フォームの名前。JavaScript等を使うときに重要。でもCGIに送るときはあまり意味がないかも。 |
| target |
これはCGIにデータを送った後、帰ってきたデータ(姓名判断の結果なり本日の運勢なり)をどこに表示するかの指定。 <A>タグのtargetと同じ。 |
| フォームの要とも言うべき、データ入力やら「送信」「リセット」ボタンを配置するタグ。 | |
| <始> [--] (I)(FORM) FORM TEXTAREA | |
| size | テキスト入力フィールドの幅です。半角文字数で指定。 |
| type | |
| maxlength | 入力される文字の最大長。文字数で書きます。 |
| name |
各フィールドの名前。重複しても文句は言われないが不都合はある。 ここで指定した名前はCGIプログラムにname=なんたら、の形で送られる。 |
| value |
入力フィールド系ではあらかじめかき込まれている文字列。 hidden,radio,checkboxでは送られる値、ボタン系ではボタンに書いてある文字を指定する。 |
| src | 絵ボタンの絵。 |
| CHECKED | チェック系で、あらかじめチェックされているところにこれを書く。 |
|
<Input type=text>のでかいヤツ。 このタグで囲った範囲が、<Input type=text>で言うvalue属性と一致する。 あくまでもtextのでかいやつなので、見かけに反してインライン要素だったりするので注意。 | |
| <始> <終> (I)(FORM) [テキスト] FORM INPUT | |
| rows | 行数。実は必須。 |
| cols | 幅。文字数ではいる。実は必須。 |
| name | 名前。ここで指定した名前はCGIプログラムにname=なんたら、の形で送られる。 |
| wrap |
折り返し指定。wrap="heard"と書けば無理やり折り返す。書かなくてもIEでは無理やり折り返す。
|
|
プルダウン形式でいくつかの候補の中から一つ選ばせるアレです。 検索エンジンの「表示件数」やら「検索対象」、はたまたチャットの「色」など、至る所でお目にかかるので、ああ、アレか、ぐらいはわかるはず。 <option>タグと組み合わせないと使えない(と思う)。 | |
| <始> <終> (I)(FORM) <OPTION> FORM OPTION | |
| name | 名前。ここで指定した名前はCGIプログラムにname=なんたら、の形で送られる。 |
| size |
一度にどれだけ表示するか。size=1を指定するとプルダウン形式になる(はず)。1以外の時は、データがサイズより多いとスクロールバーが付くので多い日も安心。 |
| MULTIPLE | これを書くと複数選択可能になる。 |
<Select>タグの中に入るデータ。これがないとセレクトの意味がない。<Select><option>1<option>2<option>3<option>4<option>5</select>
みたいな感じで書き連ねて指定する。ちなみにこの例ではこんな感じになる。 このタグのすぐ後ろにある文字が、選択対象になるわけです。 | |
| <始> (終) (SELECT) [テキスト] FORM SELECT | |
| selected |
あらかじめ選択されているもの。<option selected>なんたらと書けば「なんたら」が選択された状態になる。
複数書いたら最後の一つが採用される(かも)。
|
| value |
セレクトを使っていると、CGIには英数字で送りたいのが、オプション指定は日本語にしたい、と思うことがしばしばあります。 そんなとき役に立つのがこの属性。 <option value=red>赤と書くと、「赤」が選択されればCGIには「red」が送られるという優れモノ。一家に一台欲しい(謎)。 |
インライン要素は行内でいろいろ効果を発生させる要素です。
|
<DIV>と同じく、意味のないことに意味のある、意味のないインライン要素です。 他のインライン系タグで意味付けできないものを囲うらしいですね。 主な用途はスタイルシートの適応です。 | |
| <始> <終> (I) [I] DIV |
|
アンカーです。杭です。アウトロースターやらで宇宙船から飛び出したりするアレです(謎)。ヤマモトヨーコなんかにも出てくるあのアンカーです(謎)! いろんなモノに貼り付けてたぐりよせたりするのに使うんです。 ま、まあ、平たく言えばリンクなんです。クリックすると他のページへ行ったり出来る超有名な例のアレです。 基本的な使い方は <A href="index.html">インデックス</A>と、いうふうに<A>と</A>の間にリンクを貼りたい文字や絵を書くのです。
| |
| <始> <終> (I) [I]-<A> | |
| name |
name="a"とすると、このアンカーにaという名前がつきます。こんな事をして何が楽しいかというと、目次が作れるのです。 <A href="note.html#a">一枚目</a>という風に書けば、note.htmlのaと名前を付けたところが表示されます。この#aの部分を、部分識別子(Fragment indentifiers)と呼ぶみたいです。 |
| href |
href="index.html"というように、href=の後ろに、飛ばしたい先のアドレスをくっつけます。実際に書くと <A href="index.html">戻る</A>こんな感じかな。ブラウザの設定によりますが、LZHファイルやなんかを指定するとダウンロードさせてしまうみたいですよ。 JPGやGIFを指定することも出来ます。この場合は「戻る」以外で戻れなくなります。 href="mailto:メールアドレス"と書いておくと、メーラーが起動します。
|
| target |
どのウインドウ/フレームにリンク先を表示させるかを指定します。target="_top"とすると、すべてのフレームを畳んで、一画面占有します。つまり、フレームを解除するワケです。target="_parent"とすると、入れ子になっているフレームが一段とれるんだったかな・・・?target="_blank"とすると、新しくウインドウを出して、そこに表示します。ブラウザウインドウが一個増えるので、重くなります。これを嫌う人は結構いるので、乱用は禁止です。target="name"は、nameと名付けられたフレームに表示します。自分のいるウインドウに該当する名前のフレームが無かったら新しくウインドウを開いてそこに表示する・・・はず。同じ名前の別ウインドウに表示されたりもするんだったかな、確か。これらの属性値のうち、決まったもの( _parentなど)は、小文字で書かなければならないようです。
|
|
絵を表示させます。他に意味はありません。 張り付けられる絵はGIF(CompuServeGIF)かJPG(JPEG/TIFF)です。BMPなどは多分ダメです。PSD(フォトショップ形式)などはもってのほかです。 実際のところはブラウザによるので、プラグインさえあれば、BMPだろうがPSDだろうがICOだろうが表示できますけどね。 | |||||
| <始> [--] (I) MAP | |||||
| src |
絵のアドレスを指定します。<IMG src="jkn.jpg">のようにすると 絵が出せます。簡単簡単。
| ||||
| lowsrc |
二段階表示用の軽い画像のアドレス。 ブロードバンド時代にあってもはや無意味か・・・ | ||||
| title |
画像のタイトルです。IEやNN6のようなブラウザでは、画像にマウスを重ねた時に表示されます。 IEの場合はTitle属性がない場合はAlt属性を表示したりします。NN4ではTitle属性は無視されます。NN6ではTitle属性がない場合はAlt属性があっても何も表示されません。 確実にひょろっと表示させたい時は両方書くのがいいでしょうね。 | ||||
| alt |
代替テキストを指定します。 代替テキストとは、絵のデータが読み込まれるまでに表示されたり、カーソルを重ねるとひょろっとあらわれるあの文字です。当然のように<font>タグやらは効きません。 NN6では画像の読み込みに失敗した時にはこのテキストだけを表示します。 ブラウザの設定を変えて絵を表示させない人や絵を表示できないブラウザを使っている人のためにも、ここはしっかり押さえておきましょう。 絵のタイトルやファイルサイズ、日付なんかを書いたりするみたいです。 | ||||
| height |
英語辞書で引いてもわかるように、「高さ」です。 つまり、この絵の縦の長さをピクセル数で表したモノで、小数は不可です。 綴りに注意して下さい。hightではありません。 | ||||
| width |
これは「幅」です。height同様、この絵の横の長さをピクセル数で表したモノです。 そして、widthとheightは、二つそろってその真価を発揮するのです! なんと、この二つを指定すると、ブラウザがレイアウトを「絵」のデータをもらう前に決められるので、ページが早く表示されます。 しかも、元の絵がどんなサイズだろうとも、その枠に収まるように変形してしまうのです! 200X200の絵に width=200 heigth=100を指定すると、なんと横長に!!ここまでの三つのオプションが指定されていないと腹を立てて「戻る」人がこれまた結構います。忘れないようにしましょう。 | ||||
| hspase |
画像の左右の空白。ピクセル数を指定。 横にずらずらと絵を並べるときやテキストを回り込ませるときにつかう。 | ||||
| vspase | 画像の上下の空白。ピクセル数を指定。 | ||||
| boder |
ボーダー、つまり枠線です。
例えば<Img src="jkn.jpg" border=15>のようにすると、
こうなります。また、 border=0なら、絵にリンクを貼っても青線などの「リンクの証」は見えなくなってしまいます。丸い絵なんかに使いましょう。
| ||||
| usemap |
<MAP>タグで使用する絵につける、土地の名前のようなもの。 使い方は<MAP>タグ参照。 | ||||
| align |
絵とテキストの位置関係を、left,right,top,bottom,middleを指定できます。
英語の苦手な人のために一応書きますが、順に左寄せ、右寄せ、上側、下側、中ほどです。
「え〜〜っ、元々左に寄ってるよね。leftって意味あるの?」と言いたくなるかも知れませんが、ちゃんと意味はあります。
それはズバリ!テキストの回り込みです!!
| ||||
alignの違いによる表示の差について。
| |||||
|
クリッカブルマップをつくります。一つの絵のなかにいくつもリンクがはってあるというアレです。 面倒なのでおとなしくページビルダーの力を借りるべきでしょう。まぁ、タグの解説なんで、一応のせときます。 使い方は、まず、イメージタグ(IMG要素)に usemap="#map01"みたいなオプション(属性)をつけます。んで、このタグにname="map01"のオプションをつけて、そんでもってこのタグで次のタグをくくります。ああ、ややこしぃ。 | |
| <始> <終> (I) [B]<AREA> IMG AREA | |
| name |
どの絵をクリッカブルマップに使うかを指定します。 ここに書くのは<IMG>でのusemap属性です。 |
| |
|
クリッカブル(クリック可能な)マップ(地図)の、リンク範囲(勢力範囲)を指定するタグです。上のマップタグの中に書きます。 すでに占領されているところを占領しようとしても、その部分は占領できません。エリアを重ねたらもとからあるものが優先するわけです。 | |
| <始> [--] (MAP) IMG MAP | |
| shape |
形です。rect、poly、circleで指定。それぞれ長方形(矩形)、多角形、円形です。NNでは defaultという指定で、残りのすべての場所にかかるようにもできます。が、普通はあまりの領域は最後に画像と同じ大きさの矩形の領域を定義して作ります。
|
| coords |
コード。つまり座標です。ケーブルやコンセントのたぐいではありません。 「形(shape)」が長方形の場合、 coords="x1,y1,x2,y2"を指定。多角形の場合、 coords="x1,y1,x2,y2,x3,y3,....xn,yn"と、座標をずらずらと書き連ねます。円形なら、 coords="x,y,r"を指定。rは半径です。楕円形は無理。多角形をまる〜くする努力をしてください。
|
| href | 一応クリッカブルマップもリンクアンカーの一種なので、ジャンプ先のURLを指定しなければなりません。 |
| target |
<A>タグやらのターゲットと全く同じ。 ジャンプ先のものを表示させるウインドウやフレームを指定。 |
| NOHREF |
こいつを書いておくとクリックしても何も起こらなくなる。 ドーナツ型の領域を作るときとかに使えるかも知れない。 |
|
改行します。 HTMLでは、文章の中をいくつリターンキーで改行しても、その改行は無視されてしまいます。 無視とはいっても、場合によっては少し文字の間に幅が出来てしまいますが。 だから、このタグで改行してやります。が、ほっといても画面端で改行されます。画面端のみの改行は改行とは言わないかもしれませんね。 このタグは出来る限り句読点の後ろに入れましょう。画面端で改行されて、それでいて タグで改行された時に不細工になります。まぁ、画面端改行を停めるタグもありますが、それはまた後で。 しかしなんと、改行するだけのこのタグにもオプションがあったりします。 | |
| <始> [--] (I) NOBR WBR | |
| clear |
イメージやテーブルに回り込んだテキストの回り込みを終了します。いわば「超改行」・・・・ぷぷっ。 通常は clear=allとすればOKです。allの代わりにleftやらrightやらも指定できますが、大は小を兼ねるのでallにしておきましょう。
|
|
このタグに囲まれると、浮わついたいけ好かない文字に・・・なったらいいな。 文字を行の上寄りに表示するタグです。 入れ子にするとどんどん上寄りになっていくはずですが、どうでしょう。 | |
| <始> <終> (I) [I] SUB |
|
このタグに囲まれた文字を行の下寄りに表示するタグです。 入れ子にするとどんどん下寄りになっていくはずですが、どうでしょう。 まかりまちがってもモー○ーにするタグではありません。 | |
| <始> <終> (I) [I] SUP |
|
ルビ(読み仮名とか)を振ります。小説家御用達だとおもわれますが、残念なことにIE5しか対応ブラウザがありません。 RB、RT、RP要素を組み合わせないと使えません。 | |
| <始> <終> (I) [I]<RB><RT><RP> RB RT RP | |
|
| ルビを振られる文字を指定。なくてもいい。 | |
| (始) (終) (I) [I] RUBY RT RP |
| ルビとして振る文字を指定する。終タグは省略可能。 | |
| <始> (終) (I) [I] RUBY RB RP |
|
<RUBY>タグの中で、ルビとしても振られるわけでも振るわけでもない文字につける。 つまり、ルビタグ未対応のブラウザで、ちゃんと読み仮名っぽく見せるための布石。 | |
| <始> (終) (I) [I] RUBY RB RT |
インライン要素・物理スタイルを指定するタグ。 物理スタイルとは、「太い」とか「細い」とか「でかい」とか「硬い」とか「ぶっとい」とかです。
|
フォント(文字)をいじくるタグです。 <Font>と</Font>の間にある文字の色や大きさを変えたりできます。 | |
| <始> <終> (I) [I] BIG SMALL | |
| color |
見ての通り、色です。指定方法は後で書きます。 リンクアンカーの間に挟み込んで、<BODY>で指定した色を無視したりと言う荒技が可能。 色をスタイルシートで指定したときはこの方法では変えられないかも知れなくて、結局このタグとか<SPAN>とかでスタイル上書きしたりなんかする必要があります。 |
| size |
文字の大きさを指定します。サイズは1から7まで選べます。3が基準で、数字が大きくなるほど文字も大きくなるわけです。 だがしかし、これはあまりお行儀の良い使い方じゃないみたいです。 いい子ちゃんは size="+2"というふうに、今のサイズからどのぐらい大きくするかを書きましょう。この時、+2を["](ダブルクオーテーション)で囲むのを忘れないようにして下さい。 |
| face |
フォントそのものを指定します。face="MS明朝"みたいに書くわけですが、当然のように、見る人のマシンにそのフォントが入っていなければ何の変化も起こりません。使わない方が無難でしょう。 |
このタグを閉じ忘れると結構痛いことになることが多いです。
| |
|
このタグで囲まれた文字は同じ幅で表示されます。 日本語だとあまり意味は無いかも。 | |
| <始> <終> (I) [I] |
|
このタグで囲まれた文字はイタリックになります。 とはいっても、鼻が高くなったり陽気なラテン系になるわけではありません(当然)。 イタリック、それはつまり斜字体の事です。このタグで囲むと文字が斜めになるんです。 | |
| <始> <終> (I) [I] EM |
|
このタグで囲まれた文字は太字で表示されます。 特に書くことも無いと思いますから、これで終わりです。 手抜きじゃないですよ。本当に無いんだから。 | |
| <始> <終> (I) [I] STRONG |
|
その名の通り、ビッグなタグです。これに囲まれた文字は大きくなってしまいます。 フォントのsize="+1"ぐらいでは無かろうかとおもいます。 | |
| <始> <終> (I) [I] FONT |
|
何のひねりもなく、スモールな文字にするタグです。これに囲まれると文字は小さくなってしまいます。 フォントのsize="-1"と同じ・・・・だったかと。 | |
| <始> <終> (I) [I] FONT |
|
Uです。ってなんのこっちゃわかりませんが、アンダーラインを引きます。 UはYOUではなくUnderlineの略だったのですね。 | |
| <始> <終> (I) [I] |
|
Sです。南ではなく、ストライクのSです。三つ集めるとアウトになりますが、 | |
| <始> <終> (I) [I] STRIKE |
|
三つ集めるとアウトになりますが、 | |
| <始> <終> (I) [I] S |
|
このタグで囲まれた文字はします。 でも、たしかNN専用だった気がします。 このタグを使うと画面がちらつくので、嫌う人が結構いるみたいです。 あんまり使わない方がいいかも知れません。ある日突然恐い人からメールが届いたりしたらイヤですもんねぇ。 使うときはひと目で読める程度の長さにとどめておきましょう。一ページ全部なんかは最悪です。読めません。 | |
| <始> <終> (I) [I] |
インライン要素・論理スタイルを指定するタグ。
論理スタイルとは、「強い」とか「弱い」とか「あんなの」とか「こんなの」とかです。「弱い」ってタグはありませんが。
「意味」を定義するタグなので、普通はスタイルシートで見た目をいじって使います。
|
強調するタグです。Emphasisあたりの略語でしょう。 なお、どのように強調するかはブラウザに任せられますが、NN、IEともにデフォルトでは斜字体で表示されます。 | |
| <始> <終> (I) [I] I STYLE |
|
めちゃめちゃ強調します。 なお、どのように強調するかはブラウザに任せられますが、NN、IEともにデフォルトでは太字で表示されます。 | |
| <始> <終> (I) [I] B STYLE |
|
定義用語であることを明示するためのタグです。 NN、IEともにデフォルトでは斜字体で表示されます。 | |
| <始> <終> (I) [I] I STYLE |
プログラムコードであることを明示するためのタグです。NN、IEともにデフォルトでは等幅で表示されます。 | |
| <始> <終> (I) [I] TT STYLE |
|
出力サンプルであることを明示するためのタグです。 サンプルプログラムは<CODE>で書きます。 NN、IEともにデフォルトでは等幅で表示されます。 | |
| <始> <終> (I) [I] TT STYLE |
|
操作手順書などでユーザーが入力する文字であることを明示するためのタグです。 NN、IEともにデフォルトでは等幅で表示されます。 | |
| <始> <終> (I) [I] TT STYLE |
|
プログラムの変数であることを明示するためのタグです。 NN、IEともにデフォルトでは斜字体かつ太字で表示されます。 | |
| <始> <終> (I) [I] I B STYLE |
フレームを記述するためのタグです。
ちなみにフレームというのは一つのウインドウをいくつかに分断するあれです。
|
フレームの枠を決めます。<FRAME>タグと組み合わせて使います。 また、このタグは<BODY>タグの代わりとして使います。 | |
| <始> <終> (HTML)(FRAMESET) <FRAMESET><FRAME><NOFRAMES> HTML BODY FRAME NOFRAMES IFRAME | |
| cols |
横幅。ピクセル数かパーセンテージで指定。
<frameset cols="50%,25%,*">と指定すると、横が三つに分かれてそれぞれ50%、25%、残り全部が割り当てられる。
|
| rows |
縦幅。ピクセル数かパーセンテージで指定。
<frameset rows="50%,*">と指定すると、縦が二つ分かれて50%と残り全部が割り当てられる。
|
| border | フレームの区切り枠の幅をピクセルで指定します。0なら見えなくなります。 |
| bordercolor | フレームの区切り枠の色を指定します。 |
|
やっぱり使用例がいるでしょうねぇ。 画面を上下に分けて(上が128ピクセル)、上にメニューっぽいもの(menu.html)、下にメインっぽいもの(main.html)を表示するサンプルです。 <BODY>の位置に注意してください。
上フレームにmenu、下フレームにshowという名前がついたので、
<A>タグのtarget属性にたとえばshowを指定すると、下のフレームが書き換わるようになります。
| |
フレームです。フレームセットの中に挟みます。挟む順番は、左上から右下へ、真横に進んで、右端まで行ったら左端へ。一度書いてみればわかるかも。
| |||||||
| <始> [--] (FRAMESET) FRAMESET NOFRAMES A | |||||||
| src | フレームに表示するHTMLファイル等のアドレスを書く。 | ||||||
| name | フレームに名前を付ける。この名前がリンクアンカー(<A>)のtarget属性で指定する名前になります。 | ||||||
| scrolling |
yes、no、autoを指定して、スクロールバーの表示・非表示・自動判別を決める。 | ||||||
| NORESIZE |
これを書くと、フレームのはしっこをつまんでずりずり大きさを変えることができなくなります。 これを書いてスクロールバーも消せばすっきりしますがすっきりし過ぎてスクロール不能になって不便になるので二つとも書くのだけは絶対に止めてください。 | ||||||
| フレームを使えないブラウザに表示させる文章を書く。 何気に最後に"S"がついてるのが英語的でステキと思うのは私だけ? <FrameSet>〜</FrameSet>の間におけばいい。 | |
| <始> <終> (FRAMESET) <BODY> FRAMESET FRAME BODY |
| 画面の中にフレームを作って、そこをターゲットに指定できるようになります。 | |
| <始> <終> (B) [B][I] FRAME A | |
| src | フレームに表示するHTMLファイル等のアドレスを書く。 |
| name | フレームに名前を付ける。この名前がリンクアンカー(<A>)のtarget属性で指定する名前になります。 |
| scrolling |
yes、no、autoを指定して、スクロールバーの表示・非表示・自動判別を決める。 |
| align |
フレームの位置。left,right,top,bottom,middleを指定できます。
|
| height | フレームの高さをピクセル数かパーセンテージで指定します。 |
| width | フレームの幅をピクセル数かパーセンテージで指定します。 |
| |
なんだかよくわからないものです。HTMLで定義されていなかったりとか分類しづらかったりとか。
|
このタグで囲むと、画面の端に来てもテキストが折り返さず、どんどん横に行くようになります。 横スクロールバーの嫌いな人の顰蹙(ひんしゅく)を買うのは目に見えているので無意味に連発しないのが吉。 このタグには姉妹品として<wBR>というタグがあります。 | |
| <始> <終> (B)(I) [B][I]<wBR> BR WBR | |
|
このタグ、IEではインライン要素なんですけど、NNではブロック要素くさいです。 スタイルシートで無理やりブロック化なりインライン化するのがいいと思います。 |
|
このタグは上の<noBR>タグの間でしか働きません。 このタグは、だらだらと横に続く改行禁止文のなかで、ここならば改行してもいい、ここで改行するならかまわない、ここでなきゃヤダみたいな気分の所に打ち込みます。 あんまり使いどころは無いかと。 | |
| <始> [--] (I)(NOBR) NOBR |
|
IE専用のコメントを記述するタグです。 このタグで囲った文章は画面に表示されません。 が、普通HTMLでコメントを表すのにこんな方法は使いません。 SGMLに由来するうんたらかんたらで <!--と-->で囲った部分はコメントとなるので、それを使用します。
| |
| <始> <終> (COMMENT) [テキスト] | |
コメントは普通次のように書きます。太字のところがコメントになります。
この方法ではコメントの中に"--"(半角マイナス二つです)を書いてはいけないとかの細かいルールがありますが、そんなことを解釈するブラウザは皆無みたいなので神経質に気にすることはないでしょう。
|
|
整形済みテキストであることを表します。 整形済みですから、<PRE>から</PRE>の間のテキストは改行は改行として表示され、半角スペースもそのまま表示され、ついでにタブ文字も展開して表示されます。 厳密には<IMG><BIG><SUB>みたいな行の幅を変えるような要素は含むことができませんが、NNもIEもちゃんと(?)解釈します。 | |
| <始> <終> (B) [I] | |
改行はそのまま
半角スペースも そのまま表示。
でもタグは効きます。絵も出ます。
|
|
マーキーです。マーキューではありません。ましてマジキューでもありません。 IE専用で、このタグに囲まれた文字やら絵やらを左右にスクロールさせながら表示するというなんともご苦労さんなタグです。 | |
| <始> <終> (B) [B][I] | |
| align |
マーキー表示する文字の位置を指定します。といっても右端から左端まで流れるので垂直方向を指定するわけですが。top, middle, bottomのどれれかを指定ます。
|
| bgcolor | マーキーの背景色。 |
| behavior |
スクロール形式をscroll,slide,alternateのどれかで指定。それぞれ「ぐるぐるまわる」「端で止まる」「端で跳ね返る」です。 |
| direction |
スクロールの方向。left,right,up,downで指定。
|
| loop |
繰り返す回数。永遠に続けるときは-1を指定。格好よく書きたいなら loop=INFINITEとかでも永遠に回り続ける。デフォルトで無限に回るので気にすることないでしょう。 |
| width | 幅。ピクセル数かパーセンテージで。指定しないとびっくりするかも。 |
| height |
高さ。ピクセル数かパーセンテージで指定。縦方向にスクロールさせる時に特に重要です。 行で指定できないのが痛いですね。 |
| scrolldelay |
スクロールの速さを指定します。 何を基準にしているかはわかりませんが、数字が大きい方が遅い。 多分ここに書く数字はミリ秒単位で、その間隔ごとにscrollmountの分だけスクロールするんだと思うんだけど・・ |
| scrollmount | スクロール幅。これまた大きいほど早くスクロールする(はず)。 |
| hspace | 左右の空きスペースをピクセル数で指定。 |
| vspace | 上下の空きスペースをピクセル数で指定。 |
| |