A.T-MOON

contents

パンくずリスト

メッセージエリア

フォントの装飾A(HTMLタグ編)

メッセージエリア


<body>〜</body>の間の表示させたい部分にタグを挿入します。
これらの他にもスタイルシートを使っての文字の装飾、JavaScriptを使っての文字の装飾がありますので
それぞれ参考にしてみて下さい。


マーク 上付き文字 <sup>〜</sup>

上付きにしたい文字を<sup>〜</sup>で括ります。

黒の上付き文字 (通常の文字はコレです)
ページTOP
ひとつ前のページに戻る

マーク 下付き文字 <sub>〜</sub>

下付きにしたい文字を<sub>〜</sub>で括ります。

赤の下付き文字 (通常の文字はコレです)
ページTOP
ひとつ前のページに戻る

マーク 大きな文字 <big>〜</big>

大きめに表示させたい文字を<big>〜</big>で括ります。

茶色の大き目の文字 (通常の文字はコレです)
ページTOP
ひとつ前のページに戻る

マーク 小さな文字 <small>〜</small>

小さめに表示させたい文字を<small>〜</small>で括ります。

赤色の小さめの文字 (通常の文字はコレです)
ページTOP
ひとつ前のページに戻る

マーク 見出し <hA>〜</hA>

Aには1〜6の数字が入ります。
h1が一番上位で数字が大きくなるほど見出しのレベルが下がり文字の大きさも小さくなります。
タグで挟まれた部分は太字で表示され、前後に空白が入ります。


見出しレベル1の文字です


見出しレベル2の文字です


見出しレベル3の文字です


見出しレベル4の文字です


見出しレベル5の文字です


見出しレベル6の文字です

※当サイトはスタイルシートによってh1h6の文字を非表示にしていますので
サンプル文字は一部フォントサイズでしていますので予めご了承下さい。

<html>
 <head>
  <title>見出しを記述</title>
 </head>
 <body>
 <h1>
 見出し1
 </h1>

 </body>
</html>
ページTOP
ひとつ前のページに戻る

マーク 説明文を出す <font title="A">〜</font>

文字にカーソルをのせると説明文が出ます。

カーソルをのせてみてください

ページTOP
ひとつ前のページに戻る

マーク 触れると文字色変化
  <font onmouseover="this.style.color='A'" onmouseout="this.style.color='B'">〜</font>


Aにはマウスを乗せたときの色をカラーネームやカラーコードで指定します。
Bにはマウスを外したときの色をカラーネームやカラーコードで指定します。

オンマウスで青い文字に。離れるとグレイの文字にと変化。

ページTOP
ひとつ前のページに戻る

マーク 触れると背景色変化
<font onmouseover="this.style.backgroundColor='A'" onmouseout="this.style.backgroundColor='B'">〜</font>


Aにはマウスを乗せたときの色をカラーネームやカラーコードで指定します。
Bにはマウスを外したときの色をカラーネームやカラーコードで指定します。

オンマウスで背景がピンクに。離れると水色に変化。

ページTOP
ひとつ前のページに戻る

マーク 振り仮名をふる(ルビ) <font><ruby>A<rp>(</rp><rt>B</rt><rp>)</rp></ruby></font>
(IE5以降対応)
OPERAは横に()付で表示

Aに振り仮名を振りたい文字。
Bに振り仮名を記述します。

天上天下唯我独尊(てんじょうてんげゆいがどくそん)
ページTOP
ひとつ前のページに戻る

マーク 縦書き表示 <font style=writing-mode:tb-rl; height:A>
IE(IE5以降対応)
FFOXOPERAは横書きで表示

ココに文章を書き込みます。
IEの5.5以上に対応していますので
それ以外は横書きに表示されます。

ページTOP
ひとつ前のページに戻る
フォントの装飾@(HTMLタグ編)へ戻る前のページ