商店主さん向けHTMLセミナーwindows95&Internet Explorler準拠
|
商店主さん向けHTMLセミナー windows95&Internet Explorler準拠 |
Chapter 7
第二日の文字色で解説しましたが、背景の色も"#******"という６桁の16進数の表示と、 140色の直接色名指定で簡単に色がかわります。 リンク色の色も変更できるのですが、私は「趣味のよい色合いを使用する！」という意味からも、 大抵のブラウザの標準リンク色である青や既リンク色である深紫系の色が、そのままで映えるような 色合いを推奨いたします。
冒頭のBODY部分に、そのまま記述してします！
たとえば、このページは BGCOLOR="#FFFFDD"です。
（参考）
京太さんの「色いろテスター」
色見本の館
| 当社は |
ボールドの意味で２つ一組。太字にします。FONT SIZEが２以下のものに使用した場合、文字がつぶれることがありますので注意
| 当社は傘屋です |
イタリックの意味で２つ一組。斜体にします。文字によっては直後の文字と干渉することがありますので、 注意してください。
以上２つを組み合わせてボールドイタリックとして使用する場合は、タグの順序に注意します！
「先入れ後だし」「後いれ先だし」を守ってください
ex.<B><I>当社は傘屋です</I></B>
|
当社は傘屋です |
|
当社は傘屋です |
|
当社は傘屋です 心斎橋みや竹 |
|
当社は傘屋です 心斎橋みや竹 |
どちらも単独タグとして使用します！BRは改行、Pは段落としてスペースが一行分あきます。 HTML記述の際、文章の最後尾につけて使用するのが、 最も使いやすいといわれてます。もちろん冒頭や文中につけても差支えはありません。
| 当社は傘屋です心斎橋みや竹 |
文字の大きさを決めます。あまり一行の中で入れ替わり変えると、かえって見苦しくなるので要注意！
何も指定のないときはFONT SIZE=3になり、冒頭でBASEFONTが決められている場合は、そのSIZEで表示されます。
大きさは１〜７まであります
| 1 2 3 4 5 6 7 |
デザイン上、とても便利なタグですが、見る側のシステムに指定されたフォントが入っていなければ表示されず、 ブラウザ標準のフォントになってしまいます。 一番注意すべき点は、英字FONT指定を和文にかけない！ということです。 特にHELVETICA等はWindowsの場合、ちゃんと和文も変換してしまいますので要注意！ これはマックでは化け文字の嵐となります。FACE指定は注意深く、必要最小限でいけば、最高の効果があります。
|
<FONT FACE="ＭＳ Ｐ明朝">ＭＳ Ｐ明朝</FONT> <FONT FACE="ＭＳ Ｐゴシック">ＭＳ Ｐゴシック</FONT> <FONT FACE="HELVETICA">HELVETICA</FONT> <FONT FACE="HELVETICA">ヘルヴェティカ</FONT> <FONT FACE="Times New Roman">Times New Roman</FONT> <FONT FACE="Times New Roman">タイムズニューロマン</FONT> |
|
ＭＳ Ｐ明朝 ＭＳ Ｐゴシック HELVETICA ヘルヴェティカ⇒Macでは見えない！ Times New Roman タイムズニューロマン⇒これもＮＧ！ |
（参考）
京太さんのFONT比較表
第二日で解説しましたが、文字の色は"#******"という６桁の16進数の表示と、 140色の直接色名指定で簡単に色がかわります。 毎日変わるkasaya.comトップページ冒頭の見出しも、 これを利用してカラフルなものにしています！
文中に使用するコツは、あまり多色にわたったものにしすぎると見にくくなりインパクトがなくなる！っということと、 マックやリンクに下線を引かない指定をしている人にとって、青文字色はイコール「リンク表示」と 直感的に解釈されるので、できるだけ青字文章は避ける！ということでしょう。
（参考）
京太さんの「色いろテスター」
色見本の館
FONT指定が色々絡んでくる場合がありますので、 FONTの閉じタグはよくデータレイアウトを整理して、タグイン、タグアウトの因果関係を よく把握しておいてください
|
<FONT SIZE=5> たとえば <FONT FACE="ＭＳ Ｐ明朝"> 雨になったとしても <FONT COLOR=red> 大丈夫 </FONT>⇒COLORの閉じタグ この傘があれば </FONT>⇒FACEの閉じタグ ご心配なく </FONT>⇒SIZEの閉じタグ |
| たとえば 雨になったとしても 大丈夫 この傘があれば ご心配なく |
データのみにスペースをつくってブラウザに反映しない場合は「spaceキー」のみを、 ブラウザ上にもスペースを反映させたい場合は「shift+spaceキー」です。 （これは環境により異なるかもしれません）
見出しH1です見出しH2です見出しH3です見出しH4です見出しH5です見出しH6です |
ALIGNを指定して、この見出しだけ左右、中央に配置させることもできます！
この場合は「文章回り込みの終止」のようにBR CLEAR="all"は必要ありません！
<H1 ALIGN="right"></H1><H2 ALIGN="left"></H2><H3 ALIGN="CENTER"></H3> |
よく観察すると、このタグは他のタグの複合であることがよみとれます。 たとえば以下のふたつは、ほぼ同じ意味合いです。H*はタグを統括して、見出しにふさわしいものに なるよう工夫された便利タグですが、よりカスタムメイドなものを作成する場合は、 （下のように）詳細にわけて打ったほうがよい場合もあります。
| <H1 ALIGN="center">*** </H1> |
|
<CENTER> <BR> <FONT SIZE=6><B>***</B></FONT> <P> </CENTER> |
彫刻刀もないのに、ちゃんと綺麗にブラウザちゃんが罫線を彫ってくれる「お得な」タグです？！ まずは、HRの技の数々をご覧ください
|
<HR>
<HR SIZE=5> <SIZE=5 NOSHADE> <SIZE=10> <SIZE=10 NOSHADE> <WIDTH="50%"> <WIDTH="90%"> <HR WIDTH=200> <HR WIDTH=200 ALIGN="right"> <HR WIDTH=200 ALIGN="left"> <HR SIZE=30 WIDTH="60%"> |
|
画像と文字が詰まりすぎているような時に、適当な数値を指定すれば、
すっきり仕上がります！
Hスペースといっても、「H」をする秘密のお部屋のことではありません（笑）
|
↑ VSPACE ↓ | 文章 | ||
| ←HSPACE→ | 画像 | ←HSPACE→ | |
|
↑ VSPACE ↓ | |||
| 文章 | |||
A HREFをHERFと間違える方が多数いらっしゃいますので要注意。 これからもっとも頻繁にお付き合いする最重要タグです！ リンク先の指定には「パス名」の勉強が必要です。 いよいよ次回は「パス名」の噛み砕いた？説明です！
｜←Chapter6へ ｜目次にもどる ｜→Chapter8へ ｜
BACK HOME