お気楽・気楽

お気楽探検隊「タグ」のお勉強　　その～１回目 基本の基本

楽天のサイトなかなか難しいです。そこで仮の隊長は考えました・・
「う～ん、これは何とかせねば・・・」そこでまたまたひらめいたのです。「ソウだみんなと一緒にお勉強しよう！！」てな訳で　　お気楽探検隊「タグ」のお勉強　なんてものを初めてしまいました。（本当は一人では心ぼそ～）

１－１タグ

「タグ」とは何でしょう？
タグとは「<」と「>」でくくられた、画像や文字を定義する言語です。
画像を表示するタグ、文字を表示するタグ、など色々な種類があり、「タグ」は「開始タグ」と呼ばれるものと「終了タグ」と呼ばれるものが対になっており（例外あり）開始タグと終了タグの間に記述した文字列などが、タグの定義どおりに表示されます。

タグはコピーしてそのまま使えますよ

　　例　<b>太字で表示</b> と打ち込めば閲覧画面では
太字で表示 と表示されるわけです。

上記の例では、<b>というのは文字を太字で表示するタグなのですが、
<b>というのが開始タグ、</b>が終了タグです。
このうち「太字で表示」という文字列が、ブラウザでは太字で表示されるわけですね。

１－２　属性
多くのタグには属性というものがあり、その属性に決められた値を設定する事によって、表示方法を細かく設定できるのですよ。

　　例　<p align="center">真ん中に表示</p>

上記の例では、<p>は段落を定義するタグです。
これらの間にある文字列は段落と定義されるのですが、この<p>タグに「align属性」を指定し、値に<center>を記述すると、文字列が中央ぞろえに設定されます。

　　　例えば＜p align="center"＞お気楽＜/p＞と記入すれば

お気楽

１－３記述ルール
以上のことを記述する際に下記のルールに従ってください。
絶対ではないのですが、そうした方が良いことも含まれます。他にも方法がありますがとりあえず今はこれで。


　　　　　　・タグは必ず半角英数字で記述します。
　　　　　　・属性の値は「"」ダブルクォーテーション、または
　　　　　　　「'」シングルクォーテーションでくくります。
　　　　　　・複数の属性を設定する場合は半角スペースで区切り
　　　　　　　並べて記述してね。
　　　　　　・「タグ」の途中で改行はしないでね

例（■は半角スペースですよ）

<p■align="center"><font■size="3"■color="Blue"■face="ＭＳゴシック">ＭＳゴシック</font＞</P>と書けば

ＭＳゴシック

お気楽探検隊「タグ」のお勉強　　その～２回目　文字属性そにょ～１

２－１文字

タグはコピーしてそのまま使えますよ

文字を表示する基本のタグは・・<font>文字列</font>です。
例えば<font>フォント</font>と記入すれば

フォント 　　　と表示されます。　

フォントを指定しなかった場合、ブラウザで指定されている標準フォントで表示されます。楽天では標準では「小」に設定されています。メイン項目でサイズ２(10ptぐらいですかね)、サブ項目でサイズ１(8ptぐらいですかね)。楽天で標準の文字の大きさを変更するには管理画面のデザイン設定の詳細設定(上級者用)で文字サイズを設定できます。

　　●大でメイン14pt(サイズ4)サブ12pt(サイズ3)、
　　●中でメイン12pt(サイズ3)サブ10pt(サイズ2)になります。

２－２フォントの属性

フォントの属性には色々ありますがここでは主なものをおぼえましょうね。

size 　文字の大きさですね。
●絶対値入力
１～７までの数字（１が最小７が最大）を入力するかＰＸ（ピクセル）値で入力します。

●相対値入力
またあらかじめ基準になる文字の数値を決めておいて基準値に合わせてサイズの大きさを
どのくらいにするのかを指定する方法もありますこの場合は、
　　　<basefont size="数値Ａ">
　　　<font size="±数値Ｂ">文字列</font>
と言った風に入力しますが、数値Ａは１～７までの数字で（上の文字のサイズを入力するのと同じですね） １が最小で７が最大 です。そして数値Ｂは ±１～±６までの数字します。
★文字相対値ではプラスした数値が７を越えた場合は７で表示され、マイナスした数値が１を越えた場合は１で表示されます。
★basefontのサイズの値を基準に±１～６ の範囲で指定できますが、気をつけてください。文字の大きさの数値は１から７までしか指定出来ませんのでbasefont sizeの値が３の ときは－２か＋４しか指定できないのです。

例　
文字ポイント数で入力した場合は
<font size="1">サイズ1</font>と記入すれば
サイズ1
<font size="2">サイズ2</font>と記入すれば
サイズ2
<font size="3">サイズ3</font>と記入すれば
サイズ3
<font size="4">サイズ4</font>と記入すれば
サイズ4
<font size="5">サイズ5</font>と記入すれば
サイズ5
<font size="6">サイズ6</font>と記入すれば
サイズ6
<font size="7">サイズ7</font>と記入すれば

サイズ7 と表示されますよ。

px（ピクセル）で入力した場合は
<font size="1px">サイズ2</font>と記入すれば
サイズ1
<font size="2px">サイズ1</font>と記入すれば
サイズ2
<font size="3px">サイズ3</font>と記入すれば
サイズ3 こんな感じですね。

基準値を
<basefont size="5">文字列</font>と書き込めば 文字列
相対値を
<font size="－2">文字列</font>と書き込めば 文字列 ・・・・・・・の様に表示されます。


color 　文字の色です。　
　　　名前もしくはカラーコードで表示します。
★カラーコードの場合は頭に＃を入れるのを忘れないように。
　　　（名前で指定した場合プラウダによってはその色が表示されない場合があります）

face 　書体の指定です。
　　　表示したいフォント名を入れますが、プロポーショナルフォントは
　　　避けたほうが懸命です。(書体表示に「Ｐ」が付いてます)
　　　色の場合もそうなのですが、ＯＳによってはインストールされて
　　　いない文字もあります。こんなときは

　　　＜font face=" ＭＳ Ｐゴシック,Times New Roman"＞文字列＜/font＞

　　　と言った風に二つのフォントを指定が出来ます。
　　　この場合、先に入力したフォントが優先されます。

まとめて見ましょう

例 ＜font size="数値" color="色名もしくはコード" face="書体"＞
　　文字列＜/font＞

　　こんな感じですかね。

お気楽探検隊「タグ」のお勉強　　その～３回目　文字属性そにょ～２

タグはコピーしてそのまま使えますよ

●フォントサイズを一括で指定する
<Basefont Size="1～7">
閉じタグ</Basefont>はありません。
ベースフォントタグ以降の文字は全てそのサイズになります。
テーブルタグ内は無効になりますが、
テーブルタグ内でも再度ベースフォントを使えば有効になります。

● 大き目の文字
　<Big>～</Big>
普通の文字と<Big>大き目の文字</Big>
普通の文字と 大き目の文字

● 小さめの文字
　<Small>～</Small>
普通の文字と<Small>小さ目の文字</Small>
普通の文字と 小さ目の文字

● 太文字
　<B>～</B>
<B>太文字です</B>
この文字は ボルドー とも言います

● 強調(太文字) 　<Strong>～</Strong>
より強調を意味する<Strong>太い文字</Strong> になります。
より強調を意味する 太い文字になります。

※ブラウザでの表示のされ方は<B>と同じですが、検索エンジンのキーワードとしての重要性が違います。こちらのほうがより強い強調になります。

● 斜体文字
　<I>～</I>
この文字を<I>イタリック</I>とも言います。
この文字を イタリック とも言います。

● 強調(斜体)
　<Em>～</Em>
<Em>検索エンジンに重要視されるタグです。</Em>
検索エンジンに重要視されるタグです。

● 強調(斜体)アドレスタグ
　<Address>～</Address>
<Address>メールアドレス</Address>

文字

お気楽探検隊「タグ」のお勉強　　その～４回目　文字属性そにょ応用

タグはコピーしてそのまま使えますよ

●文字の背景に画像をつける
背景に画像を使う時は、文字が見にくくならないように画像を選ぶ。
アイコン画像だと文字を書き入れた分だけアイコンが繰り返し表示されます
方法は●文字の背景に色をつける。と同じです。＜px＞は必ずつけます。

<span style="background-image:url(http://～背景画像のURL);font-size:文字サイズpx;color:文字色;">
<font face="好きな字体">文字列</font></span>

文字列（背景画像を入れてません）