ページの背景に色を付ける

文章にタイトルを付けたい

head title 私のホームページへ /head /title

改行をする

ＨＴＭl.ソース内で改行しても、実際のプラウザでは改行されずに
表示されてしまいます。

改行しないで表示する

nobr> 〜/nobr>

強制的に改行する

wbr> 〜/wbr>

nobr> 〜 /nobr>タグ内で強制的に改行したい場合もあり、そんな折に使用

中央に配置する

center> 〜 /center>

行揃えを行う(特定の範囲位置を指定したい)

div align="★"> 〜 /div>

特定の範囲（div>）の表示位置・・・left、center、right
p>タグが前後に空白行を挿入することに対して、div>は空白行を挿入しません。

見出しを作成する

hn>h1 〜h6 /hn>

h1>タグが最大フォントサイズ、h6>タグが最少フォントサイズとなります
alignは行揃えを指定するものです。」省略すると、align="left"と同じ表示になります。

罫線を引く(サイズや色を指定したい)

　hr > 　　　　 横罫線

　　　　　　　　　　　　　　　　  align        罫線の表示位置　（left,center,right)
                                color        横罫線の色
                                noshade      横罫線を平面的に表示
                                size         横罫線の太さ
                                width        横罫線の長さ

 hr=size"1"color="black"width="50%"align="center">

段落を設定したい

p> 〜 /p> 段落

align 段落との行揃え　(left,center,right)

段落は、前後に空白行が入ります。終了タグを省略するより、基本的には付けたほうがHTML. ソースの見通しがよくなります。

入力した通りに表示する

pre> 〜 /pre> 入力した通り等幅フォントで表示する

入力したテキストをそのままレイアウトしたい場合に使用します。 空白文字は,プラウザで表示するときに無視されるので、 pre> 〜 /pre>タグを指定すると、プラウザは改行や半角の空白文字を無視しないで表示します。

フオントサイズを絶対値で指定する

font size= ★> 〜/font> フオントのサイズ・色・種類を指定する

　　　　　　　　　　　　　　　　size フオントのサイズを指定する 　　　　　　　　　　　　　　　　color フオントの色を指定する 　　　　　　　　　　　　　　　　face フオントの種類を指定する

　　　★・・・ 1 〜 ７ size属性は１ 〜 ７の数値で指定でき、数が大きくなるほどフォントサイズが大きくなります。

フオントサイズを相対値で指定する

font size= ★> 〜/font> フオントのサイズ・色・種類を指定する

　　　　　　　　　　　　　　　　size フオントのサイズを指定する 　　　　　　　　　　　　　　　　color フオントの色を指定する 　　　　　　　　　　　　　　　　face フオントの種類を指定する

basefont>タグはページ全体で基準となるフォントサイズや色を指定します。 　　　★・・・ +3 〜 -3 基準のフォントサイズから何段階大きか、または小さいかを「+」「-」を使って相対的に指定します。

font size="+3"> font size="+2"> font size="+1"> font> font size="-1"> font size="-2"> font size="-3">

フオントの種類や色を指定する

font color="★"face="☆"> 〜

★・・・#rrggbb値、または色の名前

☆・・・face="MS明朝 フォントフェイスの名前

「"face=”"ヒラギノ明朝 MSP明朝 平成明朝 明朝体”」「facc="sans"（HG創英角ポップ体、MS　ゴシック系）」 「facc="Serif"（明朝系）」「facc="cursivc"(ポップ系）」「facc="fantasy"[ファンタジー系）」 「facc="monospace"（等幅系）」を指定することができます。

フォントフェイスの名前MSP明朝

基準となるフオントを指定する

font size="★1" color="◆"face="☆"> 〜 ★・・・フォントサイズ ◆・・・#rrggbb値、または色名 ☆・・・フォントフェイスの名前

「facc="MS明朝"」「facc="ヒラギノ明朝"」とフォント名を指定できます。 フォント名は全角/半角の違いや空白の有無に注意してください。 また、指定フォントがインストールされていないコンピュータではフォントは代用されます。 フォント名以外にもフォントファミリーとして、facc="Sans"(ゴシック系） facc="Serif"(明朝系）、 facc="cursive"（ポップ系） facc="fantasy"（ファンタジー系） facc="monospacc"（等幅系）を 指定することができます。 font size="1" color="red" facc="MS明朝” font size="-4" color="gray" facc="MS明朝” font size="1" color="navy" facc="MSゴシック"

フオントサイズを大きくする

big> 〜 /big> 大きめの文字 small> 〜 /small> 小さめの文字

プラウザで設定されているフォントサイズを文字を基準にして、それぞれ大きめ、小さめのフォントを指定します

大きめの文字 小さめの文字

太字・斜体・等副のフォントを指定したい

p> 〜 /p> これが標準です b> 〜 /b> 太字のフォント

取り消し線を引く

strike 〜 /strike> ｓ 〜 /ｓ>取消線

要素内の文字を削除線付きの文字で表示します。 要素内の文字を削除線付きの文字で表示します 要素内の文字を削除線付きの文字で表示します

下線を引く

　u> 〜 /u>下線

下線を引きたいときに使用します

下線を引きたいときに使用

文字を強調する

　em> 〜 /em>強調　

strong>タグと同様にテキストを強調したい場合に使います。 strong>タグよりも弱いレベルの強調になります。イタリック（斜体）で表示されます。

タグと同様にテキストを強調したい場合に使います

テキストをより強調する

　strong> 〜 /strong>より強い強調

より強く強調する部分であることを示します,一般的には太字で表示されem>タグよりも強くい協調されます。 strong>タグは太字で表示され、em>タグはイタリック（斜体）で表示されます。

より強く強調する部分であることを示します

文字を上付きにする

　sup> 〜 /sup>上付き文字

プラウザでは文字が小さく表示されます。 ^{文字を上付き}文字を上付きにする

文字を下付きにする

suｂ> 〜 /suｂ>下付き文字

プラウザでは文字が小さく表示されます。 _{文字を下付き}文字を下付きにする

文字を点滅させる

　blink> 〜 /blink>文字点滅

Netscape Navigatorでは、ユーザーの注意を引き付けるために blink> 〜 /blink>タグで囲んだ部分を点滅させることができます。 Internet Explorer　ではサポートされていません。

テキストをスクロールさせる

marquee> 〜 /marquee>スクロール

タグで囲んだテキストを右から左へスクロールして表示します。

テキストを右から左へスクロール

テキストをスクロールさせる−２（背景色）

テキストをスクロールさせる 日本人が好きな代表的な色は「青」です。

動きに関する属性 behavior="scroll"、 "altenate"、 "slide" (スクロールの仕方) direction="left"、 "right"、 "up"、 "down" (スクロールの方向） scroll テキストが片方から出てきてぺーじを横切る動作を繰り返します(初期値） alternate テキストがスクロールする範囲の片端にくると、逆方向にスクロール slide テキストがスクロールする範囲の片端にくると、停止

テキストがスクロール範囲の片側にくると、逆方向にスクロールする

テキストをスクロールさせる−3（回数・時間）

★・・・・loop=回数、無限の場合は-1、または infinite ★・・・・scrolldelay=ミリ秒 ★・・・・scrollmount=ピクセル数

scrolldelay 属性は、テキストを動かす時間間隔をミリ秒単位で指定することで、 スクロールスピードを変更できます。 scrollmount属性は、１回の移動距離を指定します。数値を大きくすると粗い動きになり、 小さくするとスムーズになります。

スクロールは5回させる。

スクロールは無限の場合。

テキストを動かす時間間隔の場合。

テキストをスクロールさせる−4（動作・方向）

directlon属性は方向を指定します behavioｒ属性のscrollは、初期値で一方的にだけ繰り返し移動します。 slideは、指定した方向に１回だけ移動して端で停止します。 alternateは、繰り返し左右に移動します。 behavioｒ="alternate"と指定した場合、directlon＝"left"とdirectlon="right"では最初に この属性は文字の表示される位置だけが 異なります。

一方的にだけ繰り返し移動します。

指定した方向に１回だけ移動して端で停止します。

テキストをスクロールさせる−5（背景サイズ・位置）

marquee bgcolor="★ > 〜 /marquee>背景

★・height=ピクセル数、（スクロールの高さ）または％ ★・width=ピクセル数、（スクロールの幅）または％ ★ ・hspace=ピクセル数　（スクロールの左右の余白 ★・vspace="ピクセル数 （スクロールの上下の余白） ★・align=top、middle、botom　

％指定はウィンドウサイズを基準とした場合です。hspace属性は、スクロール範囲と左右のテキストの間の距離を指定します。 vspace属性は、スクロール範囲と上下のテキストの間の距離を指定します。 align属性は、スクロール範囲の次に来るテキストの位置指定です。top(上端揃え）、mi（中央揃え）bottom（下端揃え） を指定します。

ページに画像を表示する

　img src="★”alt"☆”>　画像

　　　　　　　 ★・・・・画像ファイル名 　　　　　　　 ☆・・・・画像の代わりに表示されるテキスト

src属性は、画像ファイル名で省略することはできません。GIF、JPEG、PNG形式のファイルが使用できます。 拡張子は、順に「.gif」「.jpeg」「.png」です。

img src="kontyu_1.jpg" height"30" width="50" alt="かぶと>

画像のサイズを指定する

img src="◆”height="★"width>

　　　　　　　　　◆・・・・画像ファイル名 　　　　　　　　　★・・・・ピクセル数、または％ 　　　　　　　　　☆・・・・ピクセル数、または％

img>タグはheight属性は、画像の高さを指定します。％で指定した場合には、 プラウザのウインドウサイズが基準になります。 width属性は、画像の幅を指定します。％で指定した場合には、プラウザのウインドウサイズが基準になります。

img src="kontyu_1.jpg" height"50" width="75" alt="かぶと”>

背景に画像を表示する

body background="★"> 〜 /body> 　　　　　　　　　◆・・・・画像ファイル名

img src="kontyu_1.jpg" height"10%" width="10%" alt="かぶと”>

表を作成する

table> 〜 /table> 表の定義

table width="★"height="☆"border="▲"> 〜

★・・・・・ピクセル数　（表の幅） ☆・・・・・ピクセル数　（表の高さ） ▲・・・・・ピクセル数　（表の外枠線の幅）

属性　 align 位置 　　　　　 background 表の背景画像 　　　　　 bgcolor 表の背景色 　　　　　 border 表の外枠線の幅 　　　　　 bordercolor 表全体の枠線の色 　　　　　 bordercolordark 表の左と上の枠線の色 bordercolordark 表の右と下の枠線の色 cellpadding セル内の余白 　　　　　 cellspacing セルの間隔 　　　　　 frame 外枠線の表示方法 height 表の高さ rules 内側罫線の表示方法 width 表の幅

table rules="★"border="☆"> 〜 /table> ★・・・・・none（なし）、groups[グループの境界）、 ・rows（行の境界）、cols(列の境界）、all(すべての罫線） 　　 ☆・・・・・ピクセル数　（表の罫線）

table>タグのrules属性は表内のセルを仕切る罫線の表示方法を指定します。 groupを指定すると、

画像にテキストを回り込ませる

img src="★” align="◆” >

img src="★”　align="◆”/＞

★・・・・・画像のファイル名
◆・・・・・ left、right

align 属性でleftもしくはrightを指定すると、画像を片側に配置しその画像の反対側に複数行のテキストを回り込ませることができます。

left 画像を左側に配置し、テキストはその左側に回り込む right 画像を右側に配置し、テキストはその左側に回り込む 画像の反対側に収まりきらなかったテキストは、画像の下に送られます。

　align属性を指定しないと、 初期のalign=bottomが適用され、・・・(中略）・・・画像の下に送られます。

　 align属性でleftもしくはrightを指定すると・・（中略）・・としておけばよいでしょう。
align属性でleftもしくはnghtを指定すると・・（中略）・・としておけばよいでしょう。
align属性でleftもしくはnghtを指定すると・・（中略）・・としておけばよいでしょう。
align属性でleftもしくはnghtを指定すると・・（中略）・・としておけばよいでしょう。

　 align属性でleftもしくはnghtを指定すると・・（中略）・・としておけばよいでしょう。
align属性でleftもしくはnghtを指定すると・・（中略）・・としておけばよいでしょう。

リンクをはる

a href="URI" ウインドウ名"> 〜

href・・・・・・・・リンク先のURIを指定する

target="_blank" 新しいウィンドウを開いてリンクする

target="_self"・・リンク元と同じフレームのリンクする

target="_parent"・ひとつ上の親フレームにリンクする

target="_top"・・ フレームをすべて解除してリンクする

target="abc"・・・abcという名前のフレームにリンクする

表(テーブル）を作りたい

table ★> 〜 /table> 表

tr> 〜 /tr> 横一列（行） 　　　　　　　

td> 〜 /td> セル ★・・・・・枠線の幅(ピクセル数）

表(テーブル）は、table>、tr>、td>タグを基本として作成します。

table> その範囲が表であることを示し、表を構成する各要素の最初と最後に配置します。 tr> 行を定義します。横一列分のデータの最初と最後に配置します。 td>表に含まれるここのセルを定義します。セルに入る内容はこのタグ内に記述します。

border属性　 表全体の幅を１以上のピクセル数で指定します。この属性が指定されていない場合は、 表に枠線は表示されません。

外枠線の幅を指定したい 。

table dorder="★"> 〜 /table>

★・・・・・枠線の幅(ピクセル数）

border属性で表の外枠線の幅を１以上のピクセル数で指定します。 この属性が指定されていない場合は、表に枠線は表示されません。また、border="0"を指定したときも同じです。

表の位置を指定したい

table align="★" 〜 /table>

★・・・・・left、 right、center

align属性でひょうを文章中の左（left)、右(right)、中央(center)のいずれに配置するかを指定します。 一般的にleft、またはrightを指定して表を左右に寄せた場合、続くテキストは表の隣(右もしくは左）に回り込みます。 回り込みを解除するには、br>(XHTMLの場合はbr/>タグ）にclear属性を指定します。

表に対する回り込みを解除したい

br clear="★” >

br clear="★"/>

　　　★・・left、 right、all、none

表に対するテキストの回り込みを解除し、それ以降テキストを表の下の行から続けたいときは、
タグにclear属性を指定します。値と効果は次のとおりです。

Left 表の左側にあるとき( table align="left">) の回り込み解除 right 表の右側にあるとき( table align="right">) の回り込み解除 all どちら側の配置に対する回り込み解除 none 回り込みを解除せず、改行のみ行う(初期値）

表のサイズを指定したい

table width="★"height="◆"> 〜 /table>

★・・・・・テーブルの幅(ピクセル数または％）

★・・・・・テーブルの高さ(ピクセル数または％）

表の幅と高さを指定するには、table>タグにwidht属性とheight属性を指定します。 いずれもピクセル数で直接指定するか、ウインドウの大きさに対する割合をパーセント（％）で指定します。

table border="1"width="50%">

枠線の色を指定したい

table border="★" 〜 bordercolor="▲"> 〜 /table>

table border="★" 〜 bordercolorlight="▲"

table border="★" 〜 bordercolordark="▲"> 〜 /table>

★・・・・・枠線の幅(ピクセル数）

▲・・・・・色指定値（#rrggbb)、または色名(colorname)

bordercolor属性　= 表全体の枠線の色を指定します。

bordercolorlight属性 = 表全体のうち左と上の枠線の色を指定します。

bordercolordark属性 = 表全体のうち右と下の枠線の色を指定します。

枠線の表示方法を指定したい

table border="★"frame="▲"> 〜 /table>

表の背景画像を指定したい

table dackground="★"> 〜 /table>

任意のテキストや画像にリンクを設定します。リンク先（移動先）のURLは、現在のファイルとの 位置関係を考えて、絶対URLのするか相対URLにするかを決めてください。 タグは入れ子にして使うことはできません。

Umi kakasiのページ

他のページへのリンク

a href="◆#★"> 〜 /a> a name="★"> 〜 /a>

◆.......リンク先のURL ★.......名前

リンク元を設定するタグのhref属性に、リンク先のURLを指定すれば、他のページの特定の位置にジャンプする リンクを作成することができます。この場合、リンク先を a href="★">とし、 リンク先のURLと name 属性で設定した名前とをリンク元の a href="◆#★">に指定します。 XHTMLではこの名前の指定に id 属性を使用しますが、id 属性に対応していない既存のプラウザなどへの配慮から、 同じ名前を指定した name 属性も同時に記述しておくことが一般的です。

(table)タグを使った文章の記述例)

この場所に文章を記述する

table で枠を作り直接テーブルの中で文字が挿入できるタグ
textarea 複数行のテキストボックス　name="ボックスの名前”cols="ボックスの幅”rows="ボックスの行数”

textarea name="naiyou" cols="90" rows="10">

tr>td>宮崎県/td>td>日南市/td>td>油津町/td>/tr>

キャプション(タイトル）を付けたい

caption>タイトルの記述/caption>

表（テーブル）は、table> tr> td> 3個の タグを基本として作成します。
table>その範囲が表であることを示し、表を構成する各要素の最初と最後に配置します。
tr>行を定義します。横一列分のデータの最初と最後に配置します。
td>表に含まれる個々のセルを定義します。セルに入る内容はこのタグ内に記述します。
border属性　表全体の枠線の幅をピクセル数で指定します。
この属性が指定されていない場合は、表に枠線は表示されません。