超タグ辞典 ダウンロードバージョン

超タグ辞典・もくじ
Enterキーを押しただけでは改行できないの? 1.改行
文字を修飾すると、分かりやすく、見やすくなります。 2〜12.文字修飾
横にのびた細長い水平線。これをいろいろいじってカッコよく! 13〜17.水平線
「ハート」などが表示出来る。キーボードから打てない文字を表示させよう! 18.特殊な記号を書く
文字や画像などを真ん中に表示したり右側に寄せたりしてみよう。 20・21.配置関係
まずは、文字を流したりしてみよう! 22〜28.流れる文字
画像を付け加えてホームページをさらにパワーアップさせよう! 29〜33.画像関係
リンクを作らないとどこにも行けないよ〜。 34〜38.リンク関係
ホームページの背景を変えたりできる。 39〜43.ページ全体の設定
より自分らしいミュージックを付けよう♪ 44・45.ページに音楽
こんな物までタグで作れちゃう! 46〜49.フォーム部品
使いこなせればめちゃくちゃ役に立つよ! 50〜62.表(TABLE)関係
スクロールバーの色を変えるなど、タグでは出来ない事もやってくれる。 63〜72.スタイルシート(1)
リンクに触れた時だけ色を変えたり…など、少し高度な技です。 73〜78.スタイルシート(2)
カラーコードの意味がわからなくても英語で入力して表示できる色がいろいろあります。 79.色を英語で
英語で表すよりもさらに細かな色の指定が可能です。 80.カラーコード一覧
ホームページを作ってみよう!  タグを入力するときの注意点  タグの名前が分かるときは

4096色を一覧で見れます。色には困らない! 4096色見本

ホームページを作るときなどに使うタグ(HTML)の使い方を出来るだけわかりやすく紹介してます。役立つタグやいろいろなタグを1ページにまとめました。

これらのタグを知ってるとこんなホームページなどが作れたりします!
・ページの背景に画像を付ける ・文字が流れる ・音楽が流れるホームページ ・何十万色もの色を自由自在に操る  他にもいろんな事が出来たりします!



ームページを作ってみよう!

※最低限必要なタグが書かれたファイルは、白ページフォルダ内に同封しています。

まず、テキストエディター(Windowsでいえばメモ帳など)でこういうタグを書きます。
<HTML>
<HEAD>
<TITLE>私のホームページ</TITLE>
</HEAD>
<BODY>
<FONT SIZE="6">WELCOME!</FONT>
ようこそ。Myホームページへ!
</BODY>
</HTML>
※これらは最低限必要なタグです。特に指定が無いかぎり文章やタグは<BODY></BODY>の間に入れます。
私のホームページ』の部分は、作るページの題名(タイトル)に書き換えます。
※ここで入れる題名は、タイトルバーに表示されます。また、それだけではなく、検索する時にそのページの題名として表示されたりします。


次に、HTML形式で保存します。
この場合は、 page1.html で保存してます。


page1このページの名前です。この部分には好きな名前を付けよう!(インターネットで公開する場合は必ず半角英数字で付けてね!)
.html「これはHTMLという種類のファイルです」という意味です。(ここも半角文字で入力します)


保存すると、「page1」と書かれたホームページのファイルが出来ます。page1.htmlで保存した場合)
これを開くと、ブラウザー(ホームページを見るソフト)が起動するので、思った通りに表示しているか確認してみよう。

ちゃんと思いどおりに表示されていたら出来あがり!気に入らなけらばどんどん修正しよう!
(出来たホームページをインターネットで送るとき、画像がある場合は画像も一緒に送る事を忘れないでね!)



■ タグの名前が分かるときはこちらから(このページの下の部分にジャンプします。)
A B BIG BR CENTER DIV EMBED FONT HR I
IMG MARQUEE OPTION S SELECT SMALL STYLE TABLE TD TEXTAREA
TR TT U  




▼タグは必ず半角文字で入力してね!(数字も)
× <BR>これではダメです。× WIDTH="40"これもダメです。
 <BR>これならOK! WIDTH="40"これならOK!

▼タグの中の半角スペースもちゃんと入れてね!
 <FONT COLOR="Green">緑</FONT>これならOK!
× <FONTCOLOR="Green">緑</FONT>半角スペースが抜けています。これではダメです。
× <FONT COLOR="Green">緑</FONT>全角スペースではダメです。

▼大文字、小文字はどちらでも使用可能です。
 <BR>これはOK!
 <br>これでもOK!

もくじにもどる
ホームページを記述するときに、Enterキーを押しただけでは改行ができません。そこでこのタグがとても重要になります。
改行する <BR>

【タグ入力例】
澄みきった青い空<BR>ぽつんと浮かんだ白い雲。<BR><BR>あぁ、ゆったり。

【 こうなる 】
澄みきった青い空
ぽつんと浮かんだ白い雲。

あぁ、ゆったり。


2〜12  文字修飾 もくじにもどる

数字(この場合、文字の大きさは5)が大きいほど文字が大きくなるよ。使える数字は 1234567 の7種類です。
文字の大きさを変える <FONT SIZE="5">文字の大きさは5</FONT>

( 1 から 7 までの大きさを表しています。)
タグ入力例 こうなる
<FONT SIZE="1">文字の大きさは1</FONT> 文字の大きさは1
<FONT SIZE="2">文字の大きさは2</FONT> 文字の大きさは2
<FONT SIZE="3">文字の大きさは3</FONT> 文字の大きさは3
<FONT SIZE="4">文字の大きさは4</FONT> 文字の大きさは4
<FONT SIZE="5">文字の大きさは5</FONT> 文字の大きさは5
<FONT SIZE="6">文字の大きさは6</FONT> 文字の大きさは6
<FONT SIZE="7">文字の大きさは7</FONT> 文字の大きさは7
関連項目 4.大きさの変更&色を付ける 9.文字を大きくする 10.文字を小さくする 64.文字の大きさを固定する(スタイルシート)
Green』(緑色)の部分を変えると他の色にもできるよ!  例えば ●Red ●Blue ●Yellow ●Gray ●Aqua ●Fuchsia などの色があります。または、カラーコード一覧のたくさんの色を使うこともできます。(⇒80.カラーコード一覧
緑色の文字』の部分を、色を変えたい文字に書きなおしてください。
文字に色を付ける <FONT COLOR="Green">緑色の文字</FONT>

【 こうなる 】

緑色の文字

■ 赤色(Red)にするには
<FONT COLOR="Red">赤色の文字</FONT>

■ 青色(Blue)にするには
<FONT COLOR="Blue">青色の文字</FONT>
関連項目 4.大きさの変更&色を付ける 39.ページ全体の文字色を変える 65.文字の中に色を付ける(スタイルシート) 79.色を英語で
文字の大きさ(⇒2.文字の大きさを変える)と(⇒3.文字に色を付ける)を同時に変えます。
数字(この場合、文字の大きさは6)が大きいほど、文字も大きくなります。使える数字は 1・2・3・4・5・6・7 の7種類です。さらに、『Green』(緑色)の部分を変えるといろんな色にもできるよ!  例えば ●Red ●Green ●Blue ●Yellow ●Gray ●Aqua ●Fuchsia などの色があります。またはカラーコード一覧のたくさんの色を使うこともできます。(⇒80.カラーコード一覧
この場合は、『大きい緑色の文字』の部分を、大きさ&色を変えたい文字に書きなおしてください。
大きさの変更&色を付ける <FONT SIZE="6" COLOR="Green">大きい緑色の文字</FONT>

【 こうなる 】

大きい緑色の文字
簡単タグシリーズ その1  『太字』の部分を、太字にしたい文字に書き換えてください。
文字を太くする <B>太字</B>

【 こうなる 】

太字

くらべてみる
太字太字なし
関連項目 6.文字を斜体にする 7.文字に下線を引く 65.文字の中に色を付ける(スタイルシート)
簡単タグシリーズ その2  『ななめの字』の部分を、斜体にしたい文字に書き換えてください。
文字を斜体にする <I>ななめの字</I>

【 こうなる 】

ななめの字

くらべてみる
ななめの字ななめではない字
関連項目 5.文字を太くする 7.文字に下線を引く 65.文字の中に色を付ける(スタイルシート)
簡単タグシリーズ その3  『下線つき』の部分を、下線を引きたい文字に書き換えてください。
文字に下線を引く <U>下線つき</U>

【 こうなる 】

下線つき

関連項目 8.文字に取り消し線を引く
簡単タグシリーズ その4  『この文章は取り消します』の部分を、取り消したい文字に書き換えてください。
文字に取り消し線を引く <S>この文章は取り消します</S>

【 こうなる 】

この文章は取り消します

関連項目 7.文字に下線を引く
大きい文字の部分を、1段階大きくしたい文字に書き換えてください。
文字を大きくする <BIG>大きい文字</BIG>

【 こうなる 】

大きい文字

くらべてみる
大きい文字何もしていない文字
関連項目 2.文字の大きさを変える 10.文字を小さくする
この文字小さいの部分を、1段階小さくしたい文字に書き換えてください。
10 文字を小さくする <SMALL>この文字小さい</SMALL>

【 こうなる 】

この文字小さい

くらべてみる
この文字小さい何もしていない文字
関連項目 2.文字の大きさを変える 9.文字を大きくする
MS 明朝』の部分を、使いたいフォントの名前に書き換えてください。ここで指定したフォントが入っていない場合は、いつも見ている標準のフォントで表示されます。
これは明朝体です』の部分を、フォントを変えたい文字に書き換えてください。
11 文字のフォントを変える <FONT FACE="MS 明朝">これは明朝体です</FONT>

【 こうなる 】

これは明朝体です

関連項目 12.文字の幅を一定にする
等幅フォントの部分を文字の幅を一定にしたい文字に書き換えてください。1文字1文字の文字の幅が同じになります。
12 文字の幅を一定にする <TT>等幅フォント</TT>

【 こうなる 】

等幅フォント

くらべてみる
等幅フォントABCDEFGHIJKLMNOPQRSTUVWXYZ.,:@?!&
標準フォントABCDEFGHIJKLMNOPQRSTUVWXYZ.,:@?!&

文字の大きさを変えたくない場合は?
<TT><FONT SIZE="3">小さくない等幅フォント</FONT></TT>

※等幅フォントにすると、ブラウザー(ホームページを見るソフト)によっては、文字が小さくなる事があります。小さくなった文字の大きさを変えたい場合は、<TT>タグの内側に<FONT>タグ(⇒2.文字の大きさを変える)を入れるなどをして、大きさを変える事が出来ます。
関連項目 11.文字のフォントを変える


13〜17  水平線 もくじにもどる

13 水平線を引く <HR>

【 こうなる 】


Green』(緑色)の部分を変えると他の色にもできるよ。  例えば ●Red ●Blue ●Yellow ●Gray ●Aqua ●Fuchsia などの色があります。またはカラーコード一覧のたくさんの色を使うこともできます。(⇒80.カラーコード一覧
(Netscape Navigatorなど水平線の色が変わらないブラウザーもあります。)
14 水平線の色を変える <HR COLOR="Green">

【 こうなる 】


●いろいろな色の線
<HR COLOR="Blue">
<HR COLOR="Red">
<HR COLOR="Purple">

水平線の太さを変えることができます。数字(この場合は10)の部分を変えるといろんな太さにできるよ!
15 水平線の太さを変える <HR SIZE="10">

【 こうなる 】


●いろいろな太さの線
太さ:1<HR SIZE="1">
太さ:6<HR SIZE="6">
太さ:20<HR SIZE="20">

水平線の長さを変えてみよう。数字(この場合は50%)の部分を変えるといろんな長さにできるよ!
16 水平線の長さを変える <HR WIDTH="50%">

【 こうなる 】


●いろいろな長さの線
長さ:10%<HR WIDTH="10%">
長さ:40%<HR WIDTH="40%">
長さ:90%<HR WIDTH="90%">

いろいろ組み合わせてすごい線を作ろう!
Green』(緑色)の部分は(⇒14.水平線の色を変える)を、「SIZE="10"」の、『10』の部分は太さ(⇒15.水平線の太さを変える)を、「WIDTH="50%"」の、『50%』の部分には長さ(⇒16.水平線の長さを変える)をそれぞれ好きなのに書き換えてください。
17 属性の組み合わせ <HR COLOR="Green" SIZE="10" WIDTH="50%">

【 こうなる 】


●いろいろな組み合わせの線(例)
例(1)<HR COLOR="Lime" SIZE="25" WIDTH="40%">

例(2)<HR COLOR="Brown" SIZE="1" WIDTH="80%">


キーボードからでは打てない文字を表示させよう! ※必ず半角の小文字で書いてください。
一番最後は、「:(コロン)」ではなく、「;(セミコロン)」ですので注意してください。
18 特殊な記号を書く &hearts;

記号の種類こんな表示入力例
ハート&hearts;
クラブ&clubs;
スペード&spades;
コピーライト©&copy;
温泉&#9832;
おんぷ&#9835;

【ちょっと応用編】
※ハートにい色(Red)をつけてみました。文字に色を付けるには…?(⇒3.文字に色を付ける



ちょっと応用編のタグの見本
<FONT COLOR="Red">&hearts;</FONT>

<!--から-->までの間に入っている文字はコメントとなり、表示されません。コメントの中の文字に改行が入っていてもOKです。また、[表示]→[ソース(の表示)](Internet Explorerの場合)などをすることで、隠したコメントを見ることが出来ます。
19 コメントを書く <!--隠しコメント-->


20・21  配置関係 もくじにもどる

中央に表示と書かれてある所を、真ん中に表示させたい文字や画像(⇒29.画像を表示させる)などに書き換えてください。
20 中央に表示 <CENTER>中央に表示</CENTER>

【 こうなる 】

文字を中央に表示
中央に表示


画像を中央に表示
関連項目 21.右寄せ もう一つの中央に表示する方法
右寄せと書かれてある部分を、右寄せにしたい文字や画像(⇒29.画像を表示させる)などに書き換えてください。
21 右寄せ <DIV ALIGN="RIGHT">右寄せ</DIV>

【 こうなる 】

文字を右寄せ
右寄せ


画像を右寄せ

もう一つの中央に表示する方法
<DIV ALIGN="CENTER">中央に表示</DIV>

このようにしても、20.中央に表示と同じ効果になります。右寄せのタグに似ていますが、違う所は『RIGHT』(右)の部分が『CENTER』(中央)になっている所です。
関連項目 20.中央に表示 62.左右に配置する


22〜28  流れる文字 もくじにもどる

一部のブラウザー(ホームページを見るためのソフト)以外では流れる動作をしないものもあります。
22 文字を流す <MARQUEE>流れる</MARQUEE>

【 こうなる 】

流れる
23 反対に流れる字 <MARQUEE DIRECTION="RIGHT">反対に流れる</MARQUEE>

【 こうなる 】

反対に流れる
24 文字が往復する <MARQUEE BEHAVIOR="ALTERNATE">往復する</MARQUEE>

【 こうなる 】

往復する
Green』(緑色)の部分を変えると他の色にもできる!  例えば ●Red ●Blue ●Yellow ●Gray ●Aqua ●Fuchsia などの色があります。またはカラーコード一覧のたくさんの色を使うこともできます。(⇒80.カラーコード一覧
25 流れるとこに色つける <MARQUEE BGCOLOR="Green">色つけ</MARQUEE>

【 こうなる 】

色つけ
数字(この場合、速さは200)が大きいほど遅くなるよ。
26 流れる速さを変える <MARQUEE SCROLLDELAY="200">速さ変わる</MARQUEE>

【 こうなる 】

数字=200速さ変わる

数字=500速さ変わる
数字(この場合、なめらかさの値は『1』)が少ないとなめらかになります。そのかわり遅くなるよ。 反対に数字を大きくすると動きが荒くなるけど流れが早くなるよ。
27 流れをなめらかに <MARQUEE SCROLLAMOUNT="1">流れなめらか</MARQUEE>

【 こうなる 】

流れなめらか
流れるワザを使ってこんなこともできる!画像(⇒29.画像を表示させる)も流す事ができます。
28 流れる文字の応用 

[電光掲示板風]
※流れるところをBlack(黒色)に(⇒25.流れるとこに色つける)、文字の色はLime(黄緑色)にして、文字を小さくしました。(⇒4.大きさの変更&色を付ける
[お知らせ!](△月☆日)今日○○がありました。

電光掲示板風のタグの見本
<MARQUEE BGCOLOR="Black"><FONT SIZE="2" COLOR="Lime">[お知らせ!](△月☆日)今日○○がありました。</FONT></MARQUEE>


29〜33  画像関係 もくじにもどる

※架空のアドレスを使用しています。これらで使われているアドレスは存在しません。ご注意ください。
青色であらわした部分『http://www.○△□.ne.jp/』と、赤色であらわした部分『ichigo.gif』の両方を表示させたい画像のアドレスに書きかえてください。
青色の部分は省略できるよ(HTMLファイルと表示させたい画像が同じフォルダの中に置いてある場合)最後の『.gif』(その画像の種類。写真などは『.jpg』)は忘れずに書いてね。
29画像を表示させる
 <IMG SRC="http://www.○△□.ne.jp/ichigo.gif">

【 こうなる 】



関連項目 30.画像の説明 31.画像の大きさの指定(拡大・縮小) 32.画像にリンク
画像のアドレス』の部分を表示させたい画像のアドレスに書きかえてください。これはいちごだよ』の部分には、その画像の説明に書きかえてね!
画像が表示出来ない時にも、何の画像なのかが分かるように代替テキストとして、この説明で入力した文字が表示されます。
30 画像の説明 <IMG SRC="画像のアドレス" ALT="これはいちごだよ">

【 こうなる 】(いちごの画像にマウスカーソルを置いてみてください。)

これはいちごだよ

関連項目 29.画像を表示させる
画像のアドレス』の部分を表示させたい画像のアドレスに書きかえてね。
WIDTH="40"」の、『40』の部分は、画像の横幅を数字で、「HEIGHT="40"」の、『40』の部分には、画像の高さを数字で入れてね。
31 画像の大きさの指定(拡大・縮小) <IMG SRC="画像のアドレス" WIDTH="40" HEIGHT="40">

【 こうなる 】
横幅:40 高さ:40
(元の大きさ)
横幅:80 高さ:80
(2倍に拡大)
横幅:120 高さ:40
(横幅だけを3倍に拡大)
横幅:40 高さ:160
(高さだけを4倍に拡大)

[ポイント&注意点]
この方法で、元の画像の大きさと同じ大きさを指定すると、ページを読み込む時に配置が崩れなかったり、速く読み込む事が出来るのでおすすめです。
また、インターネットで公開する時の注意点として、この方法で大きい画像を縮小して表示しても画像のデータ量はそのままです。画像を表示するには、画像のデータを全て取り込む必要があり、ページを見てくれる人に縮小された画像を時間をかけて読み込ませるといった事にもなります。この方法で縮小するより、画像を小さく編集して使うことをおすすめします。
(参考に、主な回線速度の目安)ダイヤルアップ(56K) 100KBを約25秒/ISDN回線 100KBを約15秒


関連項目 29.画像を表示させる
●画像にリンクを付けると、画像に枠がついて困る。こうやって枠を取ってしまいましょう!
BORDER="0"』を付けると枠は無くなります。反対にこれが無いと、枠が現れます。
http://www.○△□.ne.jp/』は、実在しない架空のアドレスです。この部分はリンク先のホームページのアドレスに書き換えてください。  『画像のアドレス』の部分を表示させたい画像のアドレスに書きかえてね。
32 画像にリンク <A HREF="http://www.○△□.ne.jp/">
<IMG SRC="画像のアドレス" BORDER="0">
</A>

【 こうなる 】(リンクを設定していませんので、クリックしても意味はありません。)

枠がないリンク
枠があるリンク
32.「画像にリンク」の詳細
<A HREF="http://www.○△□.ne.jp/">
<IMG SRC="画像のアドレス" BORDER="0">
</A>


1行目<A HREF="http://www.○△□.ne.jp/">)は、ここからリンク開始のタグです。
2行目<IMG SRC="画像のアドレス" BORDER="0">)これは、画像を表示するタグです。
最終行</A>)は、リンクの終了のタグです。(3行に分けて書いていますが、1行にまとめてもOKです。)
関連項目 29.画像を表示させる  34.リンクを作る
●画像の横に文章を書こうと思ったら文章が下に行くので上に間があいて困る。ちゃんと横に文字が表示される方法は?
画像のアドレス』の部分を表示させたい画像のアドレスに書きかえてね。  『画像の横に書く文章』の部分には、画像の横に表示させたい文章に書き換えてください。
33 画像の横に文章 <IMG SRC="画像のアドレス" ALIGN="LEFT">
画像の横に書く文章
<BR CLEAR="LEFT">

【 こうなる 】
画像の横に文字が来る例
♪いちご・いちご・いちごぉ〜いちご〜をたべると〜ビタミンCが多く取れるらしいのよ〜!いちご・いちご・いちごぉ〜いちごをたべると〜……
画像の横に文字が来ない例
♪いちご・いちご・いちごぉ〜いちご〜をたべると〜ビタミンCが多く取れるらしいのよ〜!いちご・いちご・いちごぉ〜いちごをたべると〜……

右側に画像を置きたい場合は?
<IMG SRC="画像のアドレス" ALIGN="RIGHT">
画像の横に書く文章
<BR CLEAR="RIGHT">


※右側に画像を置きたい場合は、『ALIGN="LEFT"』(左)の部分を『ALIGN="RIGHT"』(右)にします。
また、『<BR CLEAR="LEFT">』も『<BR CLEAR="RIGHT">』にします。

【 こうなる 】

♪いちご・いちご・いちごぉ〜いちご〜をたべると〜ビタミンCが多く取れるらしいのよ〜!いちご・いちご・いちごぉ〜いちごをたべると〜……
関連項目 29.画像を表示させる


34〜38  リンク関係 もくじにもどる

赤色であらわした部分『http://www.○△□.ne.jp/bana21/』は、実在しない架空のアドレスです。この部分をリンク先のホームページのアドレスに書き換えてください。
また、『リンク』と書かれてある部分をリンクとして表示させたい文字や画像(⇒29.画像を表示させる)に書き換えてね。
34 リンクを作る <A HREF="http://www.○△□.ne.jp/bana21/">リンク</A>

【 こうなる 】(実際にはこのアドレスは存在しないためリンク先を見ることは出来ません。)

リンク

関連項目 32.画像にリンク 35.メールアドレスへのリンクを作る 36.リンク文字の色を変える 37.リンクに説明をつける 38.リンク先を新しいウィンドウで表示する 66.リンクした時のカーソルを変える(スタイルシート)
メールアドレス』の部分をメールアドレスに書き換えてね。
35 メールアドレスへのリンクを作る <A HREF="mailto:メールアドレス">メールはこちら。</A>

【 こうなる 】(実際にはこのアドレスは存在しないためメールを送ることは出来ません。)

メールはこちら。

関連項目 34.リンクを作る
リンクの色を自分の好きな色に変えてみよう!
Red』(赤色)の部分にはリンクの文字の色(リンク先をまだ見ていないとき)を、『Green』(緑色)の部分には訪問中の色を、『Orange』(オレンジ色)の部分には訪問済みのリンクの色の色に書き換えてください。
アドレス』の部分は、リンク先のホームページアドレスに書き換えてください。
色の名前の例として、 ●Red ●Green ●Blue ●Yellow ●Gray ●Aqua ●Fuchsia などがあります。または、カラーコード一覧のたくさんの色を使うこともできます。(⇒80.カラーコード一覧
36 リンク文字の色を変える LINK="リンクの文字色"
ALINK="訪問中の文字色"
VLINK="訪問済みの文字色"

●タグ入力例
<HTML>
<HEAD>
<TITLE>私のホームページ</TITLE>
</HEAD>
<BODY LINK="Red" ALINK="Green" VLINK="Orange">
ようこそ。My ホームページへ!<BR>
<A HREF="アドレス">リンク</A>
</BODY>
</HTML>
関連項目 34.リンクを作る 74.リンクに触れた時の色を変える(スタイルシート)
トップページへ』の部分をそのリンクの説明に書き換えてください。
青色であらわした部分『http://www.○△□.ne.jp/bana21/』は架空のアドレスです。リンクしたいアドレスに書き換えてください。(ここに書かれているアドレスは、ここのトップページのアドレスです。)
37リンクに説明をつける
 <A HREF="http://www.○△□.ne.jp/bana21/" TITLE="トップページへ">リンク</A>

【 こうなる 】リンクされてる文字にカーソルを置いてみると・・・?※実在しないアドレスなのでリンク先は見られません。

リンク

関連項目 34.リンクを作る 66.リンクした時のカーソルを変える(スタイルシート)
TARGET="_blank"』を付け加えると、リンク先が新しいウィンドウで表示できるようになります。
青色であらわした部分『http://www.○△□.ne.jp/bana21/』は架空のアドレスです。リンクしたいアドレスに書き換えてください。(ここに書かれているアドレスは、ここのトップページのアドレスです。)
38リンク先を新しいウィンドウで表示する
 <A HREF="http://www.○△□.ne.jp/bana21/" TARGET="_blank">リンク</A>

【 こうなる 】※色の確認のページにリンク先を変更しています。

リンク

関連項目 34.リンクを作る


39〜43  ページ全体の設定 もくじにもどる

ページの中のすべての文字の色をこのタグだけで変えることが出来ます。
Blue』(青色)の部分を変えると、他の色にすることもできます。  例えば ●Red ●Green ●Yellow ●Gray ●Aqua ●Fuchsia などの色があります。またはカラーコード一覧のたくさんの色を使うこともできます。(⇒80.カラーコード一覧
色を付けるタグ(⇒3.文字に色を付ける)などを使うことで、その部分の色をまた変えることもできます。
39 ページ全体の文字色を変える TEXT="Blue"

●使用例 【 こうなる 】
<HTML>
<HEAD>
<TITLE>ブルーのページ</TITLE>
</HEAD>
<BODY TEXT="Blue">
<FONT SIZE="6">WELCOME!</FONT>
ようこそ。ブルーのページへ!
</BODY>
</HTML>
WELCOME! ようこそ。ブルーのページへ!
関連項目 3.文字に色を付ける 41.全体の文字色&背景色を変える
Green』(緑色)の部分を変えると他の色にすることもできます。  例えば ●Red ●Blue ●Yellow ●Gray ●Aqua ●Fuchsia などの色があります。またはカラーコード一覧のたくさんの色を使うこともできます。(⇒80.カラーコード一覧
40 背景の色を変える BGCOLOR="Green"

●使用例  【 こうなる 】
<HTML>
<HEAD>
<TITLE>グリーンのページ</TITLE>
</HEAD>
<BODY BGCOLOR="Green">
<FONT SIZE="6">WELCOME!</FONT>
ようこそ。グリーンのページへ!
</BODY>
</HTML>
WELCOME! ようこそ。グリーンのページへ!
関連項目 41.全体の文字色&背景色を変える 42.ページ全体を画像の背景にする
全体の文字色背景色を同時に変えてみよう!
Blue』(青色)の部分には好きな文字色を、『Green』(緑色)の部分には好きな背景色に書き換えてください。色の名前の例として ●Red ●Green ●Blue ●Yellow ●Gray ●Aqua ●Fuchsia などがあります。
またはカラーコード一覧のたくさんの色を使うこともできます。(⇒80.カラーコード一覧
41 全体の文字色&背景色を変える TEXT="Blue" BGCOLOR="Green"

●使用例 【 こうなる 】
<HTML>
<HEAD>
<TITLE>ブルーとグリーン</TITLE>
</HEAD>
<BODY TEXT="Blue" BGCOLOR="Green">
<FONT SIZE="6">WELCOME!</FONT>
ようこそ。ブルーとグリーンへ!
</BODY>
</HTML>
WELCOME! ようこそ。ブルーとグリーンへ!
関連項目 39.ページ全体の文字色を変える 40.背景の色を変える
ichigo.gif』の部分を使いたい画像のアドレスに書きかえてね。※この背景に使っているのは、たった1個のいちごの画像です。
42 ページ全体を画像の背景にする BACKGROUND="ichigo.gif"

●使用例 【 こうなる 】
<HTML>
<HEAD>
<TITLE>いちごのページ</TITLE>
</HEAD>
<BODY BACKGROUND="ichigo.gif">
<FONT SIZE="6">WELCOME!</FONT>
ようこそ。いちごのページへ!
</BODY>
</HTML>
WELCOME! ようこそ。いちごのページへ!
関連項目 29.画像を表示させる 56.表の背景を画像にする
ホームページを見ていると、文字化けが起こり読めなくなって、エンコードを違うのにしたら読めるようになったという事があるかもしれません。
このタグは、<HEAD>から</HEAD>の間に入れます。この例は、文字コードが「シフト JIS」(WindowsやMacintoshなどでよく使われます)の場合です。違う場合は、『Shift_JIS』の部分を、「日本語EUC」の場合は『EUC-JP』に、「Unicode(UTF-8)」の場合は『UTF-8』(いずれも半角文字)に変えてください。
43文字が化けるのを防ぐ
 <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS">

●タグ入力例
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS">
<TITLE>私のホームページ</TITLE>
</HEAD>
<BODY>
ようこそ。My ホームページへ!<BR>
私の好きな食べ物は○○です。
</BODY>
</HTML>


44・45  ページに音楽 もくじにもどる

・ホームページのBGMには、MIDIをおすすめします。WAVE、MP3なども使うことができますが、データ量が非常に大きいため、接続環境によってはページを表示するのに時間が掛かることがあります。
(接続速度の目安:100 KB のデータを受けるのに……ダイヤルアップ(56K)の場合約 25 秒  ISDN回線の場合約 15 秒)
・ホームページが表示するたびに自動的に音楽が流れるのが嫌な人がいるから、来た人に表示窓から操作してもらって聞かせてあげる方がよいかもしれません。
・音楽をホームページに載せるときにはその音楽の著作権という物にも注意してください。

spring』の部分は、音楽ファイルの名前です。.mid』は、その音楽の種類(この場合はMIDI)です。
spring.mid』の部分を、使いたい音楽ファイルのアドレスに書き換えてください。(HTMLファイルと演奏させたい音楽ファイルが同じフォルダの中に置いてある場合)
ここで使っているMIDI ♪Spring (ぶるーぷりん作成曲)
44 ページに音楽を付ける <EMBED SRC="spring.mid" AUTOSTART="FALSE">

【 こうなる 】



ページが表示されるとともに音楽を鳴らすには次のようにしてください。
<EMBED SRC="spring.mid" AUTOSTART="TRUE">

音楽を繰り返し演奏させるには?
<EMBED SRC="spring.mid" AUTOSTART="FALSE" LOOP="TRUE">

音楽を繰り返し演奏させるには、『LOOP="TRUE"』を追加します。
<EMBED SRC="spring.mid" AUTOSTART="TRUE" LOOP="TRUE">

また、ページが表示されるとともに音楽を繰り返し演奏させるには、『AUTOSTART="FALSE"』を、『AUTOSTART="TRUE"』にします。
関連項目 29.画像を表示させる 45.表示窓の大きさを変える
spring.mid』の部分を音楽ファイルのアドレスに書きかえてね。
WIDTH="70"」の、『70』の部分には表示窓の横幅を数字で、「HEIGHT="25"」の、『25』の部分には表示窓の高さを数字で入れてください。
表示窓の大きさを変えても音楽の流れ方は同じです。いろいろ試してみてね!
45表示窓の大きさを変える
 <EMBED SRC="spring.mid" AUTOSTART="FALSE" WIDTH="70" HEIGHT="25">

【 こうなる 】

横幅:70 高さ:45 の場合


ページが表示されるとともに繰り返して音楽を鳴らす(しかも表示窓を無くす)には次のようにしてください。
<EMBED SRC="spring.mid" HIDDEN="TRUE" AUTOSTART="TRUE" LOOP="TRUE">
関連項目 44.ページに音楽を付ける


46〜49  フォーム部品 もくじにもどる

セレクトメニューを作ってみよう!赤色であらわした部分(いちごバナナマッスル牛乳)は、実際にセレクトメニューの中に表示される部分です。この部分を好きな文字に書き換えてください。
必要な項目の数だけ、(例えば <OPTION>りんご</OPTION> )などと作って、<SELECT></SELECT>の間に入れます。</OPTION>は省略することもできます。
46 セレクトメニューを作る <SELECT>
<OPTION>いちご</OPTION>
<OPTION>バナナ</OPTION>
<OPTION>マッスル牛乳</OPTION>
</SELECT>

【 こうなる 】



関連項目(いずれもスタイルシート関連) 67.セレクトメニューの文字色を変える 68.セレクトメニューの背景色を変える 69.1つの項目の文字色を変える 70.1つの項目の背景色を変える 71.セレクトメニューの文字の大きさを変える
<TEXTAREA>から</TEXTAREA> の間にある文字は、改行してもそのまま改行されます。
47 テキストエリアを作る <TEXTAREA>
いちご
バナナ
マッスル牛乳
</TEXTAREA>

【 こうなる 】



関連項目 48.テキストエリアの大きさを指定する 49.内容を改変不可にする 72.テキストエリアを画像の背景にする(スタイルシート)
COLS="40"」の、『40』の部分にはに並んだ文字数を、「ROWS="6"」の、『6』の部分には、に並んだ文字数に書き換えてください。数字は半角文字での文字数です。
48 テキストエリアの大きさを指定する <TEXTAREA COLS="40" ROWS="6">
いちご
バナナ
マッスル牛乳
</TEXTAREA>

【 こうなる 】



関連項目 47.テキストエリアを作る
テキストエリアの内容を編集できないようにするには、『READONLY』(読むオンリー)を付け加えてください。
49 内容を改変不可にする <TEXTAREA READONLY>
いちご
バナナ
マッスル牛乳
</TEXTAREA>

【 こうなる 】



関連項目 47.テキストエリアを作る


50〜62  表(TABLE)関係 もくじにもどる

分かりやすいように間をあけて書いてます。詰めてもかまいません。</TR>と</TD>は省略することもできます。
赤色であらわした部分(エネルギー450kcalたん白質 など)は、実際に表の中に表示される部分です。この部分を書き換えてください。いろいろ試してみると分かりやすいでしょう。
表の中身には、文字のほかに、画像や、表などを入れたりできます。
50 表を作る <TABLE BORDER="1">
  <TR>
      <TD>エネルギー</TD>
      <TD>450kcal</TD>
  </TR>
  <TR>
      <TD>たん白質</TD>
      <TD>20g</TD>
  </TR>
  <TR>
      <TD>炭水化物</TD>
      <TD>100g</TD>
  </TR>
</TABLE>

【 こうなる 】

エネルギー450kcal
たん白質20g
炭水化物100g

関連項目 51.表の枠の太さを変える(1) 52.表の枠の太さを変える(2) 53.表の枠と文字の余白を変える 54.表の枠に色をつける 55.表の背景に色をつける 56.表の背景を画像にする 57.表の横幅を変える 58.表の横幅を変える(%で) 59.複数の枠を一つにする(横結合) 60.複数の枠を一つにする(縦結合) 61.上側によせる
BORDER="1"の、数字(この場合は1)を変えることにより枠の太さをいろいろ変えることが出来ます。
51 表の枠の太さを変える(1) <TABLE BORDER="1">
<TR><TD>エネルギー</TD><TD>450kcal</TD></TR>
<TR><TD>たん白質</TD><TD>20g</TD></TR>
<TR><TD>炭水化物</TD><TD>100g</TD></TR>
</TABLE>

【 こうなる 】
数字=0 (枠が非表示になります。)
エネルギー450kcal
たん白質20g
炭水化物100g
数字=1
エネルギー450kcal
たん白質20g
炭水化物100g
数字=5
エネルギー450kcal
たん白質20g
炭水化物100g
数字=20
エネルギー450kcal
たん白質20g
炭水化物100g
関連項目 50.表を作る 52.表の枠の太さを変える(2)
もう一つの枠の太さ(この場合は線と線の間)を変える方法です。
CELLSPACING="5"」の、数字(この場合は5)の部分を変えることにより枠の太さを変えることが出来ます。
52 表の枠の太さを変える(2) <TABLE BORDER="1" CELLSPACING="5">
<TR><TD>エネルギー</TD><TD>450kcal</TD></TR>
<TR><TD>たん白質</TD><TD>20g</TD></TR>
<TR><TD>炭水化物</TD><TD>100g</TD></TR>
</TABLE>

【 こうなる 】
数字=0
エネルギー450kcal
たん白質20g
炭水化物100g
数字=2
エネルギー450kcal
たん白質20g
炭水化物100g
数字=5
エネルギー450kcal
たん白質20g
炭水化物100g
数字=20
エネルギー450kcal
たん白質20g
炭水化物100g
関連項目 50.表を作る 51.表の枠の太さを変える(1) 53.表の枠と文字の余白を変える
CELLPADDING="5"の、数字(この場合は5)の部分を変えることにより枠と文字の間の余白の大きさを変えることが出来ます。
53 表の枠と文字の余白を変える <TABLE BORDER="1" CELLPADDING="5">
<TR><TD>エネルギー</TD><TD>450kcal</TD></TR>
<TR><TD>たん白質</TD><TD>20g</TD></TR>
<TR><TD>炭水化物</TD><TD>100g</TD></TR>
</TABLE>

【 こうなる 】
数字=0
(表の中の文字と枠がぴったりくっつきます。)
エネルギー450kcal
たん白質20g
炭水化物100g
数字=5
エネルギー450kcal
たん白質20g
炭水化物100g
数字=10
エネルギー450kcal
たん白質20g
炭水化物100g
数字=20
エネルギー450kcal
たん白質20g
炭水化物100g
関連項目 50.表を作る 51.表の枠の太さを変える(1) 52.表の枠の太さを変える(2)
BORDERCOLOR="Blue"の『Blue』の部分を変えると、他の色にも出来ます。例えば ●Red ●Green ●Blue ●Yellow ●Gray ●Aqua ●Fuchsia などの色があります。またはカラーコード一覧のたくさんの色を使うこともできます。(⇒80.カラーコード一覧
54 表の枠に色をつける <TABLE BORDER="1" BORDERCOLOR="Blue">
<TR><TD>エネルギー</TD><TD>450kcal</TD></TR>
<TR><TD>たん白質</TD><TD>20g</TD></TR>
<TR><TD>炭水化物</TD><TD>100g</TD></TR>
</TABLE>

【 こうなる 】

エネルギー450kcal
たん白質20g
炭水化物100g


CELLSPACING="0" 52.表の枠の太さを変える(2))とあわせて
エネルギー450kcal
たん白質20g
炭水化物100g

CELLSPACING="0" とあわせたタグの見本
<TABLE BORDER="1" BORDERCOLOR="Blue" CELLSPACING="0">
<TR><TD>エネルギー</TD><TD>450kcal</TD></TR>
<TR><TD>たん白質</TD><TD>20g</TD></TR>
<TR><TD>炭水化物</TD><TD>100g</TD></TR>
</TABLE>
関連項目 50.表を作る 55.表の背景に色をつける
BGCOLOR="Lime"の『Lime』の部分を変えると、他の色にも出来ます。例えば ●Red ●Green ●Blue ●Yellow ●Gray ●Aqua ●Fuchsia などの色があります。またはカラーコード一覧のたくさんの色を使うこともできます。(⇒80.カラーコード一覧
55 表の背景に色をつける <TABLE BORDER="1">
<TR><TD BGCOLOR="Lime">カルシウム</TD>
<TD>200mg</TD></TR>
</TABLE>

【 こうなる 】

カルシウム 200mg

もっと色を付けてみよう!(応用編)
カルシウム200mg
マグネシウム100mg
ナトリウム3g

もっと色を付けてみよう!(応用編)のタグの見本
<TABLE BORDER="1">
<TR><TD BGCOLOR="Lime">カルシウム</TD><TD BGCOLOR="Aqua">200mg</TD></TR>
<TR><TD BGCOLOR="Yellow">マグネシウム</TD><TD BGCOLOR="Red">100mg</TD></TR>
<TR><TD BGCOLOR="Blue">ナトリウム</TD><TD BGCOLOR="Lime">3g</TD></TR>
</TABLE>
関連項目 50.表を作る 54.表の枠に色をつける 56.表の背景を画像にする
ichigo.gifの部分を表示させたい画像のアドレスに書き換えてください。
内容の部分にその表の中に入れる好きな内容に書き換えてね。
56 表の背景を画像にする <TABLE BORDER="1">
<TR><TD BACKGROUND="ichigo.gif">
内容
</TD></TR>
</TABLE>

【 こうなる 】

♪いちご・いちご・いちごぉ〜
いちご〜をたべると〜
ビタミンCが多く取れるらしいのよ〜!
いちご・いちご・いちごぉ〜
いちごをたべると〜……(続く)

背景に使っている画像はこの1つだけのいちごです。


関連項目 29.画像を表示させる 42.ページ全体を画像の背景にする 50.表を作る 55.表の背景に色をつける
WIDTH="400"の『400』の部分を、その表全体の横幅の長さに書き換えてね。内容の部分には、その表の中に入れる内容に書き換えてください。
57 表の横幅を変える <TABLE BORDER="1" WIDTH="400">
<TR><TD>
内容
</TD></TR>
</TABLE>

【 こうなる 】

WIDTH="600"
表の横幅を数字で決めると、ウインドウのサイズによっては表がウインドウの中に入りきれなくなってはみ出すことがあるので注意してください。どうしてもはみ出したくない場合は「%」で書いてください。

WIDTH="400"
表の横幅を数字で決めると、ウインドウのサイズによっては表がウインドウの中に入りきれなくなってはみ出すことがあるので注意してください。どうしてもはみ出したくない場合は「%」で書いてください。

WIDTH="200"
表の横幅を数字で決めると、ウインドウのサイズによっては表がウインドウからの中に入りきれなくなってはみ出すことがあるので注意してください。どうしてもはみ出したくない場合は「%」で書いてください。
関連項目 50.表を作る 58.表の横幅を変える(%で)
WIDTH="100%"の『100%』の部分を、その表全体の横幅の長さを「%」(半角文字のパーセント)で書き換えてね。内容の部分には、その表の中に入れる内容に書き換えてください。
58 表の横幅を変える(%で) <TABLE BORDER="1" WIDTH="100%">
<TR><TD>
内容
</TD></TR>
</TABLE>

【 こうなる 】

WIDTH="100%"
表の横幅をパーセント(%)で決めると、ウインドウのサイズによって表がウインドウの外に、はみ出しませんが、ウインドウのサイズによって表の形が変わることがありますので注意してください。でも、うまく使い分ければ便利です。

WIDTH="60%"
表の横幅をパーセント(%)で決めると、ウインドウのサイズによって表がウインドウの外に、はみ出しませんが、ウインドウのサイズによって表の形が変わることがありますので注意してください。でも、うまく使い分ければ便利です。

WIDTH="30%"
表の横幅をパーセント(%)で決めると、ウインドウのサイズによって表がウインドウの外に、はみ出しませんが、ウインドウのサイズによって表の形が変わることがありますので注意してください。でも、うまく使い分ければ便利です。
関連項目 50.表を作る 57.表の横幅を変える
COLSPAN="3"数字3』の部分は、に並んでいる3つの枠を一つにまとめてると思ってください。
59 複数の枠を一つにする(横結合) <TABLE BORDER="1">
<TR><TD COLSPAN="3">お買いものリスト</TD></TR>
<TR><TD>いちご</TD>
<TD>バナナ</TD>
<TD>マッスル牛乳</TD></TR>
</TABLE>

【 こうなる 】

お買いものリスト
いちご バナナ マッスル牛乳


● 「COLSPAN="3"」 が無いと、こんな表になってしまいます……
お買いものリスト
いちご バナナ マッスル牛乳
関連項目 50.表を作る 60.複数の枠を一つにする(縦結合)
ROWSPAN="3"数字3』は、に並んでいる3つの枠を一つにまとめてると思ってください。
60複数の枠を一つにする(縦結合)
 <TABLE BORDER="1">
<TR><TD ROWSPAN="3">買うもの</TD><TD>いちご</TD></TR>
<TR><TD>バナナ</TD></TR>
<TR><TD>マッスル牛乳</TD></TR>
</TABLE>

【 こうなる 】

買うものいちご
バナナ
マッスル牛乳


● 「ROWSPAN="3"」 が無いと、こんな感じの表になってしまいます……
買うものいちご
バナナ
マッスル牛乳
関連項目 50.表を作る 59.複数の枠を一つにする(横結合)
表の中で上下に間が空いてしまったとき、上側や下側に表示させたいなぁ……。
緑色であらわした所『<IMG SRC="ichigo.gif">』は、画像を表示させる(⇒29.画像を表示させる)タグです。
61 上側によせる <TABLE BORDER="1">
<TR>
<TD><IMG SRC="ichigo.gif"></TD>
<TD VALIGN="TOP">いちごでーす。</TD>
</TR>
</TABLE>

【 こうなる 】31.画像の大きさの指定(拡大・縮小)で、いちごの画像を拡大して使用しています。)

いちごでーす。


● 「VALIGN="TOP"」 が無い場合は、真ん中に表示されます。
いちごでーす。

下側によせるようにするには?
<TABLE BORDER="1">
<TR>
<TD><IMG SRC="ichigo.gif"></TD>
<TD VALIGN="BOTTOM">いちごでーす。</TD>
</TR>
</TABLE>


下側によせるには、「VALIGN="TOP"」の、『TOP』(上)の部分を、『BOTTOM』(下)に書き換えます。

【 こうなる 】

いちごでーす。
関連項目 50.表を作る
表(TABLE)を使って同じ行で左右に配置をしてみよう!枠を非表示にするのがポイントだよ。
赤色であらわした所『<DIV ALIGN="RIGHT">右寄せ</DIV>』は、右寄せ(⇒21.右寄せ)にするタグです。
62 左右に配置する <TABLE BORDER="0" WIDTH="100%">
<TR>
<TD>左寄せ</TD>
<TD><DIV ALIGN="RIGHT">右寄せ</DIV></TD>
</TR>
</TABLE>

【 こうなる 】

左寄せ
右寄せ

このようにしてもできます。
<TABLE BORDER="0" WIDTH="100%">
<TR>
<TD>左寄せ</TD>
<TD ALIGN="RIGHT">右寄せ</TD>
</TR>
</TABLE>


このようにしても、同じように左右に配置することが出来ます。
関連項目 21.右寄せ 50.表を作る


63〜72  スタイルシート(1) もくじにもどる

※これから紹介するのは、スタイルシートというもので、タグにはできない事も可能にします。ただし、タグとは少し使い方が異なります。

※Internet Explorer 5.5以上のブラウザー(ホームページを見るソフト)で見たときに色が変わります。
#99CC33』(黄緑色っぽい色)の部分を変えると他の色にすることもできます。(⇒80.カラーコード一覧)(⇒79.色を英語で
もっと細かく指定したいっ!という方は…(⇒73.スクロールバーの色を細かく変える
63 スクロールバーの色を変える STYLE="scrollbar-base-color:#99CC33"

●タグ入力例
<HTML>
<HEAD>
<TITLE>私のホームページ</TITLE>
</HEAD>
<BODY STYLE="scrollbar-base-color:#99CC33">

【ここが文字やタグを入れる場所になります】

</BODY>
</HTML>

【こういう感じになります】

■他の色でやってみると・・・?

●「文字のサイズ」を変えても、同じ大きさで表示させるには?
数字(この場合は50)が大きいほど文字も大きくなるよ。※数字が小さすぎると文字が見えなくなるので、値は10以上をおすすめします。
(数字の単位はピクセル(画面上の点の数)です。この場合、数字の部分を 50px と入力してもOKです。)
64 文字の大きさを固定する <DIV STYLE="font-size:50">文字</DIV>

【 こうなる 】
数字=10
文字
数字=20
文字
数字=50
文字
数字=150
文字
関連項目 2.文字の大きさを変える
文字の部分だけ背景色を付けます。Green』(緑色)の部分を変えると他の色にもできるよ!  例えば ●Red ●Blue ●Yellow ●Gray ●Aqua ●Fuchsia などの色があります。またはカラーコード一覧のたくさんの色を使うこともできます。(⇒80.カラーコード一覧
中まで緑』の部分を色をつけたい文字に書き換えてください。
65 文字の中に色を付ける <SPAN STYLE="background-color:Green">中まで緑</SPAN>

【 こうなる 】

中まで緑

関連項目 3.文字に色を付ける
cursor:helpの、『help』の部分は好みに応じて変えてください。≪アドレス≫の部分は、リンクしたいホームページのアドレスに書き換えてください。
66 リンクした時のカーソルを変える <A HREF="≪アドレス≫" STYLE="cursor:help">リンク</A>

【 こうなる 】(リンクされてる文字にカーソルを置いてみてください。意味の無いリンクなので、クリックしてもどこにも行きません。)
cursor:help cursor:move cursor:crosshair cursor:text
リンク リンク リンク リンク

ページ全体のカーソルを変えるには?
<HTML>
<HEAD>
<TITLE>クロスホームページ</TITLE>
</HEAD>
<BODY STYLE="cursor:crosshair">

【ここが文字やタグを入れる場所になります】

</BODY>
</HTML>
ページ全体のカーソルを変えるには、「<BODY>」タグに『STYLE="cursor:crosshair"』を付け加えます。
cursor:crosshair」の、『crosshair』の部分は好みに応じて変えてください。
関連項目 34.リンクを作る

セレクトメニューの中の文字色を変えてみよう!
Red』(赤色)の部分を変えると、他の色にも出来ます。例えば ●Green ●Blue ●Yellow ●Gray ●Aqua ●Fuchsia などの色があります。またはカラーコード一覧のたくさんの色を使うこともできます。(⇒80.カラーコード一覧
67 セレクトメニューの文字色を変える <SELECT STYLE="color:Red">
<OPTION>いちご</OPTION>
<OPTION>バナナ</OPTION>
<OPTION>マッスル牛乳</OPTION>
</SELECT>

【 こうなる 】



関連項目 46.セレクトメニューを作る 68.セレクトメニューの背景色を変える 69.1つの項目の文字色を変える
セレクトメニューのすべての項目の背景の色を変えてみよう!
Green』(緑色)の部分を変えると、他の色にも出来ます。例えば ●Red ●Blue ●Yellow ●Gray ●Aqua ●Fuchsia などの色があります。またはカラーコード一覧のたくさんの色を使うこともできます。(⇒80.カラーコード一覧
68 セレクトメニューの背景色を変える <SELECT STYLE="background-color:Green">
<OPTION>いちご</OPTION>
<OPTION>バナナ</OPTION>
<OPTION>マッスル牛乳</OPTION>
</SELECT>

【 こうなる 】



背景の色と文字の色を両方変えるには?
<SELECT STYLE="color:Red;background-color:Green">
<OPTION>いちご</OPTION>
<OPTION>バナナ</OPTION>
<OPTION>マッスル牛乳</OPTION>
</SELECT>


セレクトメニューのすべての項目の背景の色と文字色を両方変えるには、上記のようにします。
STYLE= は「これはスタイルシートです」ということで、どうするのかを、チョンチョン " " (ダブルクォーテーション)の中に入れます。そのチョンチョンの中身 color:Red;background-color:Green の部分には、2つの意味があって、color:Red の部分には、文字の色を赤にします、という意味があって、もう一つ background-color:Green は、背景色を緑色にします、という意味があります。その2つを、「;(セミコロン)」で区切ります(「:(コロン)」ではありません)。
文字色の Red や、背景の色の Green は他の色に書き換える事で、好きな色にもできます!

【 こうなる 】



関連項目 46.セレクトメニューを作る 67.セレクトメニューの文字色を変える 70.1つの項目の背景色を変える
「バナナ」の項目にだけ文字の色を変えています。
Red』(赤色)の部分を変えると、他の色にも出来ます。例えば ●Green ●Blue ●Yellow ●Gray ●Aqua ●Fuchsia などの色があります。またはカラーコード一覧のたくさんの色を使うこともできます。(⇒80.カラーコード一覧
69 1つの項目の文字色を変える <SELECT>
<OPTION>いちご</OPTION>
<OPTION STYLE="color:Red">バナナ</OPTION>
<OPTION>マッスル牛乳</OPTION>
</SELECT>

【 こうなる 】



関連項目 46.セレクトメニューを作る 67.セレクトメニューの文字色を変える
「バナナ」の項目にだけ背景色を変えています。
Green』(緑色)の部分を変えると、他の色にも出来ます。例えば ●Red ●Blue ●Yellow ●Gray ●Aqua ●Fuchsia などの色があります。またはカラーコード一覧のたくさんの色を使うこともできます。(⇒80.カラーコード一覧
701つの項目の背景色を変える
 <SELECT>
<OPTION>いちご</OPTION>
<OPTION STYLE="background-color:Green">バナナ</OPTION>
<OPTION>マッスル牛乳</OPTION>
</SELECT>

【 こうなる 】



背景の色と文字の色を両方変えるには?
<SELECT>
<OPTION>いちご</OPTION>
<OPTION STYLE="color:Red;background-color:Green">バナナ</OPTION>
<OPTION>マッスル牛乳</OPTION>
</SELECT>


背景の色と文字の色を両方変えるには、付け加えたい項目の<OPTION>に、STYLE="color:Red;background-color:Green" を追加します。
STYLE= は「これはスタイルシートです」ということで、どうするのかを、チョンチョン " " (ダブルクォーテーション)の中に入れます。そのチョンチョンの中身 color:Red;background-color:Green の部分には、2つの意味があって、color:Red の部分には、文字の色を赤にします、という意味があって、もう一つ background-color:Green は、背景色を緑色にします、という意味があります。その2つを、「;(セミコロン)」で区切ります(「:(コロン)」ではありません)。
文字色の Red や、背景の色の Green は他の色に書き換える事で、好きな色にもできます!

【 こうなる 】



関連項目 46.セレクトメニューを作る 68.セレクトメニューの背景色を変える
セレクトメニューの文字の大きさは変えることが出来ます。数字(この場合は30)が大きいほど文字が大きくなるよ。
数字が小さすぎると文字が見えなくなるので値は10以上をおすすめします。
(数字の単位はピクセル(画面上の点の数)です。この場合、数字の部分を『30px』と入力してもOKです。)
71 セレクトメニューの文字の大きさを変える <SELECT STYLE="font-size:30">
<OPTION>いちご</OPTION>
<OPTION>バナナ</OPTION>
<OPTION>マッスル牛乳</OPTION>
</SELECT>

【 こうなる 】

数字=10
数字=16
数字=28
数字=42
関連項目 46.セレクトメニューを作る
テキストエリア内に背景画像を付けることが出来ます。ichigo.gif』の部分を、使いたい画像のアドレスに書き換えてください。
72 テキストエリアを画像の背景にする <TEXTAREA STYLE="background-image:url(ichigo.gif)">
いちご
バナナ
マッスル牛乳
</TEXTAREA>

【 こうなる 】(横幅を30、高さを5にしてあります。⇒48.テキストエリアの大きさを指定する



関連項目 29.画像を表示させる 42.ページ全体を画像の背景にする 47.テキストエリアを作る


73〜78  スタイルシート(2) もくじにもどる

※これらは、スタイルシートの少し高度な使い方で、 <HEAD> から </HEAD> までにスタイルシートを入れる方法です。使い方が普通のタグとは異なります。

※Internet Explorer 5.5以上のブラウザー(ホームページを見るソフト)で見たときに色が変わります。
それぞれの色の部分を色の名前(⇒79.色を英語で)や、カラーコード(⇒80.カラーコード一覧)に書き換えてください。
※もっと簡単なものがいいな…という方は(⇒63.スクロールバーの色を変える
73 スクロールバーの色を細かく変える <STYLE TYPE="text/css"><!--
BODY{scrollbar-face-color:本体の色;
scrollbar-track-color:背景の色;
scrollbar-arrow-color:三角矢の色;
scrollbar-3dlight-color:外側明るい色;
scrollbar-darkshadow-color:外側暗い色;
scrollbar-highlight-color:内側明るい色;
scrollbar-shadow-color:内側暗い色}
--></STYLE>

●タグ入力例
<HTML>
<HEAD>
<TITLE>私のホームページ</TITLE>
<STYLE TYPE="text/css"><!--
BODY{scrollbar-face-color:#0000FF;
scrollbar-track-color:#00FFFF;
scrollbar-arrow-color:#FFFFFF;
scrollbar-3dlight-color:#000000;
scrollbar-darkshadow-color:#FF0000;
scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:#00FF00}
--></STYLE>

</HEAD>
<BODY>

(ここが文字やタグを入れる場所(本文)になります)

</BODY>
</HTML>

【こういう感じになります】 ※拡大イメージ
イメージ図

●リンクにカーソルをのせたら文字の色がかわるようにしたいなぁ・・・。どうしたらよいの?
Green』(緑色)の部分を変えると他の色にすることもできます。例えば ●Red ●Blue ●Yellow ●Gray ●Aqua ●Fuchsia などの色があります。またはカラーコード一覧のたくさんの色を使うこともできます。(⇒80.カラーコード一覧
≪アドレス≫の部分は、リンクしたいホームページのアドレスに書き換えてください。
※このタグを使うと、ページの中にあるすべての文字のリンクに適用されます。
74 リンクに触れた時の色を変える <STYLE TYPE="text/css"><!--
A:hover{color:Green}
--></STYLE>

【 使用例 】 【 こうなる 】リンクされてる文字にカーソルを置いてみてください。※リンク先は設定されていないので、クリックしても意味がありません。
<HTML>
<HEAD>
<TITLE>私のホームページ</TITLE>
<STYLE TYPE="text/css"><!--
A:hover{color:Green}
--></STYLE>

</HEAD>
<BODY>
ようこそ。My ホームページへ!<BR>
<A HREF="≪アドレス≫">リンク</A>
</BODY>
</HTML>
ようこそ。My ホームページへ!
リンク
関連項目 34.リンクを作る 36.リンク文字の色を変える 75.リンクに触れた時背景色を変える(スタイルシート) 76.リンクに触れた時背景色と文字の色を変える(スタイルシート) 78.リンクに触れた時に色と下線を付ける(スタイルシート)
Green』(緑色)の部分を変えると他の色にすることもできます。例えば ●Red ●Blue ●Yellow ●Gray ●Aqua ●Fuchsia などの色があります。またはカラーコード一覧のたくさんの色を使うこともできます。(⇒80.カラーコード一覧
≪アドレス≫の部分は、リンクしたいホームページのアドレスに書き換えてください。
※このタグを使うと、ページの中にあるすべての文字のリンク(&透けている部分がある画像)に適用されます。
75 リンクに触れた時の背景色を変える <STYLE TYPE="text/css"><!--
A:hover{background-color:Green}
--></STYLE>

【 使用例 】 【 こうなる 】リンクされてる文字にカーソルを置いてみると・・・?※リンク先は設定されていないので、クリックしても意味がありません。
<HTML>
<HEAD>
<TITLE>私のホームページ</TITLE>
<STYLE TYPE="text/css"><!--
A:hover{background-color:Green}
--></STYLE>

</HEAD>
<BODY>
ようこそ。My ホームページへ!<BR>
<A HREF="≪アドレス≫">リンク</A>
</BODY>
</HTML>
ようこそ。My ホームページへ!
リンク
関連項目 34.リンクを作る 74.リンクに触れた時の色を変える(スタイルシート) 76.リンクに触れた時背景色と文字の色を変える(スタイルシート)
カーソルがリンクに触れた時、背景色と文字の色を同時に変えてみよう!
Red』(赤色)の部分には好きな文字の色を、『Blue』(青色)の部分には好きな背景の色に書き換えることができます。色の名前は他に ●Green ●Yellow ●Gray ●Aqua ●Fuchsia などがあります。(⇒79.色を英語で) またはカラーコード一覧のたくさんの色を使うこともできます。(⇒80.カラーコード一覧) 【 使用例 】の、≪アドレス≫の部分は、リンクしたいホームページのアドレスに書き換えてください。
※これを使うと、ページの中にあるすべての文字のリンク(&透けている部分がある画像のリンク)に適用されます。
76 リンクに触れた時背景色と文字の色を変える <STYLE TYPE="text/css"><!--
A:hover{color:Red;background-color:Blue}
--></STYLE>

【 使用例 】 【 こうなる 】リンクされてる文字にカーソルを置いてみると・・・?。※リンク先は設定されていないので、クリックしても意味がありません。
<HTML>
<HEAD>
<TITLE>私のホームページ</TITLE>
<STYLE TYPE="text/css"><!--
A:hover{color:Red;background-color:Blue}
--></STYLE>

</HEAD>
<BODY>
ようこそ。My ホームページへ!<BR>
<A HREF="≪アドレス≫">リンク</A>
</BODY>
</HTML>
ようこそ。My ホームページへ!
リンク
76.「リンクに触れた時背景色と文字の色を変える」の詳細
<STYLE TYPE="text/css"><!--
A:hover{color:Red;background-color:Blue}
--></STYLE>


1行目<STYLE TYPE="text/css"><!--)は、スタイルシートの始まりを表しています。
2行目A:hover{color:Red;background-color:Blue})の、A:hover の部分は、カーソルがリンクに触れた時のリンクをどうしますか?という意味で、どうするのかを、かっこ{ }の中に入れます。そのかっこの中身 color:Red;background-color:Blue の部分には2つの意味があって、color:Red の部分は、文字色を赤に変えるという意味で、もう一つ background-color:Blue は、青い背景の色を付けます、という意味があります。その2つを、「;(セミコロン)」で区切ります(「:(コロン)」ではありません)。(これで、リンクに触れた時にリンクの文字の色を赤にする&背景の色を青にするという意味になります。)
最終行--></STYLE>)は、スタイルシートが終わりという事を表しています。
関連項目 34.リンクを作る 74.リンクに触れた時の色を変える(スタイルシート) 75.リンクに触れた時背景色を変える(スタイルシート)
【 使用例 】の、≪アドレス≫の部分は、リンクしたいホームページのアドレスに書き換えて下さい。【 こうなる 】のリンク先は、設定していないので、クリックしても意味がありません。
これを使うと、ページの中にあるすべての文字のリンクに適用されます。
77 リンクに触れた時だけ下線を付ける <STYLE TYPE="text/css"><!--
A:link{text-decoration:none}
A:visited{text-decoration:none}
A:hover{text-decoration:underline}
--></STYLE>

【 使用例 】 【 こうなる 】リンクされてる文字にカーソルを置いてみると・・・?
<HTML>
<HEAD>
<TITLE>私のホームページ</TITLE>
<STYLE TYPE="text/css"><!--
A:link{text-decoration:none}
A:visited{text-decoration:none}
A:hover{text-decoration:underline}
--></STYLE>

</HEAD>
<BODY>
ようこそ。My ホームページへ!<BR>
<A HREF="≪アドレス≫">リンク</A>
</BODY>
</HTML>
ようこそ。My ホームページへ!
リンク
77.「リンクに触れた時だけ下線を付ける」の詳細
<STYLE TYPE="text/css"><!--
A:link{text-decoration:none}
A:visited{text-decoration:none}
A:hover{text-decoration:underline}
--></STYLE>


1行目<STYLE TYPE="text/css"><!--)は、スタイルシートの始まりを表しています。
2行目A:link{text-decoration:none})の、A:link の部分は、未訪問のリンクをどうしますか?という意味で、どうするのかを、かっこ{ }の中に入れます。そのかっこの中身 text-decoration:none の部分は、下線は付けませんということです。(これで、未訪問のリンクは下線を付けませんという意味になります。)
3行目A:visited{text-decoration:none})の、A:visited の部分は、訪問済みのリンクをどうしますか?という意味で、どうするのかを、かっこ{ }の中に入れます。そのかっこの中身 text-decoration:none の部分は、下線は付けませんということです。(これで、訪問済みのリンクは下線を付けませんという意味になります。)
4行目A:hover{text-decoration:underline})の、A:hover の部分は、カーソルがリンクに触れた時のリンクをどうしますか?という意味で、どうするのかを、かっこ{ }の中に入れます。そのかっこの中身 text-decoration:underline の部分は、下線を付けます、ということです。(これで、リンクに触れた時は下線を付けますという意味になります。)
最終行--></STYLE>)は、スタイルシートが終わりという事を表しています。

他に、text-decoration:overline とすれば、文字の上に線がつきます。
関連項目 34.リンクを作る 78.リンクに触れた時に色と下線を付ける(スタイルシート)
【 使用例 】の、≪アドレス≫の部分は、リンクしたいホームページのアドレスに書き換えてください。【 こうなる 】のリンク先は、設定していないので、クリックしても意味がありません。
Red』(赤色)の部分は、好きな色に書き換えることができます。例えば ●Green ●Blue ●Yellow ●Gray ●Aqua ●Fuchsia などの色があります。(⇒79.色を英語で) またはカラーコード一覧のたくさんの色を使うこともできます。(⇒80.カラーコード一覧
これを使うと、ページの中にあるすべての文字のリンクに適用されます。
78 リンクに触れた時に色と下線を付ける <STYLE TYPE="text/css"><!--
A:link{text-decoration:none}
A:visited{text-decoration:none}
A:hover{color:Red;text-decoration:underline}
--></STYLE>

【 使用例 】 【 こうなる 】リンクされてる文字にカーソルを置いてみると・・・?
<HTML>
<HEAD>
<TITLE>私のホームページ</TITLE>
<STYLE TYPE="text/css"><!--
A:link{text-decoration:none}
A:visited{text-decoration:none}
A:hover{color:Red;text-decoration:underline}
--></STYLE>

</HEAD>
<BODY>
ようこそ。My ホームページへ!<BR>
<A HREF="≪アドレス≫">リンク</A>
</BODY>
</HTML>
ようこそ。My ホームページへ!
リンク
78.「リンクに触れた時に色と下線を付ける」の詳細
<STYLE TYPE="text/css"><!--
A:link{text-decoration:none}
A:visited{text-decoration:none}
A:hover{color:Red;text-decoration:underline}
--></STYLE>


1行目<STYLE TYPE="text/css"><!--)は、スタイルシートの始まりを表しています。
2行目A:link{text-decoration:none})の、A:link の部分は、未訪問のリンクをどうしますか?という意味で、どうするのかを、かっこ{ }の中に入れます。そのかっこの中身 text-decoration:none の部分は、下線は付けませんということです。(これで、未訪問のリンクは下線を付けませんという意味になります。)
3行目A:visited{text-decoration:none})の、A:visited の部分は、訪問済みのリンクをどうしますか?という意味で、どうするのかを、かっこ{ }の中に入れます。そのかっこの中身 text-decoration:none の部分は、下線は付けませんということです。(これで、訪問済みのリンクは下線を付けませんという意味になります。)
4行目A:hover{color:Red;text-decoration:underline})の、A:hover の部分は、カーソルがリンクに触れた時のリンクをどうしますか?という意味で、どうするのかを、かっこ{ }の中に入れます。そのかっこの中身 color:Red;text-decoration:underline の部分には2つの意味があって、color:Red の部分は文字色を赤に変えるという意味で、もう一つ text-decoration:underline は、下線を付けます、という意味があります。その2つを、「;(セミコロン)」で区切ります(「:(コロン)」ではありません)。(これで、リンクに触れた時は文字色を赤にする&下線を付けますという意味になります。)
最終行--></STYLE>)は、スタイルシートが終わりという事を表しています。

他に、text-decoration:overline とすれば、文字の上に線がつきます。
関連項目 34.リンクを作る 36.リンク文字の色を変える 74.リンクに触れた時の色を変える(スタイルシート) 77.リンクに触れた時だけ下線を付ける(スタイルシート)


79  色を英語で もくじにもどる

BlackGraySilver
RedGreenBlue
YellowLimeAqua
FuchsiaTealOrange
BrownOlivePurple
TomatoGoldSkyBlue
IndianRedLightGreenMediumPurple
PinkLavenderWhite


80  カラーコード一覧 もくじにもどる

色を英語であらわす代わりに使えるよ。細かな指定が可能です。(⇒4096色見本)では、さらに細かい色を載せています。


■よく使う色
#000000#000080#800000#008000#800080#008080#808000#808080
#0000FF#FF0000#00FF00#8000FF#0080FF#FF0080#FF8000#00FF80
#80FF00#8080FF#FF8080#80FF80#FF00FF#00FFFF#FFFF00#FF80FF
#80FFFF#FFFF80#FFFFFF 


やわらかい感じ系(背景色向け)
#FFCCFF#FFCCCC#FFFFCC#CCFFCC#CCFFFF#CCCCFF
#FF99FF#FF9999#FFFF99#99FF99#99FFFF#9999FF
#CC99FF#FF99CC#FFCC99#CCFF99#99FFCC#99CCFF


赤色系(#FF0000が赤です。)
#110000#220000#330000#440000#550000#660000#770000#880000
#990000#AA0000#BB0000#CC0000#DD0000#EE0000#FF0000#FF1111
#FF2222#FF3333#FF4444#FF5555#FF6666#FF7777#FF8888#FF9999
#FFAAAA#FFBBBB#FFCCCC#FFDDDD#FFEEEE 


緑色系(#008000が緑です。)
#001100#002200#003300#004400#005500#006600#007700#008800
#009900#00AA00#00BB00#00CC00#00DD00#00EE00#00FF00#11FF11
#22FF22#33FF33#44FF44#55FF55#66FF66#77FF77#88FF88#99FF99
#AAFFAA#BBFFBB#CCFFCC#DDFFDD#EEFFEE 


青色系(#0000FFが青です。)
#000011#000022#000033#000044#000055#000066#000077#000088
#000099#0000AA#0000BB#0000CC#0000DD#0000EE#0000FF#1111FF
#2222FF#3333FF#4444FF#5555FF#6666FF#7777FF#8888FF#9999FF
#AAAAFF#BBBBFF#CCCCFF#DDDDFF#EEEEFF 


白黒系の色
#000000#111111#222222#333333#444444#555555#666666#777777
#888888#999999#AAAAAA#BBBBBB#CCCCCC#DDDDDD#EEEEEE#FFFFFF


いろんな色(216色)
#000000#330000#660000#990000#CC0000#FF0000
#003300#333300#663300#993300#CC3300#FF3300
#006600#336600#666600#996600#CC6600#FF6600
#009900#339900#669900#999900#CC9900#FF9900
#00CC00#33CC00#66CC00#99CC00#CCCC00#FFCC00
#00FF00#33FF00#66FF00#99FF00#CCFF00#FFFF00

#000033#330033#660033#990033#CC0033#FF0033
#003333#333333#663333#993333#CC3333#FF3333
#006633#336633#666633#996633#CC6633#FF6633
#009933#339933#669933#999933#CC9933#FF9933
#00CC33#33CC33#66CC33#99CC33#CCCC33#FFCC33
#00FF33#33FF33#66FF33#99FF33#CCFF33#FFFF33

#000066#330066#660066#990066#CC0066#FF0066
#003366#333366#663366#993366#CC3366#FF3366
#006666#336666#666666#996666#CC6666#FF6666
#009966#339966#669966#999966#CC9966#FF9966
#00CC66#33CC66#66CC66#99CC66#CCCC66#FFCC66
#00FF66#33FF66#66FF66#99FF66#CCFF66#FFFF66

#000099#330099#660099#990099#CC0099#FF0099
#003399#333399#663399#993399#CC3399#FF3399
#006699#336699#666699#996699#CC6699#FF6699
#009999#339999#669999#999999#CC9999#FF9999
#00CC99#33CC99#66CC99#99CC99#CCCC99#FFCC99
#00FF99#33FF99#66FF99#99FF99#CCFF99#FFFF99

#0000CC#3300CC#6600CC#9900CC#CC00CC#FF00CC
#0033CC#3333CC#6633CC#9933CC#CC33CC#FF33CC
#0066CC#3366CC#6666CC#9966CC#CC66CC#FF66CC
#0099CC#3399CC#6699CC#9999CC#CC99CC#FF99CC
#00CCCC#33CCCC#66CCCC#99CCCC#CCCCCC#FFCCCC
#00FFCC#33FFCC#66FFCC#99FFCC#CCFFCC#FFFFCC

#0000FF#3300FF#6600FF#9900FF#CC00FF#FF00FF
#0033FF#3333FF#6633FF#9933FF#CC33FF#FF33FF
#0066FF#3366FF#6666FF#9966FF#CC66FF#FF66FF
#0099FF#3399FF#6699FF#9999FF#CC99FF#FF99FF
#00CCFF#33CCFF#66CCFF#99CCFF#CCCCFF#FFCCFF
#00FFFF#33FFFF#66FFFF#99FFFF#CCFFFF#FFFFFF

もくじにもどる