4.基本的なレイアウトを行なうためのタグ(その1)

文章を飾り、レイアウトを整えるための基本的なタグを勉強しましょう。 基本的な事項です、いろいろとあって多少複雑ですが、どうかお付き合い下さい。


【改行を行なう】
ソース(テキストファイル)では、改行を行なっているのに、ブラウザでは 表示されませんね。
思った位置に改行させるようにするには、改行すべき位置に改行タグ<BR>(lineBReak)を 書き込む必要があります。
なお、このタグには
</BR>は存在しません。

(注)タグは、大文字で書いても、小文字で書いても同 じ働きをします。

【景色及び文字の色を決める】
 <BODY>タグは、本文を示すタグですが、次ぎのような詳細な指定(属性または アトリビュートと云います)を行なうことで、背景色(バックカラー)や文字(テキスト) を色を決めることが出来ます。

   

           <BODY bgclor="★" text="★">  〜  </BODY>
   は、RRGGBB値または Color Nameを表しています。
『参考』 Color Name List

 パソコンのモニターは、赤(Red)、緑(Green)、青(Blue)の光の組み合わせで全ての色を表現します。赤、緑、青を最大にすれば白となり、 最小にすれば黒となります。
色指定には、16進法6桁を用います。#は16進法を表す記号で、左の2桁が赤の、真中の2桁が緑の、右の2桁が青の割合を表します。
RGBを#RRGGBBのような16進数で指定する以外にも、色の名前で直接カラー指定することも出来ます。 以下の表はその一部です。ホームページ作成時の参考にして下さい。
なお、各色については、ブラウザの種類、バージョンによって対応してないモノもありますので、 確認の上お使い下さい。


W h i t e (#ffffff) FlralWhite (#fffaf0) Ivory (#fffff0) AliceBlue  (#f0f8ff) Black (#000000)
G r a y (#bebebe) DarkBlue (#00008b) MediumBlue (#0000cd) B l u e (#0000ff) LightBlue (#add8e6)
SkyBlue  (#87ceeb) C y a n  (#00ffff) Green  (#00ff00) LightSeaGreen (#20b2aa) YellowGreen (#9acd32)
LightGreen (#90ee90) Goldenrod (#daa520) G o l d   (#ffd700) Yellow   (#ffff00) Khaki  (#f0e68c)
BlanchAlmond (#ffebcd) Orange (#ffa500) Salmon (#fa8072) DarkRed (#8b0000) Brown (#a52a2a)
R e d (#ff0000) P i n k  (#ffc0cb) HotPink (#ff69b4) Purple (#ff69b4) Violet (#ee82ee)

【文字を飾る】
 文字に関する操作を行なうタグの中で最もよく使われるものに <FONT> 〜 </FONT>があります。 文字の大きさや色、書体などの指定が出来ます。
   <FONT  size="5"color="#ff0000"face="DF太楷書体">文字を変更する</FONT>
と記述すると、次ぎのように表示されます。
文字を変更する
<FONT>〜</FONT>の属性のうち、sizeは文字の大きさを指定します。 数値が大きくなればなるほど大きな文字になります。上の例ではsizeが5となっています。
colorは、文字の色を決めます。この例では、Red(#ff0000)となっています。
faceは、文字の書体を指定するものです。上の例では太楷書体となっています。

『参考』文字の大きさについて

size="1"−−−日は昇る
size="2"−−−日は昇る
size="3"−−−日は昇る
size="4"−−−日は昇る
size="5"−−−日は昇る
size="6"−−−日は昇る
size="7"−−−日は昇る

(注)<FONT>タグでは“7”が最大で、“1”が最小となります。 サイズを規定しない時は、<FONT size="3">が 基本となります。この場合<FONT size="+4">とすれば、<FONT size="7">と同じ結果になります。
 <BASEFONT size="4">と記述することにより、本文全体のフォンとサイズを“4”にすることも出来ます。


  『参考』書体について

face="MS明朝体" -----念ずれば花開く
face="DF細楷書体"-----念ずれば花開く
face="DF太楷書体"-----念ずれば花開く
face="DF行書体"-----念ずれば花開く
face="DF勘亭流"-----念ずれば花開く
face="DF特太ゴシック体"-----念ずれば花開く

『参考』Fontを太字や斜体にする

 <FONT>タグのface属性を利用しないで、見た目を変化させる(--フォントの物理的形状指定という--)タグ があります。次ぎにその主なものを示します。

 <I>イタリック(斜体にする)</I>−−−イタリック(斜体にする)
 <B>ボールド(太字にする)</B>−−−ボールド(太字にする)
     <S>抹消線をつける</S>−−−抹消線をつける
 <U>下線をつける</U>−−−下線をつける


【行を揃える】
 行揃えを指定するタグには、次ぎのものがあります。<P>タグは段落(Phrase)を形成 するタグで<P>〜</P>で挟まれた部分は段落とみなし、うしろに自動的に一行空きが挿入されます。
 <DIV>は区分・境界(Division)の意味で、基本的には<P>と同じ役目をしますが、</DIV>タグの あと一行が空きになることはありません。

<P align="★">〜</P>
 <DIV align="★">〜</DIV>

  align="★"の★は、left(左寄せ)、center(センターリング)又はright(右寄せ)のいずれかを指定。

<DIV align="left">左寄せの文字</DIV>
左寄せの文字             
<DIV align="center">中揃えの文字</DIV>
中揃えの文字
<DIV align="right">右寄せの文字</DIV>
              右寄せの文字