↑amazonでHP作成の本を買おう！↑

Endless Dream!-超〜簡単ＨＰ作り ６．基本タグ 基本タグだけ覚えよう！

このページでは基本のHTMLタグについて書きます。このくらいは覚えておいたほうがいいので、このページを参考に、使いながら覚えちゃおう！

＜基本中の基本＞

前にも書いたけど、タグはＨＰを見やすくするための命令。「この文字の色を変えます！」とか「ここで改行！」とかね。だから、文章の中でいじりたい部分だけにタグを打つ！ 　そしてタグは必ず、半角英数！（直接入力で書く英語と数字。）これが超重要！全角で書くと、タグではなく文字と認識されてしまうのだ。 　大文字でも小文字でもＯＫ！僕の場合は、自力で書くときは小文字、作成ツールを使ったものは大文字にしてることが多い。（そうすれば修正する時に分かりやすいしね。） 　あとたいていのタグは、「この文字の部分を変えて！」っていう命令なので、どこからどこまでかを指定しなければいけない。そこで、変えたい部分の両端をタグで囲む！例えば、太字にする時は、<b>を使うんだけど、普通に戻す終わりのところに</b>を打たないとずっと太字のままになってしまう。 　そう、タグで命令するときは、<〜>、やめるときは</〜>になる。"〜"の所に命令する言葉が入る。（たいていの場合は同じというか、対になってるっていった方が分かりやすいかな？）この終わりの"/"が超重要だよ！

＜基本タグだけ覚えちゃおう！＞

タグなんて少しずつ覚えていけばいいし、わかんなくなったら作成支援ＨＰなどで調べればすむから、最初はすごいよく使う基本のだけ覚えちゃえばＯＫ！あとは使ってるうちに自然と覚えていくからね。 　　　　１．改行 　改行したいときは、<br>と<p>を使う。違いは、<br>は普通の改行、<p>は一行飛ばした改行。 　　　文章１（普通に改行してね！）<br> 　　　文章２（一行飛ばして改行してね！）<p> 　　　改行後の文章・・・ 　となる。ただ<p>は同じ所に何回打っても、一行飛ばししかされない。だから、１行以上開けて改行したいときは、<p>と<br>を組み合わせる！（２行なら<p><br>、３行なら<p><br><br>） 　＊文章を書いた後タグの打ち始めに、この改行からやると楽だよ！ 　　　　２．中央寄せ 　すごい使うのがこの中央寄せ。見出しの時には特によく使う！やり方は中央寄せにしたい部分を、<center>と</center>ではさむ。 <center>この間を中央に寄せてね！</center> 　＊別に見出しの文字だけじゃなくて、数行まとめてや、このページ全体を中央寄せっていうこともできるよ。とにかく中央寄せしたい部分を全部はさめばＯＫ！ 　　　　３．文字の色 　何も指示しないと文字は普通黒なんだけど、一部分色を変えたい時は、その部分を<font color="色">と</font>ではさむ。 　　　<font color="blue">青色にしてね！</font> 　＊色の部分は数字でもいけるけど、調べるの面倒だから、普通に色の名前を英語で書いた方が楽だよ！ 　　　　４．文字の大きさの変化 　大きさを少し変化させたいときは、大きくするには<big>と</big>、小さくしたいときは<small>と</small>ではさむ。組み合わせるともっと大きくしたり小さくしたりもできる。 　　　<big>大きくしてね！</big>　　<small>小さくしてね！</small>　　（ちなみにこれが普通サイズ ） 　または、<font size="数字">を使うのもいい。基本の大きさより大きくしたいときは、数字のとこをに“+○”、逆に小さくしたいときは“-○”を入れるんだ。（○はもちろん数字。１段階ごとに数字が増えていくよ。） 　　　<font size="+3">３段階大きくしてね！</font>　　<font size="-2">２段階小さくしてね！</font> 　少し（１段階）の変化なら<big>か<small>を、大きい（２段階以上）の変化なら<font size="数字">を使うのがいいかな。（下にあるように、前のを重ねてもいいけどね。） 　　　　５．文字の変化 　太字にしたいときは、<b>と</b>ではさむ。 　　　<b>太字にしてね！</b> 　他にも、斜め文字（イタリック体）にしたいときの、<i>と</i>や、下線（アンダーライン）をつけていときの、<u>と</u>などもある。 　　　<i>斜めにしてね！</i>　　<u>下線をつけてね！</u> 　＊あまりに多いと逆に見にくいから、目立たせたい所だけ、効果的に使おう！ 　　　　６．見出し 　ＨＰやページのタイトルや、見やすくするためにトピック（例えばここなら＜基本タグだけ覚えちゃおう！＞ね）など、見出しの形で目立たせたい時に簡単なのが、<h数字">と</h数字">で囲む方法。（数字は文字の大きさによって"1"〜"6"をいれる。前後の数字は一致させる。） <h1>h1の場合</h1> <h2>h2の場合</h2> <h3>h3の場合</h3> <h4>h4の場合</h4> <h5>h5の場合</h5> <h6>h6の場合</h6> 　ただこの場合注意しないといけないのが、このタグを使った場合自動的に行開けの改行になってしまうこと。だから、部分的に文字の大きさを修正したいときには向かない。（その場合は「４．文字の大きさの変化」のタグを使う。）僕は見出しをこれではないタグで作ってるので、今はあんまり使ってない。でも最初のうちは分かりやすくて便利なタグなので、覚えちゃおう。 　＊見出しは<center>と</center>を使ってはさみ、中央寄せにすると見やすいよ！

＜タグの組み合わせ！＞

タグは一つ一つ単独でなく、組み合わせて使うこともできる。それが特に有効なのは、文字の変形。 　たとえば、太字の赤い色で、２段階大きくしたいときは、それぞれに関係あるものを組み合わせる！！ 　　　<b><font color="red"><big><big>太字・赤・２段階大きくしてね！</big></big></font></b>ってな具合に。 　また上のは、<font>を使うと簡単。 　　　<b><font color="red" size="+2">太字・赤・２段階大きくしてね！</font></b>という感じでね。 　いろいろ組み合わせ使ってみよう！！

＜ポイント＞

ＨＰを作る際のベースとなるタグもほんとは覚えないといけないんだけど、そのベースは後のページにそのまま使えばいいのを用意しておくので、とりあえずこの超基本のタグだけは覚えちゃおう！ 　何回もいうけど、こういうのは使ってるうちの覚えるものだし、分からないときは人のソースを参考にして、それを切り貼りすればいい。で、自分の基礎となるページが出来上がったら、それをうまくコピーしたり、切り貼りすればあとは簡単にできるよ。最初は難しいかもしれないけど、まずはいろいろＴＲＹしてみよう！すぐに覚えられるよ。 　そうそうこれは追加だけど、<font>の時などによく使う“ " ”なんだけど、これは使っても、使わなくてもいい。例えば<font color="blue">でも、<font color=blue>でもいいんだ。（ただし使うときは両サイドに入れないとだめだよ。）初心者のうちは修正するときにどこを変えれば分かりやすいので、入れたほうがいいかも。