ブログの杜 （Yahoo!ブログ作成講座）

HTMLでルビ（よみがな）を使う方法

ルビの基本

ルビを使う事によって読み仮名を表示できるので
難しい漢字を読めるようにしてあげられる事が出来るようになります。

ルビの基本要素（タグ）

<ruby> 〜 </ruby> ルビのを使う範囲 
<rb> ルビ対象文字列 
<rt> ルビ対象の読み仮名 
<rp> ルビ未対応の区切り記号 

ルビは<ruby> 〜 </ruby>だけでは意味がないので
以下のサンプルを参照にして下さい

ルビの使い方

サンプルソース

<ruby><rb>森羅万象<rp>
<rt>しんらばんしょう<rp>
</ruby>

ルビを使ったサンプルはこちら
http://blogs.yahoo.co.jp/kagemusyamk1/26908738.html

ルビの使い方（応用）

<FONT>を使って文字の大きさを変更する事も出来る

サンプルソース

<FONT SIZE="4">
<ruby><rb>森羅万象<rp>
<rt>しんらばんしょう<rp>
</ruby>
</FONT>

ルビを使ったサンプルはこちら
http://blogs.yahoo.co.jp/kagemusyamk1/26908738.html

ルビの使い方サンプル

ルビを使うと下記の様に、読み仮名を使えるようになる

■ ルビを使って読み仮名をつける ■

森羅万象
しんらばんしょう


- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
■ ルビを使って、さらに文字の大きさを指定 ■


森羅万象
しんらばんしょう

HTMLで文字のスクロール（サンプル）

HTMLでは文字を動かす事が出来ます。
ここのページでは動作を確認だけのサンプルですから、詳細のソースの解説はこちら
http://blogs.yahoo.co.jp/kagemusyamk1/25144874.html

■ HTMLで文字のスクロール（サンプル） ■

1.スクロールの基本
スクロール要素のみの属性なし
基本動作で無制限に同じ動作を繰り返す
要素「marquee」

基本のスクロール

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

2.スクロールの回数を決める
ループの回数を終えると文字が消えるので注意
属性「loop="○"」

３回だけのスクロール

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

3.スクロール後に停止
スクロールを終えると止める事が出来るので重宝できる
属性「behavior="slide"」

スクロール後停止

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

4.左右にスクロールさせる
左へ右へと無限に繰り返すので、結構鬱陶しい所もあるので注意
属性「behavior="alternate"」

左右に往復

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

5.逆方向へスクロール
普通は右から左へ流れますが「right」で右方向へ流す事が出来ます。
属性「direction="right"」

逆方向へスクロール

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

6. スクロールの速度調整
○の中に「1〜1000」までの数値を入れる、数値が低いと速度が上がる
属性「scrolldelay="○"」

速いスクロール

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

7.スクロール範囲の指定（横幅）
横幅を決める事によってスクロール範囲を決められる
属性 「width="○"」（パーセントで決める事も可能）

スクロール範囲50%

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

8.スクロールの背景色を変更
スクロールさせる部分のみの色を変える事が出来ます。
属性 「bgcolor="○"」（RGBの16進数か英名で色を決める）

赤い背景

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

■ HTMLでスクロール応用（サンプル） ■

３回だけのスクロール後停止

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


右にふらふら


- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


下から上へ縦スクロール


上から下へ縦スクロール

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


上から下へ縦スクロール

下から上へ縦スクロール

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


灰色の背景で大きく太く白字

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

点滅

HTMLでいろいろな文字のスクロール（タグの説明）

HTMLでいろいろな文字のスクロール

MARQUEE スクロール要素
HTMLにしては動きのある表現が出来ますが 、あまり使いしすぎると見難くなってしまいます。
ちょっとした、お遊び気分のワンポイント程度にとどめるといいでしょう

[http://blogs.yahoo.co.jp/kagemusyamk1/26233339.html ]　←動作サンプルページはこちら

MARQUEE要素に入れる属性

横幅や縦幅を指定

width=" " スクロールさせる横幅指定
height=" "　スクロールさせる縦幅指定

---

directionでスクロール方向を指定

direction="right" 右へスクロール （指定無しの時と同じ）
direction="left" 左へスクロール
directon="up" 上へスクロール
directon="down" 下へスクロール

---

behaviorで動きを指定

behavior="scroll" 一定方向に同じ動きを繰り返す（指定無しの時と同じ）
behavior="slide" 進行方向端で止まる
behavior="alternate" 上下・左右　指定方向に往復を繰り返す

---

その他

loop=" " スクロールさせる回数、指定無しは無限）
scrolldelay=" " スクロールの速さ指定（1〜1000　数値が低いと速度が高くなる）
bgcolor=" " スクロールさせる背景色の指定

各種サンプル

基本要素

サンプル

<MARQUEE>文字のスクロール</MARQUEE>

---

loop="1"を使ってスクロールさせる回数を決める

サンプル

<MARQUEE loop="3">３回のスクロール</MARQUEE>

---

loop="1" behavior="slide"を使ってスクロール後停止

サンプル

<MARQUEE loop="3" behavior="slide">３回のスクロール後停止</MARQUEE>

---

scrolldelay="1"（1〜1000）を使って速さの速度指定をする

サンプル

<MARQUEE scrolldelay="5">速いスクロール</MARQUEE>

---

behavior="alternate"を使って左右に往復

サンプル

<MARQUEE behavior="alternate">左右に往復</MARQUEE>

---

direction="right"逆方向へスクロール

サンプル

<MARQUEE direction="right">逆方向へスクロール</MARQUEE>

---

'width="100%を使ってスクロールさせる幅を指定
横の幅を決められ、パーセント「％」やピクセルで指定可能

サンプル

パーセントで指定
<MARQUEE width="80%">スクロール範囲の指定</MARQUEE>
<MARQUEE width="50%">スクロール範囲の指定</MARQUEE>

ピクセルで指定
<MARQUEE width="200">スクロール範囲の指定</MARQUEE>

---

direction="up" height="50"とdirection="right"を使ってふらふらさせる

サンプル

<MARQUEE behavior="alternate" direction="up" height="50">
<MARQUEE direction="right">右にふらふら</MARQUEE>
</MARQUEE>

---

スクロールの工夫で点滅させて見せるようにも出来ます。
各数値をいじって上手に点滅させるようにしましょう

サンプル

<MARQUEE width="120" scrollamount="100" scrolldelay="500">点滅</MARQUEE>
</MARQUEE>

HTMLでスクロール（サンプル）

HTMLでは文字を動かす事が出来ます。
ここのページでは動作をみてもらうだけの物ですから、詳細のソースの解説はこちら
http://blogs.yahoo.co.jp/kagemusyamk1/25144874.html

■ HTMLでスクロール（サンプル） ■

1.スクロールの基本
スクロール要素のみの属性なし
基本動作で無制限に同じ動作を繰り返す
要素「marquee」

基本のスクロール

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

2.スクロールの回数を決める
ループの回数を終えると文字が消えるので注意
属性「loop="○"」

３回だけのスクロール

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

3.スクロール後に停止
スクロールを終えると止める事が出来るので重宝できる
属性「behavior="slide"」

スクロール後停止

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

4.左右にスクロールさせる
左へ右へと無限に繰り返すので、結構鬱陶しい所もあるので注意
属性「behavior="alternate"」

左右に往復

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

5.逆方向へスクロール
普通は右から左へ流れますが「right」で右方向へ流す事が出来ます。
属性「direction="right"」

逆方向へスクロール

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

6. スクロールの速度調整
○の中に「1〜1000」までの数値を入れる、数値が低いと速度が上がる
属性「scrolldelay="○"」

速いスクロール

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

7.スクロール範囲の指定（横幅）
横幅を決める事によってスクロール範囲を決められる
属性 「width="○"」（パーセントで決める事も可能）

スクロール範囲50%

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

8.スクロールの背景色を変更
スクロールさせる部分のみの色を変える事が出来ます。
属性 「bgcolor="○"」（RGBの16進数か英名で色を決める）

赤い背景

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

■ HTMLでスクロール応用（サンプル） ■

３回だけのスクロール後停止

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


右にふらふら


- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


下から上へ縦スクロール


上から下へ縦スクロール

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


上から下へ縦スクロール

下から上へ縦スクロール

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


灰色の背景で大きく太く白字

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

点滅