「超基本タグ説明書」
「HTMLタグ」超基本書式一覧抜粋
赤色部分を変える事により、様々に変化します。
| 内容 |
ダク書式 |
結果 |
| 通常文字 |
普通にご記入ください。 |
テスト |
| 字の大きさを変える |
<FONT SIZE=6>テスト</FONT> |
テスト |
| 字に色をつける |
<FONT COLOR="#FF0000">テスト</FONT> |
テスト |
| 文字を強調させる |
<B>テスト</B> |
テスト |
| 字を傾きさせる |
<I>テスト</I> |
テスト |
| アンダーラインを引く |
<U>テスト</U> |
テスト |
| 色と大きさを変える複合技例 |
<FONT SIZE=6 COLOR="#FF0000">テスト</FONT> |
テスト |
| 画像を表示させる |
<IMG SRC="http://www.kikuna.com/art/admin.gif"> |
 |
| リンク |
<A HREF="http://www.kikuna.com/">菊名どっとコム</A> |
菊名どっとコム |
| リンクと画像表示の複合技例 |
<A HREF="http://www.kikuna.com/"> <IMG SRC="http://www.kikuna.com/art/admin.gif"></A> |
|
| メールを記載する。 |
<A HREF="mailto:info@kikuna.com">菊名どっとコム事務局</A> |
菊名どっとコム事務局 |
「HTMLタグ」エディター一部抜粋
フリーソフト「初心者から上級者まで楽しく使えるタグ挿入型HTMLエディタ PIGYEDIT」
http://www.din.or.jp/~creator/program/pigyedit/index.html
作者様のホームページ http://www.din.or.jp/~creator/
フリーソフト「ＨＴＭＬエディター SuperTag 32 Pro 」
http://www.htmlperfect.com/download.phtml
作者様のホームページ http://www.htmlperfect.com/
「HTMLタグ」超基本説明講座
使うタグはこれだ！
<FONT SIZE=大きさ></FONT>
このSIZE=の後に数字を指定します。１〜７までの数字を指定して下さい。
具体的にはこのように指定します。
<FONT SIZE=1>大きさを変更する文字</FONT>
では、このタグに挟まれていない場合、つまり大きさを指定していない文字の大きさはどうなるのでしょうか？
答えは大きさ３で表示されます。これはページ全体にわたって文字を大きさ３で表示しなさいと決められているからです。
大きさのサンプルです。編集したい文字を<FONT SIZE=></FONT>で挟んでみましょう。
<FONT SIZE=1>大きさ１</FONT>・・・大きさ１
<FONT SIZE=2>大きさ２</FONT>・・・大きさ２
<FONT SIZE=3>大きさ３</FONT>・・・大きさ３
<FONT SIZE=4>大きさ４</FONT>・・・大きさ４
<FONT SIZE=5>大きさ５</FONT>・・・大きさ５
<FONT SIZE=6>大きさ６</FONT>・・・大きさ６
<FONT SIZE=7>大きさ７</FONT>・・・大きさ７
使うタグはこれだ！
<FONT COLOR="#ＲＧＢ色"></FONT>
<FONT COLOR="Name色"></FONT>
ＲＢＧ色にはCOLOR="#FFFFFF"と指定します。このFFFFFFの左側から２つ、真ん中２つ、右２つがそれぞれ赤、緑、青に対応しています。#FFFFFFという感じです。このＦＦを変化させる事で違う色が表現できるんです。
＃を付けるのをお忘れ無く。
Name色にはCOLOR="BLUE"やCOLOR="RED"と指定します。直接色の名前を指定してあげるのです。
具体的にはこのように指定します。
<FONT COLOR="#00ff00">色を変更する文字</FONT>
このタグに挟まれていない場合の文字の色はどうなのでしょうか？
答えは文字が黒で表示されます。
色のサンプルです。変更したい文字を<FONT COLOR="#00FF00"></FONT>で挟んでみましょう。
<FONT COLOR="#FF0000"></FONT>・・・『 赤』・・・<FONT COLOR="RED"></FONT>
<FONT COLOR="#0000FF"></FONT>・・・『 青』・・・<FONT COLOR="BLUE"></FONT>
<FONT COLOR="#00FF00"></FONT>・・・『 緑』・・・<FONT COLOR="LIME"></FONT>
<FONT COLOR="#FFFF00"></FONT>・・・『黄色』・・・<FONT COLOR="YELLOW"></FONT>
<FONT COLOR="#FF00FF"></FONT>・・・『 紫』・・・<FONT COLOR="MAGENTA"></FONT>
<FONT COLOR="#00FFFF"></FONT>・・・『水色』・・・<FONT COLOR="AQUA"></FONT>
<FONT COLOR="#FFFFFF"></FONT>・・・『 白』・・・<FONT COLOR="WHITE"></FONT>
<FONT COLOR="#000000"></FONT> ・・・『 黒』・・・<FONT COLOR="BALCK"></FONT>
これが基本色ではないでしょうか？ちなみにＧＲＥＥＮは＃００８０００です。ちょっと暗い色です
感のいい人はもう大きさ＆色を同時に変更しているかも知れませんね。そう、上で紹介したタグは一つにまとめることができるんです。
今回使うタグはこれだ！
<FONT SIZE=大きさ COLOR="#RGB色"></FONT>
そうです、一度に両方を指定します。これなら一石二鳥で楽ですね。
具体的にはこのように指定します。
<FONT SIZE=6 COLOR="#00ff00">変更する文字</FONT>
色の組み合わせによってこんな綺麗なものもできます。(^^)
| RGB |
Name |
RGB |
Name |
RGB |
Name |
RGB |
Name |
| F0F8FF |
aliceblue |
FAEBD7 |
antiquewhite |
00FFFF |
aqua |
7FFFD4 |
aquamarine |
| F0FFFF |
azure |
F5F5DC |
beige |
FFE4C4 |
bisque |
000000 |
black |
| FFEBCD |
blanchedalmond |
0000FF |
blue |
8A2BE2 |
blueviolet |
A52A2A |
brown |
| DEB887 |
burlywood |
5F9EA0 |
cadetblue |
7FFF00 |
chartreuse |
D2691E |
chocolate |
| FF7F50 |
coral |
6495ED |
cornflowerblue |
FFF8DC |
cornsilk |
DC143C |
crimson |
| 00FFFF |
cyan |
00008B |
darkblue |
008B8B |
darkcyan |
B8860B |
darkgoldenrod |
| A9A9A9 |
darkgray |
006400 |
darkgreen |
BDB76B |
darkkhaki |
8B008B |
darkmagenta |
| 556B2F |
darkolivegreen |
FF8C00 |
darkorange |
9932CC |
darkorchid |
8B0000 |
darkred |
| E9967A |
darksalmon |
8FBC8F |
darkseagreen |
483D8B |
darkslateblue |
2F4F4F |
darkslategray |
| 00CED1 |
darkturquoise |
9400D3 |
darkviolet |
FF1493 |
deeppink |
00BFFF |
deepskyblue |
| 696969 |
dimgray |
1E90FF |
dodgerblue |
B22222 |
firebrick |
FFFAF0 |
floralwhite |
| 228B22 |
forestgreen |
FF00FF |
fuchsia |
DCDCDC |
gainsboro |
F8F8FF |
ghostwhite |
| FFD700 |
gold |
DAA520 |
goldenrod |
808080 |
gray |
008000 |
green |
| ADFF2F |
greenyellow |
F0FFF0 |
honeydew |
FF69B4 |
hotpink |
CD5C5C |
indianred |
| 4B0082 |
indigo |
FFFFF0 |
ivory |
F0E68C |
khaki |
E6E6FA |
lavender |
| FFF0F5 |
lavenderblush |
7CFC00 |
lawngreen |
FFFACD |
lemonchiffon |
ADD8E6 |
lightblue |
| F08080 |
lightcoral |
E0FFFF |
lightcyan |
FAFAD2 |
lightgoldenrodyellow |
90EE90 |
lightgreen |
| D3D3D3 |
lightgrey |
FFB6C1 |
lightpink |
FFA07A |
lightsalmon |
20B2AA |
lightseagreen |
| 87CEFA |
lightskyblue |
778899 |
lightslategray |
B0C4DE |
lightsteelblue |
FFFFE0 |
lightyellow |
| 00FF00 |
lime |
32CD32 |
limegreen |
FAF0E6 |
linen |
FF00FF |
magenta |
| 800000 |
maroon |
66CDAA |
mediumaquamarine |
0000CD |
mediumblue |
BA55D3 |
mediumorchid |
| 9370DB |
mediumpurple |
3CB371 |
mediumseagreen |
7B68EE |
mediumslateblue |
00FA9A |
mediumspringgreen |
| 48D1CC |
mediumturquoise |
C71585 |
mediumvioletred |
191970 |
midnightblue |
F5FFFA |
mintcream |
| FFE4E1 |
mistyrose |
FFE4B5 |
moccasin |
FFDEAD |
navajowhite |
000080 |
navy |
| FDF5E6 |
oldlace |
808000 |
olive |
6B8E23 |
olivedrab |
FFA500 |
orange |
| FF4500 |
orangered |
DA70D6 |
orchid |
EEE8AA |
palegoldenrod |
98FB98 |
palegreen |
| AFEEEE |
paleturquoise |
DB7093 |
palevioletred |
FFEFD5 |
papayawhip |
FFDAB9 |
peachpuff |
| CD853F |
peru |
FFC0CB |
pink |
DDA0DD |
plum |
B0E0E6 |
powderblue |
| 800080 |
purple |
FF0000 |
red |
BC8F8F |
rosybrown |
4169E1 |
royalblue |
| 8B4513 |
saddlebrown |
FA8072 |
salmon |
F4A460 |
sandybrown |
2E8B57 |
seagreen |
| FFF5EE |
seashell |
A0522D |
sienna |
C0C0C0 |
silver |
87CEEB |
skyblue |
| 6A5ACD |
slateblue |
708090 |
slategray |
FFFAFA |
snow |
00FF7F |
springgreen |
| 4682B4 |
steelblue |
D2B48C |
tan |
008080 |
teal |
D8BFD8 |
thistle |
| FF6347 |
tomato |
40E0D0 |
turquoise |
EE82EE |
violet |
F5DEB3 |
wheat |
| FFFFFF |
white |
F5F5F5 |
whitesmoke |
FFFF00 |
yellow |
9ACD32 |
yellowgreen |
|
こんな具合に変化していきます。自分で色を作ってみるのもよいでしょう。
| #FF0000 |
#00FF00 |
#0000FF |
#FFFF00 |
#FF00FF |
#00FFFF |
| #EE0000 |
#00EE00 |
#0000EE |
#FFFF11 |
#FF11FF |
#11FFFF |
| #DD0000 |
#00DD00 |
#0000DD |
#FFFF22 |
#FF22FF |
#22FFFF |
| #CC0000 |
#00CC00 |
#0000CC |
#FFFF33 |
#FF33FF |
#33FFFF |
| #BB0000 |
#00BB00 |
#0000BB |
#FFFF44 |
#FF44FF |
#44FFFF |
| #AA0000 |
#00AA00 |
#0000AA |
#FFFF55 |
#FF55FF |
#55FFFF |
| #990000 |
#009900 |
#000099 |
#FFFF66 |
#FF66FF |
#66FFFF |
| #880000 |
#008800 |
#000088 |
#FFFF77 |
#FF77FF |
#77FFFF |
| #770000 |
#007700 |
#000077 |
#FFFF88 |
#FF88FF |
#88FFFF |
| #660000 |
#006600 |
#000066 |
#FFFF99 |
#FF99FF |
#99FFFF |
| #550000 |
#005500 |
#000055 |
#FFFFAA |
#FFAAFF |
#AAFFFF |
| #440000 |
#004400 |
#000044 |
#FFFFBB |
#FFBBFF |
#BBFFFF |
| #330000 |
#003300 |
#000033 |
#FFFFCC |
#FFCCFF |
#CCFFFF |
| #220000 |
#002200 |
#000022 |
#FFFFDD |
#FFDDFF |
#DDFFFF |
| #110000 |
#001100 |
#000011 |
#FFFFEE |
#FFEEFF |
#EEFFFF |
| #000000 |
#000000 |
#000000 |
#FFFFFF |
#FFFFFF |
#FFFFFF |
使うタグはこれだ！ <B></B> 具体的にはこのように指定します。
<B>強調させる文字</B>
サンプルです。文字が強調されているのがわかりますか？？
文字を強調してます！
文字を強調してません！
文字の一部分を強調するという事も可能です。使うポイントが決めてでしょう。
使うタグはこれだ！ <I></I> 具体的にはこのように指定します。
<I>傾かせる文字</I>
サンプルです。文字が傾いているのがわかりますか？？
文字を傾かせてます！
文字を傾かせてません！
文字の一部分を傾かせるという事も可能です。使うポイントが決めてでしょう。
使うタグはこれだ！ <U></U> 具体的にはこのように指定します。
<U>アンダーラインを引く文字</U>
サンプルです。文字にアンダーラインが引かれているのがわかりますか？？
文字にアンダーラインを引きます！
文字にアンダーラインを引きません！
文字の一部分にアンダーラインを引く事も可能です。使うポイントが決めてでしょう。
画像を表示したい
インターネット上で使われる画像ファイルには主に２種類が存在します。
『ＧＩＦファイル』と『ＪＰＧファイル』です。拡張子（ファイル名のお尻３文字）によって種類を判断します。
ＧＩＦファイルの中にはアニメーションさせているものもあります。通称アニメーションＧＩＦと呼ばれています。例えば
などです。
Windowsでは、拡張子の大文字小文字を自動で認識するのですが、プロバイダ側のサーバーは自動認識してくれず、大文字と小文字をしっかりと区別します。よって、プロバイダのサーバーのみ画像が表示されないという事態が発生します。
ですので、全ての画像ファイルの拡張子を小文字等で統一させておき、必ず画像ファイルを小文字で指定する習慣をつけておくのがよいと思います。
では画像ファイルを張り付けて見ましょう。
使うタグはこれだ！ <IMG SRC="画像ファイル">
表示させたい場所にこのタグを書くのです。
リンクしたい
リンクとは、他のサイトや他のページに移動したりすることです。あなたもこのページのリンクを何処かで見つけて、ここに移動してきたということですよね。例えば自己紹介のページや、○○特集なんていうページが作られます。自己紹介から○○特集へ移動させる場合にはこのリンクというものを張らないと移動できないのです。もちろん、他のサイトなどに移動させる場合も同様にリンクを張らなければいけません。
使うタグはこれだ！ <A HREF="URL">文字列or画像</A>
他のサイトに移動します。
ＵＲＬにはhttp://www.xxx.or.jp/などのアドレスを指定します。
<IMG SRC="画像ファイル">にすることで画像にリンクを張り付けるという事もできます。画像にカーソルを合わせてクリックするとリンク先に移動します。
具体的に書くとこうなります。
<A HREF="http://www.kikuna.com/">菊名どっとコムのホームページ</A>
<A HREF="http://www.kikuna.com/">
<IMG SRC="http://www.kikuna.com/art/admin.gif"></A>
↑これを表示するとこうなります↓
菊名どっとコムのホームページ
このように表示されます。クリックすると飛んで行ってしまいます。戻って来て下さいね。(笑)
メールを指定したい
インターネットの醍醐味のひとつにＥ−ｍａｉｌがあります。いわゆる電子メールってやつですね。自分のＨＰの感想などを送って貰ったりする場合に自分のＥ−ｍａｉｌのアドレスを表示しておかないとメールが頂けません。アドレスのみを表示するのもいいのですが、どうせならメールが送られてくるように設定しましょう。
使うタグはこれだ！
<A HREF="mailto:メールアドレス">文字列or画像</A>
具体的に書くとこうなります。
<A HREF="mailto:info@kikuna.com">菊名どっとコム事務局＜/A>