HTML とは HyperText Markup Language の頭文字をとった略語です。
あなたがホームページビルダーを使って雑貨のアフィリエイトショップを制作するうえで、文章やレイアウト、商品画像などを配置したりするための記号のようなものとなります。
最初はまったく見慣れない英字がならべられ違和感がありますが、慣れればかんたんにこの記号でこうなって、ああなっているからここがこうなっているんだな、とわかるようになります。
ビルダーを使えば、この記号をおぼえることなくどんどんあなたの雑貨ショップを作ってゆけますが、ほんのかんたんなHTML記号をプラスするだけで、さまざまなアレンジができ、サイト自体の見栄えもどんどんよくなってゆきます。
わたしのこのサイト 『 小さな雑貨店で素敵にひとかせぎ! 』 もすでに4回ほど全面改装をしています。 HTML
がわかってくるとサイトをどんどん改装したくなる欲求にかられてこつこつと空いた時間で楽しみながらやってきました。
このタグを挿入するとこの部分がこんなに変わり、このタグを変更すればこうなるんだと、すぐにデザインがサイトに反映されますから、パズルをやっているようでとても楽しいです。
そこでここでは、初心者の方でもかんたんにあなたのサイトデザインを変えてくれる
HTMLタグの基本からさまざまな小技集までをご紹介してゆきますので、おおいに活用してみてください♪
| 文 字 | テ ー ブ ル | リ ン ク | ウ イ ン ド ウ | フ レ ー ム
| その他小技集 |
● ページ全体の文字色を設定するタグ
<BODY text="#000000">
ページのHTMLソースの最初の方にある<BODY>タグの中に text"#000000"
を上記のように加えるとページ全体の文字の基本色が設定できます。 #000000
が指定したい色番になりますのでカラーチャートなどでお好きな#6桁の色番をつけてください。 → 色番号(カラーコード)表
● 部分的に文字色を変化させるタグ
<FONT color="#00cc66">変化させたい文字</FONT>
部分的に文字色を変化させたい場合は、文字の前後を<FONT color="#0066cc">○○</FONT>ではさむと このように 変化できます。 #0066cc の部分にお好きな#6桁の色番をつけてください。また、文字サイズもまわりより大きくする場合は、このタグの中に
size="+1" を加えてください。
<FONT color="#00cc66" size="+1">色とサイズを変化させたい文字</FONT>
この場合の size は1〜7、+1〜+6、−1〜-6になりますので、いろいろ数値を変えて、自分の希望にあう文字サイズをさがしてみてください。
● 文字を強調するタグ
<B>強調したい文字</B>
強調して表示させたい文字の前後を<B>○○</B>で挟むとその文字は
このように 強調されます。
● 文字と文字の字間を調節するタグ
<p style="line-height: 1.5;">文字間を調節したい文章</p>
タグ内の1.5部分を変えることによって文字間を狭くも広くもできます。
● 文字を斜体に変化させるタグ
<I>斜体にしたい文字</I>
斜体にして表示させたい文字の前後を<I>○○</I>で挟むとその文字は
このように 斜体になります。
● 文字の大きさを自由に変化させるタグ
<SPAN STYLE="FONT-SIZE:40pt">変化させたい文字</SPAN>
このタグは 40pt が文字の大きさになりますので 40 を好きな数値に置き換えれば文字の大きさを自由に変化させることができます。
例えば、<SPAN STYLE="FONT-SIZE:10pt">変化させたい文字</SPAN>
<SPAN STYLE="FONT-SIZE:15pt">変化させたい文字</SPAN>
<SPAN STYLE="FONT-SIZE:20pt">変化させたい文字</SPAN>
● 文字に背景色をつけるタグ
<SPAN STYLE="background:#99ffff">背景色をつけたい文字</SPAN>
このタグで挟んだ文字は 背景色をつけたい文字 のように表示されます。
タグ内の #99ffff の部分が色番号(6桁)となりますので、これを変更すればお好みの背景色に変えることができます。 → 色番号(カラーコード)表
● 文字の上下に線をつけるタグ
<SPAN STYLE="border-top:solid #cc3333;border-bottom: medium ridge
#3366cc;">
上下に線をつけたい文字</SPAN">
このタグで挟まれた文字は 上下線をつけたい文字 のように表示されます。
こちらもタグ内の #cc3333 と #3366cc の色番号を変更すればお好きな色の線に変更できます。
単純に文字に同じ色で下線を引くだけでしたら <U>下線をつけたい文字</U>
のタグで挟むだけでその文字は 下線をつけた文字 と表示されます。
● 文字をチカチカと点滅させて表示するタグ
<MARQUEE SCROLLDELAY="400" SCROLLAMOUNT="140"
WIDTH="150">文字を点滅させる! </MARQUEE>
このタグではさまれた文字は のように点滅した状態で表示されます。
タグ内の "140" と "150" が文字の表示サイズになりますので、文字数が多くなればその大きさにあった数値に変更してください。
数値が小さ過ぎると文字が切れて表示されますから注意してください。 また
"300" は点滅の速度となりますので数値が小さくなるほど早く点滅し、大きくなるほどゆっくり点滅するようになります。
● 文字に打ち消し線をつけて表示させるタグ
<S>打ち消し線をつけたい文字</S>
このタグで挟まれた文字は 打ち消し線をつけたい文字 のように表示されます。
商品の値代を下げたときなどに定価部分を打ち消すのに使えます。
● 文字にふりがなを表示させるタグ
<Ruby>
<Rb>ふりがなをつけたい文字
<Rt>ふりがな
</Ruby>
このタグに挟まれた文字は 不利仮名COCOMU のように表示されます。
● 文字を縦書きで表示させるタグ
<div style="writing-mode:tb-rl;">縦書きで表示させたい文字</div>
|