三四郎

勉強部屋HTML勉強部屋

ＨＴＭＬタグの勉強部屋

日記を書き込む際やページを作成する際に、HTMLタグを使うことにより、文字のサイズを大きくしたり色を変えたりすることができます。ここではその中でも楽天広場で使用できるものを集めてみました。

注）日記などの機能によって使えるタグが異なります。
注）下記にないＨＴＭＬタグは制限されているため、利用できません。

・いろんなＨＴＭＬ

・他のページにリンクを張りたい … ＜a＞タグ
・画像を表示したい/貼りたい … ＜img＞タグ
・文字の色を変えたい … ＜font＞タグ
・文字の大きさを変えたい … ＜font＞タグ
・文字を太くしたい … ＜b＞タグ
・文字をセンタリング(中央寄せ)したい … ＜center＞タグ
・文字を斜体にしたい … ＜i＞タグ
・文字にアンダーラインをつけたい … ＜u＞タグ
・文字に取消し線をつけたい … ＜s＞タグ
・文字をテロップのように動かしたい … ＜marquee＞タグ
・表(テーブル)を書きたい … ＜table＞タグ

●ＨＴＭＬとは？

・ＨＴＭＬとは、ホームページ上で文字や画像をどのように表示するか定義するための言葉です。

・タグと呼ばれるカッコで文字などをくくることでデザインや大きさを変えたりすることができます。

・タグは「」ではさまれたのような形をしており、デザインを変えたい文字などを「ＨＴＭＬを適用させる文字列」のようにくくることで機能します。

・例えば、文字をセンタリング(中央揃え)したい場合は タグを使用し、「 センタリングする文字列 」のようにすることで文字をセンタリング(中央揃え)する事ができます。詳しい例はこちらになります。

●ほかのページにリンクを張りたい

[ 表示例 ]　「楽天市場へリンク」

[HTMLタグ]　＜a href=”http://www.rakuten.co.jp“＞「楽天市場へリンク」＜/a＞

1.自分のホームページを他のホームページとリンクをさせたい時は、＜a href="リンク先のアドレス"＞リンク先のホームページの名前＜/a＞と書くと文字をクリックして他のページにジャンプできるようになります。

(アドレスとは、楽天市場の場合「http://www.rakuten.co.jp」のようにhttp://で始まるものをさします)

下の「ここにアドレスを入力」という部分にリンクしたいページのアドレスを入力してみてください。(http://から全て)

2.上の文字を全て選択し、右クリックでコピーして、日記やページ作成などの入力画面にはりつければ、リンクすることができます。

[完成例]

＜a href="http://www.rakuten.co.jp"＞楽天市場＜/a＞へジャンプ
と書くと...
楽天市場へジャンプ
のようにリンクがはられます。

●画像を表示したい

[ 表示例 ]　

[HTMLタグ] ＜img src="http://plaza.rakuten.co.jp/img/hirobatitle.gif"＞

※画像の倉庫に登録してある画像は簡単に表示することができます。詳しくはこちらをご覧ください。

※他のページ等からの画像の無断転写など、著作権に違反した利用は禁止されています。

1.画像を表示したい部分に＜img src="画像のアドレス"＞と書くと画像を表示できます。

アドレスとは、楽天市場の場合「http://www.rakuten.co.jp」のようにhttp://で始まるものをさします。

画像の場合は、「.gif」、「.jpg」、「.png」でアドレスが終わっている必要があります。 (「.htm」、「.html」、「/」で終わっているものは使用できません)

下の[完成例]を見ながら「画像のアドレスを入力」の部分を書き換えてみてください。

「画像の倉庫」に登録してある画像は簡単にタグを表示することができます。詳しくはこちらをご覧ください。

2.上の文字を全て選択し右クリックでコピーして、日記やページ作成などの入力画面にはりつければ、画像を表示することができます。

[完成例]

＜mg src="http://plaza.rakuten.co.jp/img/hirobatitle.gif"＞

と書くと...

のように画像が表示されます。

●文字の色を変えたい

[ 表示例 ]　文字の「色を」変える

[HTMLタグ] 文字の「色を」かえる

1.色を変えたい文字をとでくくると、文字の色を変えることができます。(red，blueなど)

下の「ここが赤くなる」という部分を書きかえてみてください。

2.上の文字を全て選択し、右クリックでコピーして、日記やページ作成などの入力画面にはりつければ文字の色を変えることができます。

※color="色名"の色の部分を変えると他の色にすることもできます。
↓のようにblueやgreenなど様々な色が使用できます。

white
black
gray
blue

cyan
green
lime
khaki

yellow
orange
brown
red

pink
purple
violet
Aqua

#FFFFFFのようにカラーパレットで指定することも可能です。

[完成例]

ここから先が＜font color="blue"＞青く＜/font＞なります。
と書くと...

ここから先が青くなります。

と文字が色をかえて表示されます。

●文字のサイズを変えたい

[ 表示例 ]　文字を「大きく」表示させる
[HTMLタグ] 文字を＜font size=”7”＞「大きく」＜/font＞表示させる

1.大きさを変えたい文字を＜font size="サイズ"＞と＜/font＞でくくると、文字の大きさを変えることができます。(１～７まで)

下の「大きくなります」という部分を書きかえてみてください。

2.上の文字を全て選択し、右クリックでコピーして、日記やページ作成などの入力画面にはりつければ文字の大きさを変えることができます。

※size="サイズ"の色の部分を1～7の数字に変えると文字の大きさを変えることができます。
↓のように、1がもっとも小さく7がもっとも大きいサイズとなります。

１２３４５６７

※また、見出しの文字のサイズはタグで変更することもできます。
この場合、サイズの指定はとがもっとも大きくなり、
とでくくった場合がもっとも小さくなります。

１２３４５６

[完成例]

ここから先が＜font size="7"＞大きく＜/font＞なります。

と書くと...

ここから先が大きくなります。

と文字がサイズを変えて表示されます。

●文字を太くしたい

[ 表示例 ]　文章を「太字で」表示する

[HTMLタグ] 文字を＜b＞「太字」＜/b＞で表示する

1. 太くしたい文字を＜b＞と＜/b＞でくくると、その文字を太く表示することができます。

下の「太くなります」とかかれた部分を好きな文章に書きかえれば、太い文字で文章を表示することができます。

2.上の文字を全て選択し、右クリックでコピーして、日記やページ作成などの入力画面にはりつければ、文字を太くして表示することができます。

[完成例]

ここから先が＜b＞太く＜/b＞なります。

と書くと...

ここから先が太くなります。

のように文字が太くなって表示されます。

●文字をセンタリング(中央揃え)したい

[ 表示例 ]　文字を↓

「センタリングする」

[HTMLタグ] ＜center＞「センタリングする」＜/center＞

1.センタリングしたい文字を＜center＞と＜/center＞でくくると、文字をセンタリングすることができます。

下の「中央に表示されます」という部分を書きかえてみてください。

2.上の文字を全て選択し、右クリックでコピーして、日記やページ作成などの入力画面にはりつければ文字をセンタリングすることができます。

[完成例]

＜center＞中央に表示されます。＜/center＞

と書くと...

中央に表示されます。

と文字が中央揃えになって表示されます。

●文字を斜体(ななめに傾けて)で表示したい

[ 表示例 ]　文章を「斜体で」表示する

[HTMLタグ] 文字を＜i＞「斜体で」＜/i＞で表示する

1. 斜体にしたい文字を＜i＞と＜/i＞でくくると、その文字を斜体にすることができます。

下の「斜体になります」とかかれた部分を好きな文章に書きかえれば、文章を斜体にすることができます。

2.上の文字を全て選択し、右クリックでコピーして、日記やページ作成などの入力画面にはりつければ文字を斜体にして表示することができます。

[完成例]

ここから先が＜i＞斜体に＜/i＞なります。

と書くと...

ここから先が 斜体に なります。

のように文字が斜体になって表示されます。

●文字にアンダーライン(下線)をつけたい

[ 表示例 ]　文章に「アンダーライン」をつける

[HTMLタグ] 文字に＜u＞「アンダーライン」＜/u＞をつける

1. アンダーラインしたい文字を＜u＞と＜/u＞でくくると、
その文字にアンダーラインをつけられます。

下の「アンダーラインがつきます」とかかれた部分を好きな文章に書きかえれば、文章にアンダーラインをつけることができます。

2.上の文字を全て選択し、右クリックでコピーして、日記やページ作成などの入力画面にはりつければアンダーラインをつけることができます。

[完成例]

ここから先が＜u＞アンダーラインに＜/u＞なります。

と書くと...

ここから先がアンダーラインになります。

のように文字にアンダーラインがついて表示されます。

●文字に取り消し線をつけたい

[ 表示例 ]　文字に「取り消し線」をつける

[HTMLタグ] 文字に＜s＞「取り消し線」＜/s＞をつける

1. 取り消し線をつけたい文字を＜s＞と＜/s＞でくくると、その文字に取り消し線がつけられます。

下の「取り消し線がつきます」とかかれた部分を好きな文章に書きかえれば、文章に取り消し線をつけることができます。

2.上の文字を全て選択し、右クリックでコピーして、日記やページ作成などの入力画面にはりつければ、文章に取り消し線をつけて表示することができます。

[完成例]

ここから先に＜s＞取り消し線が＜/s＞つきます。

と書くと...

ここから先に ~~取り消し線が~~ つきます。

のように文字に取り消し線がついて表示されます。

●文字をテロップのように動かして表示したい

[ 表示例 ]　文字を↓

「テロップのように動かす」

[HTMLタグ] 文字を↓＜marquee＞「テロップのように動かす」＜/marquee＞

※このＨＴＭＬタグは、利用者の環境によっては正常に動作しない場合があります。(Internet Explorerのみで動作し、Netscape Navigator では動作しません。)

1.テロップのように動かしたい文字を＜marquee＞と＜/marquee＞でくくると、文字を動かして表示することができます。

下の「テロップのように動きます」という部分を書きかえてみてください。

2.上の文字を全て選択し、右クリックでコピーして、日記やページ作成などの入力画面にはりつければ、文字をテロップのように動かせます。

[完成例]

＜marquee＞テロップのように動きます。＜/marquee＞

と書くと...

テロップのように動きます。

と文字が動いて表示されます。

●表を書きたい

[ 表示例 ]　

ショッピング	楽天市場
ホームページ	楽天広場

1.表を書くには＜table＞を使用します。＜tr＞と＜/tr＞でくくられた横の部分が行となり＜td＞と＜/td＞でくくられた部分が縦の列となります。これらを＜table＞と＜/table＞でくくると、表として表示されます。

※＜/table＞などの終了タグを書き忘れた場合、ページが表示されない場合があるのでご注意ください。

※border="数字"の部分は表の線の太さになります。

[完成例]

＜table border="1"＞
＜tr＞
＜td＞1行目の1列目＜/td＞＜td＞1行目の2列目＜/td＞＜td＞1行目の3列＜/td＞＜/tr＞
＜tr＞
＜td＞2行目の1列目＜/td＞＜td＞2行目の2列目＜/td＞＜td＞2行目の3列目＜/td＞
＜/tr＞
＜/table＞

と書くと...