sup要素

TOPページに戻る > html入門

スポンサード リンク

sup要素

sup要素を使えば上付き文字を表示することができます。数式や注釈などにつかえます

使い方(書式)

<sup></sup>

sup要素

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
要素の種類 インライン要素
内容となる要素 インライン要素、テキスト

属性 説明
共通属性 html共通属性
イベント属性 htmlイベント属性

数式

html

2 + 2<sup>3</sup>

実際の表示

2 + 23

注釈

html

注釈をつける<sup>注1</sup>

実際の表示

注釈をつける注1

上付き文字をリンクにする

html

注釈をつける<sup><a href="#bottom">注1</a></sup>

実際の表示

注釈をつける注1

cssでスタイルを指定

html

クラス名は自由に変えてください。hogeがclass名です
注釈をつける<sup class="hoge">注1</sup>

css

.hoge{ color: #FF6600; }        /* 文字色をオレンジに指定 */
.hoge2 { font-weight: bold; } /* 文字の太さを太くする */
.hoge3 { border: solid 1px #FF9900; } /* 枠線を表示 */
.hoge4 { font-size: 1.2em; }    /* 文字の大きさを指定 */
.hoge5 { background-color: #FFEFD5; } /* 背景色を指定 */

実際の表示

文字色 color: #FF6600;

注釈をつける注1

文字の太さ font-weight: bold;

注釈をつける注1

枠線を表示 border: solid 1px #FF9900;

注釈をつける注1

文字の大きさ font-size: 1.2em;

注釈をつける注1

背景色を指定 background-color: #FFEFD5;

注釈をつける注1

その他のデザインはcssでスタイルを指定



※bottomに移動しました


(C)2012 ホームページ作成無料