【初心者必見】varタグとは？varタグの基本的な使い方から応用まで徹底解説

こんにちは、

今回はvarタグのお話をします。

varタグってたまに出てきても、数式とか難しい文章に使われているイメージ。

他にも使えないのかな？

そもそもvarタグって何・・？

と悩んだこともあるのではないでしょうか。

今回は、varタグの

・基本的な使い方
・応用的な使い方

について説明します。

目次 [非表示]

1 varタグとは
2 varタグの基本的な使い方
- 2.1 varタグの使い方
3 varタグの応用的な使い方
- 3.1 コンピュータ・プログラムのソースコード
4 まとめ

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>で変数にしたいテキストを囲みます。開始タグと終了タグは省略できません。

テキスト内で変数を使用する例

<html lang="ja">
  <head>
    <title>サンプルページ</title>
  </head>
  <body>
    <div class="main">
<var>w</var> は幅、<var>h</var> は高さを表します。
      
    </div>
  </body>
</html>

<head>

<title>サンプルページ</title>

</head>

<body>

<var>w</var> は幅、<var>h</var> は高さを表します。

</div>

</body>

</html>

このように表示されます。

w は幅、h は高さを表します。

wとhが変数になりましたね。

では、数式のサンプルも見てみましょう。

<var>x</var> = <var>y</var> + 5

1	<var>x</var> = <var>y</var> + 5

x = y + 5

このようにｘとyが変数になりました。

装飾の目的でvarタグを使うことはありません。<em><i><q>など適切なタグを使ってください。

一般的なブラウザでは、斜体で表示されますが、文字のスタイルは、スタイルシートで上書きして変更することができます。

例えば、イタリック体からノーマルのスタイルに戻したい場合は、次のスタイルを指定します。

var { font-style: normal; }

1	var { font-style: normal; }

varタグと類似・関連する要素

code

コンピューター言語のコードを表します。

codeタグはコードの単一のフレーズや1行のみを表し、複数行のコードを表すには、codeタグを preタグの中に入れてください。

<code 属性名="ここに値を指定"></code>

1	<code 属性名="ここに値を指定"></code>

varタグと一緒に使うことができます。

kbd

kbdタグはキーボードなど、入力テキストを表します。音声入力を表すこともできます。

<kbd 属性名="ここに値を指定"></kbd>

1	<kbd 属性名="ここに値を指定"></kbd>

kbdタグ内にsampタグを使用すると、コンピュータのシステムやプログラムから出力した入力内容であることを示します。

新規文章を作成するには<kbd><kbd class="key">Ctrl</kbd> + <kbd class="key">N</kbd></kbd>を押してください。

1	新規文章を作成するには<kbd><kbd class="key">Ctrl</kbd> + <kbd class="key">N</kbd></kbd>を押してください。

このように表示されます。

新規文章を作成するにはCtrl + Nを押してください。

samp

コンピュータープログラムからのサンプル出力テキストであることを示します。

<samp 属性名="ここに値を指定"></samp>

1	<samp 属性名="ここに値を指定"></samp>

sampタグの中で kbdタグを使用することで、ユーザーが入力した文字列を含んだ例を表現することができます。

<p><samp>Error: Page not found.</samp></p>

1	<p><samp>Error: Page not found.</samp></p>

このように表示されます。

Error: Page not found.

sub 下付き文字

文字を下付きにしたいときに使うタグです。varタグ内で使用することができます。

<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>)です。

<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>)です。

このように表示されます。

i 番目の座標は、
(x_i,y_i)です。
例えば、5番目の座標は、
(x₅,y₅)です。

sup 上付き文字

文字を上付きにしたいときに使うタグです。varタグ内で使用することができます。

f(<var>x</var>)=<var>x</var><sup><var>n</var></sup>

1	f(<var>x</var>)=<var>x</var><sup><var>n</var></sup>

このように表示されます。

f(x)=xⁿ

varタグの応用的な使い方

コンピュータ・プログラムのソースコード

コンピュータ・プログラムのソースコードに使うことが良くあります。

JavaScriptのコードを例にしました。codeタグ内で使用しています。

<pre>
<code>&lt;script type="text/javascript"&gt;
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> + "より小さい。&lt;br&gt;" );
}
&lt;/script&gt;</code>
</pre>

<pre>

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要素

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。