[32] その他のプログラム関連要素 kbd と samp と var

<kbd>は、キーボードから入力する文字である事を示します。
<samp>は、出力されるサンプルを表示する場合に使います。
<var>は、変数や引数を示します。

これらは前々回の<code>とともに、プログラム関連のテキストを表示するための要素です。

使用する要素 <kbd> 〜 </kbd>
<samp> 〜 </sanp>
<var> 〜 </var>

「kbd」はkeyboard(キーボード)の略。「samp」はsample(サンプル)の略。
「var」はvariable(変数)の略。変数とはコンピュータプログラムで一定の範囲の中で保持される数字や文字列の事を言います。JavaScriptとかFlaのActionScriptとか見た事がある人はわかりますよね。

正直言って私は<kbd><samp><var>要素を使う事は、めったに(っていうか全然)ありません。
プログラム系のサイトを作る人でなければ、あんまり使わない要素かと…。
ですから今回はさらっと「こんな要素もあります」的な解説です。ご了承ください!(笑)。

<kbd>を使ってみよう

<kbd>は、キーボードから入力する文字である事を示します。

まずはプレビューを見てみましょう。
<kbd>で囲んだ文字は、<code>のときと同じで等幅フォントになります。

ユーザーIDの欄に guest と入力してください。

ソースはこちらです。

<p>
ユーザーIDの欄に <kbd>guest</kbd> と入力してください。
</p>

<samp>を使ってみよう

<samp>は、出力されるサンプルを表示する場合に使います。

こちらもまずプレビューを見てみましょう。<samp>で囲んだ文字も、等幅フォントになります。

間違ったIDを入力すると次のようなメッセージが表示されます。
Error : ユーザーIDが違います

ソースはこちらです。

<p>
間違ったIDを入力すると次のようなメッセージが表示されます。<br>
<samp>Error : ユーザーIDが違います</samp>
</p>

<var>を使ってみよう

<var>は、変数や引数を示します。

こちらもまずプレビューです。 <var>で囲んだ文字はイタリックで表示されます。

これはウィンドウをスクロールさせるJavaScriptの一部です。
window.scrollTo(Math.floor(x / 1.4), Math.floor(y / 1.4));
変数には、横方向には x が、縦方向には y が使われています。

ソースはこちらです。

<p>
これはウィンドウをスクロールさせるJavaScriptの一部です。<br >
<code>window.scrollTo(Math.floor(x / 1.4), Math.floor(y / 1.4)); </code><br >
変数には、横方向には <var>x</var> が、縦方向には <var>y</var> が使われています。
</p>

次回予告

いかがでしたか? 誰か他の人が作ったHTMLを編集しているとき、<kbd><samp><var>といった要素が出てきたら、これが何だかわかればOK!…ってかんじです私は(笑)。

次回は、<wbr>を使ってみましょう。
<wbr>は、英語などでの長い単語で、改行しても良い位置をブラウザに指定する要素です。
また改行がらみの要素ですよ。<pre>要素のときは勝手に改行させない で、タイプしたとおりにプレビューさせましたが、こんどの<wbr>は、改行してもいい位置をあらかじめ決めといて、あとはブラウザに任せるという要素です。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2017/07 | 08
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.