スポンサード リンク
sup要素
sup要素を使えば上付き文字を表示することができます。数式や注釈などにつかえます
使い方(書式)
<sup></sup>
sup要素
対応ブラウザ | |
要素の種類 | インライン要素 |
内容となる要素 | インライン要素、テキスト |
属性 | 説明 |
共通属性 | html共通属性 |
イベント属性 | htmlイベント属性 |
数式
html
2 + 2<sup>3</sup>
実際の表示
2 + 23注釈
html
注釈をつける<sup>注1</sup>
実際の表示
注釈をつける注1上付き文字をリンクにする
html
注釈をつける<sup><a href="#bottom">注1</a></sup>
実際の表示
注釈をつける注1cssでスタイルを指定
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