こんにちは、
今回はvarタグのお話をします。
varタグってたまに出てきても、数式とか難しい文章に使われているイメージ。
他にも使えないのかな？
そもそもvarタグって何・・？
と悩んだこともあるのではないでしょうか。
今回は、varタグの
・応用的な使い方
について説明します。
目次
varタグとは
varタグの読み方
「var」とは「variable（ヴァリアブル）」の略で「バー（またはヴァー）」と読みます。日本語の意味は「変数」という意味です。
varタグの説明
varタグは、プログラムなどのソースコードにおける変数または引数などに使います。
数式やプログラム内の変数、定数、関数パラメータ、などに使うことができます。
一般的なブラウザでは、斜体で表示されます。
varタグで利用できる属性
varタグでは以下の属性を使うことができます。
| 属性 | 説明 |
|---|---|
| グローバル属性 | グローバル属性とは、すべての要素で使用することができる属性のことです。HTML5から登場した概念で、それまでのバージョンでも利用されていた属性と、HTML5以降に追加されたいくつかの属性から成ります。
以下は代表的な属性です。 |
| style | 要素に直接スタイル（見た目）を指定するための属性です。 |
| class | 要素にCSSでスタイル（見た目）を適用するためによく使われる属性です |
| id | class属性同様、要素にCSSでスタイルを適用するためによく使われます。同じid属性はページ内で1回しか使えません。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| nternet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
varタグの基本的な使い方
では早速varタグの使い方を見てみましょう。
varタグの使い方
<var></var>で変数にしたいテキストを囲みます。開始タグと終了タグは省略できません。
テキスト内で変数を使用する例
|
1 2 3 4 5 6 7 8 9 10 11 |
<html lang="ja"> <head> <title>サンプルページ</title> </head> <body> <div class="main"> <var>w</var> は幅、<var>h</var> は高さを表します。 </div> </body> </html> |
このように表示されます。
wとhが変数になりましたね。
では、数式のサンプルも見てみましょう。
|
1 |
<var>x</var> = <var>y</var> + 5 |
このようにｘとyが変数になりました。
装飾の目的でvarタグを使うことはありません。<em><i><q>など適切なタグを使ってください。
一般的なブラウザでは、斜体で表示されますが、文字のスタイルは、スタイルシートで上書きして変更することができます。
例えば、イタリック体からノーマルのスタイルに戻したい場合は、次のスタイルを指定します。
|
1 |
var { font-style: normal; } |
varタグと類似・関連する要素
code
コンピューター言語のコードを表します。
codeタグはコードの単一のフレーズや1行のみを表し、複数行のコードを表すには、codeタグを preタグの中に入れてください。
|
1 |
<code 属性名="ここに値を指定"></code> |
varタグと一緒に使うことができます。
kbd
kbdタグはキーボードなど、入力テキストを表します。音声入力を表すこともできます。
|
1 |
<kbd 属性名="ここに値を指定"></kbd> |
kbdタグ内にsampタグを使用すると、コンピュータのシステムやプログラムから出力した入力内容であることを示します。
|
1 |
新規文章を作成するには<kbd><kbd class="key">Ctrl</kbd> + <kbd class="key">N</kbd></kbd>を押してください。 |
このように表示されます。
samp
コンピュータープログラムからのサンプル出力テキストであることを示します。
|
1 |
<samp 属性名="ここに値を指定"></samp> |
sampタグの中で kbdタグを使用することで、ユーザーが入力した文字列を含んだ例を表現することができます。
|
1 |
<p><samp>Error: Page not found.</samp></p> |
このように表示されます。
sub 下付き文字
文字を下付きにしたいときに使うタグです。varタグ内で使用することができます。
|
1 2 3 4 |
<var>i</var> 番目の座標は、 (<var>x<sub><var>i</var></sub></var>,<var>y<sub><var>i</var></sub></var>)です。 例えば、5番目の座標は、 (<var>x<sub>5</sub></var>,<var>y<sub>5</sub></var>)です。 |
このように表示されます。
(xi,yi)です。
例えば、5番目の座標は、
(x5,y5)です。
sup 上付き文字
文字を上付きにしたいときに使うタグです。varタグ内で使用することができます。
|
1 |
f(<var>x</var>)=<var>x</var><sup><var>n</var></sup> |
このように表示されます。
varタグの応用的な使い方
コンピュータ・プログラムのソースコード
コンピュータ・プログラムのソースコードに使うことが良くあります。
JavaScriptのコードを例にしました。codeタグ内で使用しています。
|
1 2 3 4 5 6 7 8 9 |
<pre> <code><script type="text/javascript"> var <var>varA</var> = 3; var <var>varB</var> = 5; if ( <var>varA</var> < <var>varB</var> ) { document . write( <var>varA</var> + "は" + <var>varB</var> + "より小さい。<br>" ); } </script></code> </pre> |
このように表示されます。
<script type="text/javascript">
var varA = 3;
var varB = 5;
if ( varA < varB ) {
document . write( varA + "は" + varB + "より小さい。<br>" );
}
</script>まとめ
いかがでしたか？
今回は、varタグの
・応用的な使い方
について説明しました。
初心者の方には少し難しいと感じるかもしれません。しかし、よく出てくるタグですので、覚えておきましょう。
参考文献：HTML5入門 ｜var要素 、syncer ｜var要素
