| ＨＴＭＬの範囲を指定 |
<html>～</html> |
|
このタグで囲まれた部分がＨＴＭＬ文書であることを宣言します。 |
| ヘッダ部の範囲を指定 |
<head>～</head> |
|
このタグ内にはＨＴＭＬ文書のファイル情報を記述します。以下に説明する、タイトルの指定やバックグラウンドサウンドの指定もここに記述します。 |
| タイトルの指定 |
<title>～</title> |
|
ヘッダ部において記述し、ページのタイトルを設定するときに用います。ブラウザのタイトルバーやお気に入り、ブックマークなどにタイトルが表示されます。 |
| バックグラウンドサウンドの指定 (MＳＩＥのみ利用可) |
<bgsound> |
<bgsound src="サウンドデータのＵＲＬ" loop="サウンドを鳴らす回数"> |
このページも上述のタイトル指定と同様にヘッダ部に記述します。文字通り、ページを表示したときに鳴らすバックグラウンドサウンドを指定します。左の書式に従い、パラメータ指定することにより、バックグラウンドサウンドとサウンドを鳴らす回数を指定するだけでよいです。無限ループにするにはloop="-1"またはloop="infinite"と記述すればよいです。 |
| 本文の範囲を指定 |
<body>～</body> |
<body bgcolor="指定色のコード" background ="背景に使う画像のＵＲＬ" text="指定色のコード" link="指定色のコード" vlink="指定色のコード">～</body> |
文字通り、本文の内容を記述する部分です。以下に説明するタグは、このボディ部に記述します。パラメータ指定により、背景の色、背景の画像、文字の色、リンクボタンの色、たどったことのあるリングボタンの色などを変更できます。 |
| 注釈文 |
<!-- ～ --> |
|
このタグ内に入れた文章は、注釈文として解釈されます。そのため、ブラウザで表示したときにこのタグ内の文章は表示されません。 |
| 見出し |
<hn>～</hn> |
<hn align="left/center/right">～</hn> |
n=1～6(数字が小さい方が大見出しです。) ALIGN属性で左寄せ、センタリング、右寄せを指定することができます。 |
| 改行 |
<br> |
|
強制的に改行するときに用います。 |
| 改行の禁止 |
<nobr>～</nobr> |
|
ウィンドウの端などで行われる自動的な改行を禁止するときに用います。 |
| 水平線 |
<hr> |
<hr size=n width="" align="left/center/right" color ="指定色のコード" noshade> |
水平線を引くときに用います。パラメータを指定することにより、水平線の太さ、長さ、色などを変えることができます。SIZE指定のｎの値には太さを指定するピクセル単位の数字が入ります。画面上の１ドットを１ピクセルといいます。WIDTH指定はピクセル単位、またはウィンドウに対する％表記します。ALIGN指定は通常は関係しないがウィンドウの幅よりも水平線の幅が小さい場合で、左寄せ、センタリング、右寄せのどの配置にするかを指定するときに利用します。COLOR=""の指定方法はFONTの項を参照すること。NOSHADE指定をすると立体感のない罫線を引くことができます。 |
| 大きい字 |
<big>～</big> |
|
このタグ内に入れた文字は大きい字で表示されます。大きい字の例：これが大きい字です。 |
| 小さい字 |
<small>～</small> |
|
このタグ内に入れた文字は小さい字で表示されます。小さい字の例：これが小さい字です。 |
| 太字(ボールド) |
<b>～</b> |
|
このタグ内に入れた文章は太字で表示されます。太字の例：これが太字(ボールド)です。 |
| 斜体字(イタリック) |
<i>～</i> |
|
このタグ内に入れた文章は斜体字で表示されます。斜体字の例：これが斜体字(イタリック)です。 |
| 下線 |
<u>～</u> |
|
このタグ内に入れた文章には下線が引かれます。下線の例：これが下線です。 |
| 取消線 |
<s>～</s> |
|
このタグ内に入れた文字には取消線が引かれます。取消線の例：これが取消線です。 |
| 等間隔 |
<tt>～</tt> |
|
このタグ内に入れた文字は等間隔になります。等間隔の例：これが等間隔です。 |
| 上つき添字 |
<sup>～</sup> |
|
このタグ内に入れた文字は上つき添字となります。上つき添字の例：これは上つき添字<sup>です</sup>。 |
| 下つき添字 |
<sub>～</sub> |
|
このタグ内に入れた文字は下つき添字となります。下つき添字の例：これは下つき添字<sub>です</sub>。 |
| スクロール文字 (マーキー) (ＭＳＩＥのみ利用可) |
<marquee>～</marquee> |
<marquee direction="leftまたはright" behavior="scroll、slideまたはalternate" loop="スクロールさせる回数" scrollmount="" scrolldelay="" bgcolor="指定色のコード" height="スクロール枠の高さのピクセル数またはウィンドウに対する％" width="スクロール枠の幅のピクセル数またはウィンドウに対する％" align="top、middleまたはbottom" hspace="スクロール枠の左右の間隔" vspace="スクロール枠の上下の間隔" >～</marquee> |
このタグ内に入れた文字はスクロール表示させることができます。DIRECTION属性でスクロールさせる方向を指定できます。LEFT ：左方向にスロール RIGHT： 右方向にスロール BEHAVIORでスクロールパターンを指定できます。SCROLL ：一定方向にスクロール SLIDE ：端までスクロールし、端で停止 ALTERNATE ：端までスクロールし 端で方向が変わります 左の書式に従い、パラメータ指定することにより、スクロールさせる文字とスクロールさせる回数を指定するだけでよいです。無限ループにするにはloop="-1"またはloop="infinite"と記述すればよいです。SCROLLMOUNT属性を設定することで、テキストを何ピクセル単位で動かすかを指定することができます。SCROLLDELAY属性を設定することで、テキストを動かす時間間隔を０．１ミリ秒単位で変えることができます。BＧCOLOR属性で背景の色を指定します。HEIGHT属性を指定すると文字通りスクロール枠の高さを変えることができます。WIDTH属性を指定すると文字通りスクロール枠の高さを変えることができます。ALIGN属性はスクロール枠の垂直方向の位置を指定します。HSPACE属性でスクロール枠の左右の間隔をピクセル数で指定します。VSPACE属性でスクロール枠の上下の間隔をピクセル数で指定します。 |
| 点滅 (NNのみ利用可) |
<blink>～</blink> |
|
このタグ内に入れた文字を点滅させることができます。ただしMSIEでは点滅しません。点滅の例：これが点滅です。 |
| フォント(１) サイズ指定 |
<font>～</font> |
<font size=1～7 color ="指定色のコード" face="フォント名">～</font> |
パラメータを指定することにより、このタグ内に入れた文章のフォントの種類、大きさ、色などを変えることができます。SIZEが小さい方が文字が小さいです。 これがsize="1" これがsize="2" これがsize="3" これがsize="4" これがsize="5" これがsize="6" これがsize="7" |
| フォント(２) 色の指定 |
<font>～</font> |
<font size=1～7 color ="指定色のコード" face="フォント名">～</font> |
パラメータを指定することにより、このタグ内に入れた文章のフォントの種類、大きさ、色などを変えることができます。SIZEが小さい方が文字が小さいです。 これがcolor="black" これがcolor="blue" これがcolor="red" これがcolor="skyblue" これがcolor="green" これがcolor="cyan" これがcolor="yellow" これがcolor="white" または、color="#rrggbb"の書式で、赤、緑、青系統の色コードを１６進数で表記します。 |
| 段落 |
<p>～</p> |
<p align="left/center/right">～</p> |
このタグで段落を指定します。画面上では２回改行したように指定されます。ALIGN指定で左寄せ、センタリング、右寄せを決めることができます。 |
| 中央揃え |
<center>～</center> |
|
このタグ内に入れた文章は中央揃え(センタリング)されて表示されます。 |
| 入力したままの表示 |
<pre>～</pre> |
|
このタグ内に入れた文章等は入力したとおりに表示されます。例えば、｢｣を使って下のようなイラスト(？)や詩などの文章もレイアウト通りに表示できます。 *** *** * * * * * ********** * * * * * * * * * * ** * * * * ************ * * * * * * * * * * ****** * ********* これをＰＲＥタグを使わないと余分な空白文字(スペース)は削除されてしまうので、下のようになり思っていたようなレイアウトにはならなりません。ブラウザのソース表示(MSIEならばメニューバーの表示をクリックしてソースを選択する)を行い、ここの記述とブラウザでの表示を確認すること。** *** * * * * * ********** * * * * * * * * * * ** * * * * ************ * * * * * * * * * * ****** * ********* |
| 引用 |
<blockquote>～</blockquote> |
|
このタグ内の文章が引用であることを宣言します。以下の引用の例のように、前の文章と後ろの文章の間に引用文を入れると前後左右に空白文字(スペース)がつけられて表示されます。引用の例：前の文章です。前の文章です。これは引用の例です。後ろの文章です。後ろの文章です。 |
| アンカー指定 |
<a>～</a> |
<a name="アンカーを置く部分の名前">～</a> |
このタグ内に入れた文章全体に名前(アンカー名)を付けます。アンカー名に『#』は不要です。 |
| リンクを張る(１) |
<a>～</a> |
<a href="#リンク先のアンカー名">～</a> |
このタグ内に入れた部分にはリンク先の説明を書きます。この書式に従って、リンク先のアンカー名を指定します。このとき『#』をアンカー名の前に付けます。ブラウザで表示されているここをクリックすると、リンク先に飛ぶことができます。 |
| リンクを張る(２) |
<a>～</a> |
<a href="リンク先のＵＲＬ">～</a> |
このタグ内に入れた部分にはリンク先の説明を書きます。この書式に従って、リンク先のＵＲＬを指定します。ブラウザで表示されているここをクリックすると、リンク先に飛ぶことができます。 |
| リンクを張る(３) |
<a>～</a> |
<a href="リンク先のＵＲＬ#アンカー名">～</a> |
このタグ内に入れた部分にはリンク先の説明を書きます。この書式に従って、リンク先のＵＲＬ内のアンカー名を指定します。このとき『#』をアンカー名の前に付けます。ブラウザで表示されているここをクリックすると、リンク先に飛ぶことができます。 |
| 自動メール指定 |
<a>～</a> |
<a href="mailto:メールアドレス">～</a> |
このタグ内に入れた部分にもリンク先のメールアドレスを書きます。ブラウザで表示されているここをクリックすると、自動的にメールクライアントソフトが起動する。その後、"mailto:メールアドレス"で指定したメールアドレスに、メールが送れる状態(手紙の内容をかける状態)になります。 |
| 画像の表示 |
<img> |
<img src="画像データファイルのURL" lowsrc="画像データファイルのURL"(NNのみ利用可) align="leftまたはright" height="画像の高さのピクセル数またはウィンドウに対する％" width="画像の幅のピクセル数またはウィンドウに対する％" border="線の太さ(ピクセル数)" hspace="画像の左右の間隔" vspace="画像の上下の間隔" alt="(画像が表示できないときなどに備えて、画像の代わりに表示させる文字列)"> |
左の書式に従って表示する画像ファイルを指定します。LOWSRC指定をすると上述のSRCで指定した画像ファイルを表示する前に、LOWSRC指定したファイルが表示される。LOWSRC指定するファイルにはSRC指定するファイルよりもサイズの小さなものを指定するとよいです。(NNのみ利用可)最低限画像ファイルの名前だけ指定すればよいので、それ以外の属性は必要に応じて指定します。ALIGN="LEFT"にすると画像は左に寄せられ、文字がその横に配置されます。HEIGHT属性を指定すると文字通り画像の高さを変えることができます。WIDTH属性を指定すると文字通り画像の高さを変えることができます。BORDER属性を指定すると線の太さを変更することができます。HSPACE、VSPACEの指定方法はそれぞれの間隔をピクセル数で指定します。ALT指定をしないと画像が表示されない場合、何がなんだかわからなくなるのでこれは必ず指定します。 |
| リンクボタンの設定 |
|
<a href="リンク先のＵＲＬ名"><img src="画像ファイル名" alt="画像が表示されないときの説明文" border="0" width="画像ファイルの幅" height="画像ファイルの高さ"></a> |
リンクボタンとはホームページ上に貼り付けた画像を押すとリンク先のホームページへ飛ぶことができるように設定した画像のことをいいます。リンクボタンの設定をするには前述のイメージタグ(<img>～</img>)を左のようにアンカータグ(<a>～</a>)で囲んで記述します。リンクボタンの例：リンクボタンの設定をした以下の画像をクリックすると本校のホームページへ飛ぶようにしてあります。ブラウザ(MSIEやNNなど)でページに飛び動作の確認後は、『戻る』ボタンを押してここに戻ること。文化女子大学附属杉並中学校・高等学校のホームページ |
| クリッカブルマップ(１) <<イメージマップの定義>> |
<map>～</map> |
<map name="イメージマップ名"><area shape="circle、rect、polygonまたはdefault" coords="X1,Y1,X2,Y2･････" href="リンク先のＵＲＬ名"></area><area shape="circle、rect、polygonまたはdefault" href="リンク先のＵＲＬ名">以下繰り返し</area></map> |
クリッカブルマップを定義するには左のようにMAP属性でイメージマップ名を指定すればよいです。エリアタグ内のSHAPE属性はマップ範囲をどのように設定するかを記述します。CIRCLE ：円形 RECT ：矩形 POLYGON：多角形 DEFAULT ：領域外 エリアタグ内のCOORDS属性は座標上の各点、または半径等を指定します。CIRCLE ：中心のX,Y,半径 RECT ：左上のX,Y,右下のX,Y POLYGON：頂点１のX,Y,頂点２のX,Y･･･････ DEFAULT ：なし HREF属性は左の書式通りリンク先のＵＲＬ名を記述します。 |
| クリッカブルマップ(２) |
<img usemap> |
<img usemap="#イメージマップ名"> |
USEMAP属性でイメージマップ名を指定すると、その画像をクリッカブルマップとして利用できます。クリッカブルマップとは、ホームページ上に貼り付けた画像の中で、ある範囲に指定した部分(複数指定可)をクリックすると、その範囲にあらかじめ定義したリンク先(設定した範囲ごとに指定した別々のリンク先)に飛ぶことができるような画像のことをいいます。例えば、関東地方の白地図画像をホームページに貼り付け、東京都の部分をクリックすると東京都のことが書かれたページへ飛んだり、神奈川県の部分をクリックすると神奈川県について書かれたページへ飛ぶようなことが指定できます。 |
| テーブル指定(１) <<テーブルの宣言>> FRAME属性、RULES属性はNN非対応 |
<table>～</table> |
<table align="left、centerまたはright" height="テーブルの高さのピクセル数またはウィンドウに対する％" width="テーブルの幅のピクセル数またはウィンドウに対する％" border="線の太さ(ピクセル数)" bordercolor="指定色のコード" bgcolor="指定色のコード" background="背景に使う画像のＵＲＬ" cellspacing="セルとセルとの間隔(ピクセル値)" cellpadding="罫線とセルの内容との間隔(ピクセル値)" frame="boxまたはvoid、above、below、hside、vside、lhs、rhs" rules="allまたはnone、cols、rows、groups"></table> |
一つの表の範囲を指定します。このタグ内に次のＴＲタグやＴＤタグを入れます。HEIGHT、WIDTH属性の指定はテーブルの高さや幅をピクセル数またはウィンドウに対する％で行います。BORDER属性は線の太さをピクセル値で指定します。BORDERCOLOR属性で線の色を指定します。BＧCOLOR属性で背景の色を指定します。CELLSPACING、CELLPADDINGをピクセル値で指定することにより、セルとセルとの間隔、罫線とセルとの間隔を設定することができます。FRAME属性を設定することにより外枠の表示形式を変更することができます。BOX：外枠をすべて表示 VOID：外枠をすべて表示 ABOVE：上のみ表示 BELOW：下のみ表示 HSIDE：上下のみ表示 VSIDE：左右のみ表示 LHS：左のみ表示 RHS：右のみ表示 RULES属性で内部の罫線の表示方法を指定することができます。ALL ：すべて表示 NONE ：表示しない COLS ：垂直方向のみ表示 ROWS ：水平方向のみ表示 GROUPS：グループの境界のみ表示 それぞれのタグの使用方法はテーブル指定(４)を参考にすること。 |
| テーブル指定(２) <<テーブルの表題の宣言>> |
<caption>～</caption> |
<caption align="topまたはbottom">～</caption> |
このタグにより、テーブルの表題を記述することがてきます。ALIGN属性を指定することにより表題の位置をテーブルの先頭かテーブルの最下段かを指定できます。 |
| テーブル指定(３) <<テーブルの行の宣言>> |
<tr>～</tr> |
<tr align="left、centerまたはright" valign="top、centerまたはbottom" bordercolor="指定色のコード" bgcolor="指定色のコード" background="背景に使う画像のＵＲＬ"></tr> |
ＴＡＢＬＥタグ内に記述し、表の一行を決定します。ALIGN属性を指定することにより内容の横の表示位置を左寄せ、センタリング、右寄せのどれかに設定できます。VALIGN属性を指定することにより内容の横の表示位置を左寄せ、センタリング、右寄せのどれかに設定できます。BORDERCOLOR属性の指定により、表の罫線色を変更できます。BGCOLOR属性の指定により、表の背景色を変更できます。BACKGROUND属性の指定により、表の背景に画像を張り付けることができます。 |
| テーブル指定(４) <<テーブルのセルの宣言>> |
<td>～</td> |
<td align="left、centerまたはright" valign="top、centerまたはbottom" height="テーブルの高さのピクセル数またはウィンドウに対する％" width="テーブルの幅のピクセル数またはウィンドウに対する％" bordercolor="指定色のコード" bgcolor="指定色のコード" background="背景に使う画像のＵＲＬ" > colspan="セルを横方向にまたがるセル数" rawspan="セルを縦方向にまたがるセル数" </td> |
ＴＲタグ内に記述し、表中の一行の各データを指定します。ALIGN属性を指定することにより内容の横の表示位置を左寄せ、センタリング、右寄せのどれかに設定できます。VALIGN属性を指定することにより内容の横の表示位置を左寄せ、センタリング、右寄せのどれかに設定できます。HEIGHT、WIDTH属性の指定はテーブルの高さや幅をピクセル数またはウィンドウに対する％で行います。BORDERCOLOR属性の指定により、表の罫線色を変更できます。BGCOLOR属性の指定により、表の背景色を変更できる。BACKGROUND属性の指定により、表の背景に画像を張り付けることができます。左の赤で記述したタグは複数のセルを横または縦に結合する機能を持っており、知っていると非常に便利なタグです。 |
| テーブル指定(５) <<テーブル見出しの宣言>> |
<th>～</th> |
上記のＴＤ属性と同じである。 |
このタグにより、表の中で見出しにあたるセルを記述します。 |
| テーブル指定(６) <<テーブル関連タブ概要>> |
|
特に上で説明したような属性を指定しなくても、以下のように記述すれば少なくとも表を記述することができます。<table border="1"> <----ここからが表であり、線の太さが１ピクセルであるることを宣言 <tr><td>１行１列目</td><td>１行２列目</td><td>１行３列目</td></tr> <tr><td>２行１列目</td><td>２行２列目</td><td>２行３列目</td></tr> </table> <----ここまでが表であることを宣言 上のタグの記述によるテーブルの表示例 １行１列目 １行２列目 １行３列目 ２行１列目 ２行２列目 ２行３列目 |
|
| リスト(１) <<図形つきリスト>> |
<ul>～</ul> |
<ul type="disc、circleまたはsquare"> <li type="type="disc、circleまたはsquare"> <li> ～</ul> |
ＵＬタグで行頭に図形がついたリストを記述できる。リストの各要素はＬＩタグの後ろに記述する。<li>で１段落分下がり、</li>で１段落分上がる。TYPE属性は行頭につく図形の種類を指定する。 ●で表示(ＤＩＳＣ指定) ○で表示(ＣＩＲＣＬＥ指定) ■で表示(ＳＱＵＡＲＥ指定) TYPE属性がＵＬタグについいたときには全体に、ＬＩタグについたときにはその項目だけの指定になります。ちなみにこのＴＹＰＥ属性についての解説はＵＬタグを用いて記述しています。 |
| リスト(２) <<記号・番号つきリスト>> |
<ol>～</ol> |
<ol type="A、a、1、Iまたはi" start="番号の初期値"> <li type="A、a、1、Iまたはi"> <li> ～</ol> |
ＯＬタグで行頭に番号がついたリストを記述できる。リストの各要素はＬＩタグの後ろに記述する。<li>で１段落分下がり、</li>で１段落分上がります。TYPE属性は行頭につく番号の種類を指します。Ａ：アルファベット大文字で表示 ａ：アルファベット小文字で表示 １：数字で表示 Ｉ：ギリシャ数字大文字(Ⅰ・Ⅱ・Ⅲ)で表示 ｉ：ギリシャ数字小文字(ⅰ・ⅱ・ⅲ)で表示 TYPE属性がＯＬタグについいたときには全体に、ＬＩタグについたときにはその項目だけの指定になります。ちなみに、下の参考文献欄はこのリスト機能を用いています。 |
| リスト(３) <<キーワード定義型リスト>> |
<dl>～</dl> |
<dl> <dt>～ <dd>～ </dl> |
ＤＬタグを用いて、見出し(用語)とその説明をリストで表すことができます。説明文のところには字下げが行われます。ＤＴタグの後ろには見出しを記述、ＤＤタグの後ろには説明文を記述します。 |
