| はじめに | |||||||||||||||||
| Webページを作るにはHTMLツールで作成していると思いますが、まだまだ不十分なところもあり自分の思いどおりのソースが出来ないことがあります。 そんな時にエディタを併用して作業をすることが肝要です。その時にHTMLの構成やタグの設定を知っておく必要があります。 また、使用方法によっては、より個性的なことも出来ます。ここのページでは、基本部を説明したいとおもいます。 |
|||||||||||||||||
| ＨＴＭＬの基本構造 | |||||||||||||||||
| <HTML> <HEAD> <TITLE> 文書のタイトル </TITLE> </HEAD> <BODY> HTML文書の本文 </BODY> </HTML> |
＜と＞の記号（タグ）で囲んで表します！ <HTML>・・・</HTML> HTMLファイルである事を表します。 <HEAD>・・・ </HEAD> ヘッダ情報 <TITLE>・・・</TITLE> 文書のタイトル <BODY>・・・</BODY> 文書の本文 |
||||||||||||||||
| ページ構成 | |||||||||||||||||
| 文字コードを明示する！（文字化け防止） | |||||||||||||||||
| <HEAD> <META http-equiv="Content-Type" content="text/html;charset=iso-2022-jp"> <TITLE> タイトル </TITLE> </HEAD> |
META タグで明示します。 文字コード JIS ISO-2-22-JP シフトJIS SHIFT_JIS （注）x-sjisはやめましょう！ 日本語EUC EUC_JP |
||||||||||||||||
| 自動的にほかのページに移動させる！（新しいサイトに引越しなど） | |||||||||||||||||
| <HEAD> <META http-equiv="REFRESH" content="data;url=url"> |
data 再読み込みさせる間隔（秒） url 移動させるページURL |
||||||||||||||||
| 背景色の設定 | |||||||||||||||||
| <BODY bgcolor="#00ffff"> | #00ffff １６進数で設定します。特定色は具体的な名前でも可能です。
|
||||||||||||||||
| 背景に画像を設定する | |||||||||||||||||
| <BODY background="url"> | url 背景画像のページURL | ||||||||||||||||
| 背景画像をスクロールさせない | |||||||||||||||||
| <BODY background="url" bgproperties="fixed"> | url 背景画像のページURL。背景はそのままにテキストだけがスクロールします。 | ||||||||||||||||
| ページ全体の文字色を設定する | |||||||||||||||||
| <BODY text="colors"> | colors １６進数での色の値 | ||||||||||||||||
| リンクの色を設定する | |||||||||||||||||
| <BODY link="colors"> <BODY vlink="colors"> <BODY alink="colors"> |
colors link:未アクセスリンク色 vlink:既アクセスリンク色 alink:クリックした時の色 |
||||||||||||||||
| 表示位置をまとめて揃える | |||||||||||||||||
| <DIV align="left/center/rigth">・・・</DIv> | left/center/rigth複数の段落や見出し、表などの表示位置をまとめて揃えます。 | ||||||||||||||||
| <CENTER>・・・</CENTER> | 上記の他に<CENTER>も使用出来ます | ||||||||||||||||
| 本文の見出しを設定する | |||||||||||||||||
| <H1>見出しレベル1</H1> <H2>見出しレベル2</H2> <H3>見出しレベル3</H3> <H4>見出しレベル4</H4> <H5>見出しレベル5</H5> <H6>見出しレベル6</H6> |
読み手に内容が良く伝わるように見出しが付けられますが、HTMLでは<H>をつかって明確にします。Ｈの後ろの数字（１〜６）で数字が小さいほどレベルが高いことを表します。 見出しの位置を設定するには、下記の用にalign属性で設定します。<H1 align="left/center/rigth">・・・</H1> |
||||||||||||||||
| 水平線を引く！ | |||||||||||||||||
<HR> <HR size="pixels"> <HR width="length" aling="left/center/rigth"> <HR color="colors"> |
上記の水平線を引きます。 pixels:水平線の太さ（ピクセル数）length:水平線の長さ left/center/rigth：水平線の位置 colors:水平線の色 |
||||||||||||||||
| コメントを記述する！ | |||||||||||||||||
| <!-- ここにコメントを書きます --> | コメントはＷｅｂブラウザの画面には表示されません。メモ書きの他、Javasriptなどの記述にも使用されます。 | ||||||||||||||||
| ＴＥＸＴ | |||||||||||||||||
| 段落を記述する！ | |||||||||||||||||
<P>・・・</P> <P aliign="left/center/rigth">・・・</P> |
段落ごとに<P>を付けます。多くのＷｅｂブラウザでは段落と段落間に１行のスペースがつくられます。（改行とは異なります） left/center/rigth：段落の位置を設定します。 |
||||||||||||||||
| 改行する！ | |||||||||||||||||
| <BR> | 段落と違いスペースは作られません。単純に改行します。 | ||||||||||||||||
| Ｗｅｂブラウザの折り返し機能を無効にする | |||||||||||||||||
| <NOBR>・・・</NOBR> | ウインドウ内に収まらない行は、自動的にウインドウの端で折り返して表示します。ただ、文章の内容によっては自動折り返しをさせたくない場合があります。その場合に使用します。 | ||||||||||||||||
| 本文中にスペースを空ける | |||||||||||||||||
| <SPACER type="horizontal/vertical" size="pixels"> | 本文中に適当なスペースを空けたいときに使用します。 horizontal：横方向のスペース vertical：縦方向のスペース pixels：サイズ |
||||||||||||||||
| 文字を自動的にスクロールさせる | |||||||||||||||||
<MARQUEE width="length" heigth="length" bgcolor="colors" align="top/middle/bottom">ここにスクロール文字を書きます</<MARQUEE> |
length：マーキーフレームのサイズ（ピクセル、または％） bgcolor="colors"：背景色 align="top/middle/bottom":マーキーフレームの揃え位置 その他の属性 hspace="pixels"：左右の余白 vspace="pixels"：上下の余白 direction="left/rigth/up/down"：文字の流れる方向 behavior="scroll/slide/alternate":文字の動き（反対側の端に消える、端で停止する、往復する） loop="number/infinite"：スクロールの回数（infinite：無限会） scrolldelay="number"：スクロール時間間隔 scrollamount="pixels"：スクロール距離間隔 |
||||||||||||||||
| ＴＡＢＬＥ | |||||||||||||||||
| 表の構成 | |||||||||||||||||
<TABLE><TR><TD>・・・</TD></TR></TABLE> （例）
|
<TABLE>は表の先頭と最後尾におかれ範囲を示します。<TR>は表の行ごとにつけます。<TD>は各セルごとにつけます。 作り方は、まず表のセルの内容を１つずつ<TD>・・</TD>で囲み。表１行分のセルをまとめて、<TR>・・</TR>で囲みます。最後に<TABLE>・・</TABLE>で囲みます。 (例）<TABLE> <TR><TD>セル1A</TD><TD>セル1B</TD><TD>セル1C</TD></TR> <TR><TD>セル2A</TD><TD>セル2B</TD><TD>セル2C</TD></TR> </TABLE> |
||||||||||||||||
| 表の外枠線の幅を設定する！ | |||||||||||||||||
<TABLE border="pixels">・・・</TABLE> （例）幅５ピクセル
|
pixels:外枠線の幅（ピクセル数） （例）<TABLE border="5"> |
||||||||||||||||
| 表の外枠線の色を設定する！ | |||||||||||||||||
<TABLE bordercolor="colors">・・・</TABLE> （例）赤色
|
colors:外枠線の色の値（16進数） （例）赤色 <TABLE bordercolor="#ff0000"> |
||||||||||||||||