ＨＴＭＬを覚えたい～テキスト編・実践ページ

★　実践ページでは、ＨＴＭＬの本を参考にして実際に試してみたことをまとめています ★ ホームページを作ってみよう Ⅲ ★

◆　ＨＴＭＬのお勉強　ＨＴＭＬを覚えたい・テキスト編　◆　←　こちらも見てね♪

お知らせ　・・・　2007/04/06　スクロール（マーキー）の動きの速さを調節する方法をＵＰ♪

動きが比較できるように作ったので、結構おもしろいよ　（スクロール・下から3番目の欄だよ↓）

※　スクロールの欄での動く部分は、太字にして見やすくしてます

☆ 07/11/11　ページの一番下からこの表のＴＯＰへジャンプするようにしたよ♪

文字（フォント）

　　　　　テキスト関係のいろいろなタグを使って、それぞれ試してみました

　　　　　　　※　このページでは、基準フォントを１２ポイント「３」に設定しています

　★　絶対値

　基準サイズに関係なく

　１～７を指定します

◎ １・・・　ここあ 　ここあ　　　（１・8ポイント）

◎ ２・・・　ここあ 　ここあ　　　（２・10ポイント）

◎ ３・・・　ここあ 　ここあ　　（３・12ポイント）

◎ ４・・・　ここあ 　ここあ　　（４・14ポイント）

◎ ５・・・　ここあ 　ここあ　（５・18ポイント）

◎ ６・・・　ここあ 　ここあ　（６・24ポイント）

◎ ７・・・　ここあ 　ここあ（７・36ポイント）

　★　相対値

　あらかじめ設定しておいたフォントの大きさを基準にして

　段階的に数値を指定

　＋１～＋６（大きく）

　－１～－６（小さく）

※　テキストサイズ

全７段階なので、その範　囲内で指定できます

基準が「３」の場合

＋４から－２まで指定

●　このページの基準サイズは「３」（12ポイント）に設定しているので

　　　　　＋４から－２まで指定できることになります

◎ ＋１・・・　ここあ　ここあ　（４・14ポイント）

◎ ＋２・・・　ここあ　ここあ　（５・18ポイント）

◎ ＋３・・・　ここあ　ここあ（６・24ポイント）

◎ ＋４・・・　ここあ　ここあ（７・36ポイント）

◎ ＋５・・・　ここあ　ここあ

◎ ＋６・・・　ここあ　ここあ

◎ －１・・・　ここあ　　ここあ　　（２・10ポイント）

◎ －２・・・　ここあ　ここあ　　　（１・8ポイント）

◎ －３・・・　ここあ ここあ

◎ －４・・・　ここあ ここあ

◎ －５・・・　ここあ ここあ

◎ －６・・・　ここあ ここあ

　　　※　試しに、＋５と＋６、－３から－６を指定してみたけど

　　　　　それ以上にもそれ以下にもなりませんでした

　　　　　　やっぱり７段階しかダメなんですね・・・ (^_^ゞ

　★　拡　大

　基準サイズより１段階

　　大きくなります

　●　＜ＢＩＧ＞というタグを使います

<big>ここあ</big>　　　ここあ　　（12ポイントの１段階大きい、14ポイントになります）

※　ここあ と同じ意味の指定になります

　★　縮　小

　基準サイズより１段階

　　小さくなります

　●　＜ＳＭＡＬＬ＞というタグを使います

ここあ　　ここあ　　　（12ポイントの１段階小さい、10ポイントになります）

※　ここあ と同じ意味の指定になります

　★　太　字

　●　＜Ｂ＞

ここあ ・・・ ここあ

　★　斜　体

　●　＜Ｉ＞

ここあ　・・・　ここあ

　★ 上付き文字

　●　＜ＳＵＰ＞ 　　※　「ここあ」の右上に、文字や数字をを付けてみます

ここあホームページ　・・・　ここあ^{ホームページ}

ここあ２　・・・　ここあ^２

　★ 下付き文字

　●　＜ＳＵＢ＞ 　　※　「ここあ」の右下に、文字や数字をを付けてみます

ここあホームページ　・・・　ここあ_{ホームページ}

ここあ２　・・・　ここあ_２

　★ 取り消し線

　●　＜Ｓ＞　または　＜ＳＴＲＩＫＥ＞

<s>ここあ</s>　・・・　~~ここあ~~

<strike>ここあ</strike>　・・・　~~ここあ~~

　★ 下　線

　●　＜Ｕ＞

ここあ　・・・　ここあ

　★　ル　ビ

　　（読みがな）

　●　＜ＲＵＢＹ＞

　　＜ＲＵＢＹ＞読みがなを付けるテキスト（文字や文章）

　　＜ＲＰ＞（　＜／ＲＰ＞　

　　＜ＲＴ＞読みがな＜／ＲＴ＞

　　＜ＲＰ＞）＜／ＲＰ＞

　　＜／ＲＵＢＹ＞

　　　※　読みがなを、（　と）ではさんで、＜ＲＵＢＹ＞非対応のブラウザで

　　　　　表示させるようにします

　≪　記述例　≫

向日葵(ひまわり)　（見やすいように１６ポイントにしてます）

　★　スクロール

左または右への移動

　●　＜ＭＡＲＱＵＥＥ　ＤＩＲＥＣＴＩＯＮ＝ ”ＬＥＦＴまたはＲＩＧＨＴ ” ＞

　　移動させるテキスト＜／ＭＡＲＱＵＥＥ＞

　　◎　ＬＥＦＴ　・・・　左に向かって移動　　右　⇒　左

　　◎　ＲＩＧＨＴ　・・・　右に向かって移動　　左　⇒　右

　≪　記述例　≫

<marquee direction="right">左から右へ移動しま～っす (^o^)丿</marquee>

　　　　左から右へ移動しま～っす (^o^)丿

　　　※　ＤＩＲＥＣＴＩＯＮを指定しない場合は、右から左への移動となります　

　★　スクロール

移動する範囲に色を付ける

　●　＜ＭＡＲＱＵＥＥ　ＢＧＣＯＬＯＲ＝ ”カラーネームまたは＃数値 ” ＞

移動させるテキスト＜／ＭＡＲＱＵＥＥ＞

　≪　記述例　≫

<marquee bgcolor="#dcdcdc">右から左へ移動しま～っす (^o^)丿</marquee>

右から左へ移動しま～っす (^o^)丿

　★　スクロール

移動の仕方に変化を付ける

　●　＜ＭＡＲＱＵＥＥ　ＢＥＨＡＶＩＯＲ＝ ”変化をつける属性値 ” ＞

　　移動させるテキスト＜／ＭＡＲＱＵＥＥ＞

　　動きに変化をつける属性値

　　　◎　ＳＣＲＯＬＬ　・・・　一定の方向に、同じ動き

　　　◎　ＳＬＩＤＥ　・・・　指定した方向に動いて、画面の端で止まる

　　　◎　ＡＬＴＥＲＮＡＴＥ　・・・左右を行ったり来たりする

　≪　記述例　≫

◆ <marquee behavior="scroll">一定の方向に、同じ動き (^o^)丿</marquee>

　一定の方向に、同じ動き (^o^)丿

◆ <marquee direction="right" behavior="slide">指定した方向に動き、画面の端で止まる (^o^)丿</marquee>

指定した方向に動き、画面の端で止まる (^o^)丿　

◆ <marquee behavior="alternate">左右行ったり来たりを繰り返す (^o^)丿</marquee>

　左右行ったり来たりを繰り返す (^o^)丿

New！

★　スクロール　

移動の速さを調整

　●　移動距離の間隔を、ピクセル数（属性値）で、動きの速さを指定する方法

　　　＜ＭＡＲＱＵＥＥ　ＳＣＲＯＬＬＡＭＯＵＮＴ＝ ” 移動距離の間隔を指定するピクセル数 ” ＞

　　移動させるテキスト＜／ＭＡＲＱＵＥＥ＞

初期設定では「約６ピクセル」になっているそうですが、数字が大きくなると速く、小さくなると遅くなります

　≪　記述例　≫

◆ <marquee scrollamount="1">テキストの動きの速さをピクセル数「１」に指定　（^_^;）ちょっと遅すぎだよぉ～</marquee>

　　テキストの動きの速さをピクセル数「１」に指定　（^_^;）ちょっと遅すぎだよぉ～

◆ <marquee>指定しないと、だいたいこの速さだそうな・・・　(^o^) b</marquee>

　　指定しないと、だいたいこの速さだそうな・・・　(^o^) b

◆ <marquee scrollamount="20">テキストの動きの速さをピクセル数「２０」に指定 (≧∀≦) キャ～、これって速すぎ～っ！</marquee>

　　テキストの動きの速さをピクセル数「２０」に指定　(≧∀≦) キャ～、これって速すぎ～っ！

　★　文字の点滅

　　（ブリンク）

　●　＜ＢＬＩＮＫ＞点滅させるテキスト＜／ＢＬＩＮＫ＞

　このタグは、ＮｅｔＳｃａｐｅ独自のタグということで、「ＨＴＭＬを覚えたい～テキスト編」で試した時は、編集画面では点滅していたのですが、出来上がったページにアクセスして確認したら、点滅してませんでした

　　≪　記述例　≫

　　　　「 ここあ」で試してみます

<blink>

こ

</blink>

<blink>

こ

</blink>

<blink>

あ

</blink>

　　ここあ

　　★　私のブラウザはＩＥなので、やはり点滅はしていませんでした (T_T)

　　　　ＮｅｔＳｃａｐｅでご覧の方はどうでしょうか？

★　見　出　し

　「Ｈ」は、ヘッダーという意味です

　　　＜Ｈ１～６＞見出しにするテキスト（文字）＜／Ｈ＞

　　　　　表示は、文字が太字になって、前後が１行の空きの表示になります

　　　　　「Ｈ」の後にくる数字は、見出しの大きさを表す数字で、１から６まで指定でき

　　　　　大きさ（ヘッダーサイズ）は、「 １＞６ 」というように、数字が大きくなるほど

　　　　　サイズが小さくなります

※　フォントサイズを大きくして太字にした場合と、見た目は変わりませんが、このタグを使うことによって

そのテキストが、「見出し」であると定義（指定）することになります

ブラウザによっては、見出しタグ（Ｈ）を解析して、自動的に目次を作成するものもあるそうなので

この点などから、見出しである事を定義する意味があるように思われます

　　≪　記述例　≫

　　　　「ホームページを作ってみよう Ⅲ 」で試してみます

●　<h1>ホームページを作ってみよう Ⅲ</h1>

　ホームページを作ってみよう Ⅲ

●　<h2>ホームページを作ってみよう Ⅲ</h2>