| Lesson：2 ホームページの基本（2） | ||||||||||||||||
|
|
||||||||||||||||
| 文字の大きさを変える | ||||||||||||||||
| <FONT SIZE="〜">〜</FONT> | ||||||||||||||||
| 文字の大きさを変えるには、<FONT SIZE>を使用します。 「文字」の設定するので、タグは<FONT>（フォント） 更にフォントの「大きさ」を指定するので、SIZE（サイズ）を指定する属性を付け加えます。 <FONT SIZE="〜">で、"〜"の間に設定できる数値は１〜７までです。 １が最小、７が最大の大きさとなります。 何も指定しない場合、通常文字の大きさはSIZE＝”３”となっています。これを基準にして、大きさを決めます。 また、SIZE="+2"、または、SIZE="-2"と指定する事もできます。 タグ記入例
ブラウザではこうなります
|
||||||||||||||||
| 補足説明・タグについて | ||||||||||||||||
| 上でも説明しましたが、タグの構成は以下のようになっています。 <FONT SIZE="5"> FONTの部分を「エレメント」、SIZEの部分を「属性」、"5"の部分を「属性値」と呼びます。 タグは基本的な命令。属性は付属の命令、属性値は定めた設定が入ります。 |
||||||||||||||||
| 文字の色を変える | ||||||||||||||||
| <FONT COLOR="〜">〜</FONT> | ||||||||||||||||
| 文字の色を変えるには、<FONT>タグを使用します。 属性は色を指定するので、COLORです。 <FONT COLOR="〜">属性値の"〜"の部分には指定する色名を入れます。 色の設定には２通りの方法があります。 １つは，色の名前をそのまま指定する方法です。 ある特定の色に関しては，RED,GREEN,BLUEなどの色名を指定できます。 もう１つの方法は，「#RRGGBB」というような値を用います。 これは、色の三原色である赤、緑、青のそれぞれを、2桁の１６進数で表記したものです。 色の名前に関しては、下記の色見本を参考にして下さい。 記入例
ブラウザではこうなります
|
||||||||||||||||
| 色の見本です。 この他にも使用できる色はありますが、ここでは最も基本的な、WindowsのVGAパレットに準拠した １６色を紹介します。 |
||||||||||||||||
|
| 太字・斜体・下線を付ける | ||||||
| 太字にする <B>〜</B> 文字を太字にする場合は、<B>（ボールド）を使います。 記入例
ブラウザではこうなります
斜体にする <I>〜</I> 文字を斜体にする場合は、<I>（イタリック）を使います。 記入例
ブラウザではこうなります。
下線を付ける <U>〜</U> 文字に下線をつける場合は、<U>（アンダーライン）を使います。 記入例
ブラウザではこうなります。
|
||||||
| 改行する | ||||||
| <BR>（単独タグ） 改行したい場合は、<BR>タグを使います。 メモ帳で文字（テキスト）を記入すると、改行したい部分が出てきます。 例えば… 昨日は雨でした。この文章をメモ帳に記入しても、ブラウザでは改行されず、下記のように表示されてしまいます。
文章を改行するには、改行したい部分に<BR>タグを使用します。 このタグは、終了タグを付ける必要はありません。 記入例
ブラウザではこのように改行して表示されます。
|
||||||
| 見出しを付ける | ||||||
| <H1>〜</H1>（数字は1〜６まで） <H>（ヘッディング）は見出しを設定するタグです。 各章のタイトル等に使用します。 設定したテキストは、太字になり、改行されて前後に一行分の空白行が作られます。 設定できる大きさは１〜６までです。 １が最大、６が最小の大きさとなります。 記入例
ブラウザではこうなります
|
||||||
| 段落を作る | ||||||
| <P>〜</P> <P>（パラグラフ）は「段落」を設定するタグです。 <P>〜</P>で囲まれた部分が一つの段落として設定され、改行した上で前後に一行分の空白行が 入ります。 <P>タグは幾つ並べても、効果が反映されるのは１つ分だけです。 単に改行だけをしたい場合は、<BR>タグを使用します。 <P>タグはあくまでも、段落を指定するタグです。改行の為だけには使用しないので 気を付けて下さい。
ブラウザではこうなります。
|
||||||
| 位置を揃える | ||||||
| 中央寄せにする <CENTER>〜</CENTER> 文字や画像を中央に寄せたい場合、<CENTER>（センター）を使用します。 記入例
ブラウザではこうなります
|
||||||
| 位置を指定する （中央に寄せる）<P ALIGN="center">〜</P> （右に寄せる） <P ALIGN="right">〜</P> （左に寄せる） <P ALIGN="left">〜</P> |
||||||
| <P>タグを使用して、テキストの位置を指定できます。 <P>タグの特性として、改行されて前後に一行分の空白が入ります。気を付けて下さい。 指定できる属性値は、CENTER（中央） RIGHT（右） LEFT（左）の３つです。 記入例
ブラウザではこうなります
|
||||||
| 位置を指定する（２） （中央に寄せる）<DIV ALIGN="center"> （右に寄せる）<DIV ALIGN="right"> （左に寄せる）<DIV ALIGN="left"> |
||||||
| <DIV>属性を使っても、位置を指定する事が出来ます。 <DIV>は文字列や画像等を、一まとめのブロック単位として設定するタグです。 つまり、本来は段落を設定するタグですが、 同じ、段落を指定する<P>タグと異なって、改行されても前後に一行分の空白は入りません。 記入例
ブラウザではこうなります
|
||||||
| 位置を指定する（３） （中央に寄せる）<H1 ALIGN="center">〜</H1> （右に寄せる）<H1 ALIGN="right">〜</H1> （左に寄せる）<H1 ALIGN="left">〜</H1> 見出しタグ<H>の位置を指定する事も出来ます。 記入例
ブラウザではこうなります
|
||||||
| 横罫線を引く | ||||||
| 横罫線を引く <HR> 文と文を区切ったり、項目ごとに区切ったりする時に引きます。 デフォルトは中央寄せになります。 ↓こんな感じです ▼横罫線に変化がほしい！▼ 「線の太さ」の設定 <HR SIZE="★"> ↑ <HR SIZE="5"> の場合 （5ピクセル） ↑ <HR SIZE="10"> の場合 （10ピクセル） 「線の長さ」の設定 <HR WIDTH="☆"> ↑ <HR WIDTH="500"> の場合 （500ピクセル） ↑ <HR WIDTH="50%"> の場合 （50%） 「線の位置」の設定 <HR ALIGN="●"> ※●=LEFT、RIGHT、CENTERのどれか 上 <HR ALIGN="LEFT"> ｜ 真ん中 <HR ALIGN="CENTER"> ｜ 下 <HR ALIGN="RIGHT"> 「影の無い線」の設定 <HR NOSHADE> ↑ 罫線の影が消されてます |
||||||
| Lesson2：まとめ | ||||||
| 目的に応じて何種類かのタグを組み合わせる事が出来ます。 例えば、「フォントの色を赤、サイズが５、太字、下線、中央に表示」したい場合は。 このように入力します。
ブラウザではこうなります
タグの並び方には決まりがあります。 開始タグと終了タグで、文章を囲む事はもうご存知だと思いますが 複数のタグを使う場合は以下のようになります。 <■■><○○><××>ほーむぺーじ</××></○○></■■> このように、一組の開始タグと終了タグの外側に、更に開始タグと終了タグが被さる形になっている 事に気付いたでしょうか？ この順番は必ず守って下さい。 開始タグと終了タグは必ず左右で対になっていないと、思い通りの効果は出ません。 また、同じタグなら、属性を一まとめにして記述することが可能です。 フォントの色を赤・サイズは５にしたい場合のタグを… <FONT COLOR="red"><FONT SIZE="5">ホームページ</FONT></FONT> と書くよりも <FONT COLOR="red" SIZE="5">ホームページ</FONT> こちらの方がスッキリ見えますよね？ |
||||||
| 練習問題（１） | ||||||
| 全てのLessonが終わったら、早速練習問題を解いてみましょう！ 練習問題（１）へ！ |
||||||