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形式で保存します。 この場合は、 page1.html で保存してます。 ![]()
◆保存すると、「page1」と書かれたホームページのファイルが出来ます。(page1.htmlで保存した場合) これを開くと、ブラウザー(ホームページを見るソフト)が起動するので、思った通りに表示しているか確認してみよう。 ◆ちゃんと思いどおりに表示されていたら出来あがり!気に入らなけらばどんどん修正しよう! (出来たホームページをインターネットで送るとき、画像がある場合は画像も一緒に送る事を忘れないでね!) |
■ タグの名前が分かるときはこちらから(このページの下の部分にジャンプします。)
|
● タグを入力するときの注意点 ●
▼タグは必ず半角文字で入力してね!(数字も)
▼タグの中の半角スペースもちゃんと入れてね!
▼大文字、小文字はどちらでも使用可能です。
|
1 | 改行する | <BR> |
澄みきった青い空<BR>ぽつんと浮かんだ白い雲。<BR><BR>あぁ、ゆったり。 |
澄みきった青い空 ぽつんと浮かんだ白い雲。 あぁ、ゆったり。 |
2〜12 | 文字修飾 | ![]() |
2 | 文字の大きさを変える | <FONT SIZE="5">文字の大きさは5</FONT> |
タグ入力例 | こうなる |
<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 |
3 | 文字に色を付ける | <FONT COLOR="Green">緑色の文字</FONT> |
■ 赤色(Red)にするには <FONT COLOR="Red">赤色の文字</FONT> ■ 青色(Blue)にするには <FONT COLOR="Blue">青色の文字</FONT> |
4 | 大きさの変更&色を付ける | <FONT SIZE="6" COLOR="Green">大きい緑色の文字</FONT> |
5 | 文字を太くする | <B>太字</B> |
くらべてみる | |
太字 | 太字なし |
6 | 文字を斜体にする | <I>ななめの字</I> |
くらべてみる | |
ななめの字 | ななめではない字 |
7 | 文字に下線を引く | <U>下線つき</U> |
8 | 文字に取り消し線を引く | <S>この文章は取り消します</S> |
9 | 文字を大きくする | <BIG>大きい文字</BIG> |
くらべてみる | |
大きい文字 | 何もしていない文字 |
10 | 文字を小さくする | <SMALL>この文字小さい</SMALL> |
くらべてみる | |
この文字小さい | 何もしていない文字 |
11 | 文字のフォントを変える | <FONT FACE="MS 明朝">これは明朝体です</FONT> |
12 | 文字の幅を一定にする | <TT>等幅フォント</TT> |
くらべてみる | |
等幅フォント | ABCDEFGHIJKLMNOPQRSTUVWXYZ.,:@?!& |
標準フォント | ABCDEFGHIJKLMNOPQRSTUVWXYZ.,:@?!& |
文字の大きさを変えたくない場合は? |
<TT><FONT SIZE="3">小さくない等幅フォント</FONT></TT> ※等幅フォントにすると、ブラウザー(ホームページを見るソフト)によっては、文字が小さくなる事があります。小さくなった文字の大きさを変えたい場合は、<TT>タグの内側に<FONT>タグ(⇒2.文字の大きさを変える)を入れるなどをして、大きさを変える事が出来ます。 |
13〜17 | 水平線 | ![]() |
13 | 水平線を引く | <HR> |
14 | 水平線の色を変える | <HR COLOR="Green"> |
青 | <HR COLOR="Blue"> | |
赤 | <HR COLOR="Red"> | |
紫 | <HR COLOR="Purple"> |
15 | 水平線の太さを変える | <HR SIZE="10"> |
太さ:1 | <HR SIZE="1"> | |
太さ:6 | <HR SIZE="6"> | |
太さ:20 | <HR SIZE="20"> |
16 | 水平線の長さを変える | <HR WIDTH="50%"> |
長さ:10% | <HR WIDTH="10%"> | |
長さ:40% | <HR WIDTH="40%"> | |
長さ:90% | <HR WIDTH="90%"> |
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 | 特殊な記号を書く | ♥ |
記号の種類 | こんな表示 | 入力例 |
ハート | ♥ | ♥ |
クラブ | ♣ | ♣ |
スペード | ♠ | ♠ |
コピーライト | © | © |
温泉 | ♨ | ♨ |
おんぷ | ♫ | ♫ |
ちょっと応用編のタグの見本 |
<FONT COLOR="Red">♥</FONT> |
19 | コメントを書く | <!--隠しコメント--> |
20・21 | 配置関係 | ![]() |
20 | 中央に表示 | <CENTER>中央に表示</CENTER> |
21 | 右寄せ | <DIV ALIGN="RIGHT">右寄せ</DIV> |
もう一つの中央に表示する方法 |
<DIV ALIGN="CENTER">中央に表示</DIV>
このようにしても、20.中央に表示と同じ効果になります。右寄せのタグに似ていますが、違う所は『RIGHT』(右)の部分が『CENTER』(中央)になっている所です。 |
22〜28 | 流れる文字 | ![]() |
22 | 文字を流す | <MARQUEE>流れる</MARQUEE> |
23 | 反対に流れる字 | <MARQUEE DIRECTION="RIGHT">反対に流れる</MARQUEE> |
24 | 文字が往復する | <MARQUEE BEHAVIOR="ALTERNATE">往復する</MARQUEE> |
25 | 流れるとこに色つける | <MARQUEE BGCOLOR="Green">色つけ</MARQUEE> |
26 | 流れる速さを変える | <MARQUEE SCROLLDELAY="200">速さ変わる</MARQUEE> |
27 | 流れをなめらかに | <MARQUEE SCROLLAMOUNT="1">流れなめらか</MARQUEE> |
28 | 流れる文字の応用 |
電光掲示板風のタグの見本 |
<MARQUEE BGCOLOR="Black"><FONT SIZE="2" COLOR="Lime">[お知らせ!](△月☆日)今日○○がありました。</FONT></MARQUEE> |
29〜33 | 画像関係 | ![]() |
29 | 画像を表示させる |
<IMG SRC="http://www.○△□.ne.jp/ichigo.gif"> |
30 | 画像の説明 | <IMG SRC="画像のアドレス" ALT="これはいちごだよ"> |
31 | 画像の大きさの指定(拡大・縮小) | <IMG SRC="画像のアドレス" WIDTH="40" HEIGHT="40"> |
横幅:40 高さ:40 (元の大きさ) |
横幅:80 高さ:80 (2倍に拡大) |
横幅:120 高さ:40 (横幅だけを3倍に拡大) |
横幅:40 高さ:160 (高さだけを4倍に拡大) |
![]() |
![]() |
![]() |
![]() |
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です。) |
33 | 画像の横に文章 | <IMG SRC="画像のアドレス" ALIGN="LEFT"> 画像の横に書く文章 <BR CLEAR="LEFT"> |
画像の横に文字が来る例
|
画像の横に文字が来ない例
|
右側に画像を置きたい場合は? |
<IMG SRC="画像のアドレス" ALIGN="RIGHT"> 画像の横に書く文章 <BR CLEAR="RIGHT"> ※右側に画像を置きたい場合は、『ALIGN="LEFT"』(左)の部分を『ALIGN="RIGHT"』(右)にします。 また、『<BR CLEAR="LEFT">』も『<BR CLEAR="RIGHT">』にします。 |
![]() |
34〜38 | リンク関係 | ![]() |
34 | リンクを作る | <A HREF="http://www.○△□.ne.jp/bana21/">リンク</A> |
35 | メールアドレスへのリンクを作る | <A HREF="mailto:メールアドレス">メールはこちら。</A> |
36 | リンク文字の色を変える | LINK="リンクの文字色" ALINK="訪問中の文字色" VLINK="訪問済みの文字色" |
<HTML> <HEAD> <TITLE>私のホームページ</TITLE> </HEAD> <BODY LINK="Red" ALINK="Green" VLINK="Orange"> ようこそ。My ホームページへ!<BR> <A HREF="アドレス">リンク</A> </BODY> </HTML> |
37 | リンクに説明をつける |
<A HREF="http://www.○△□.ne.jp/bana21/" TITLE="トップページへ">リンク</A> |
38 | リンク先を新しいウィンドウで表示する |
<A HREF="http://www.○△□.ne.jp/bana21/" TARGET="_blank">リンク</A> |
39〜43 | ページ全体の設定 | ![]() |
39 | ページ全体の文字色を変える | TEXT="Blue" |
●使用例 | 【 こうなる 】 | |
<HTML> <HEAD> <TITLE>ブルーのページ</TITLE> </HEAD> <BODY TEXT="Blue"> <FONT SIZE="6">WELCOME!</FONT> ようこそ。ブルーのページへ! </BODY> </HTML> |
|
40 | 背景の色を変える | BGCOLOR="Green" |
●使用例 | 【 こうなる 】 | |
<HTML> <HEAD> <TITLE>グリーンのページ</TITLE> </HEAD> <BODY BGCOLOR="Green"> <FONT SIZE="6">WELCOME!</FONT> ようこそ。グリーンのページへ! </BODY> </HTML> |
|
41 | 全体の文字色&背景色を変える | TEXT="Blue" BGCOLOR="Green" |
●使用例 | 【 こうなる 】 | |
<HTML> <HEAD> <TITLE>ブルーとグリーン</TITLE> </HEAD> <BODY TEXT="Blue" BGCOLOR="Green"> <FONT SIZE="6">WELCOME!</FONT> ようこそ。ブルーとグリーンへ! </BODY> </HTML> |
|
42 | ページ全体を画像の背景にする | BACKGROUND="ichigo.gif" |
●使用例 | 【 こうなる 】 | |
<HTML> <HEAD> <TITLE>いちごのページ</TITLE> </HEAD> <BODY BACKGROUND="ichigo.gif"> <FONT SIZE="6">WELCOME!</FONT> ようこそ。いちごのページへ! </BODY> </HTML> |
|
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 秒) ・ホームページが表示するたびに自動的に音楽が流れるのが嫌な人がいるから、来た人に表示窓から操作してもらって聞かせてあげる方がよいかもしれません。 ・音楽をホームページに載せるときにはその音楽の著作権という物にも注意してください。 |
44 | ページに音楽を付ける | <EMBED SRC="spring.mid" AUTOSTART="FALSE"> |