おふとんの人ホームページ教室 → HTMLやCSSで用いられる括弧

山括弧 < >

山括弧はタグで使われる

山括弧とは、「<」と「>」のことです。これは、「15.HTMLの記述方法(基礎編)」でも紹介したように、タグに用います。

例えば、段落を表す要素に「p」があります。これを

<p>

のように、山括弧で包むと、p開始タグになります。p終了タグは、pの前に「/(スラッシュ)」を入れたものです。このp開始タグと、p終了タグで挟まれた部分は、「段落です」という意味になります。

<p>ここには、何らかの段落が入ります。</p>

このように、HTMLタグが書かれていくと述べました。

山括弧の呼び方の提案

山括弧は英語で「アングルブラケット」と言い、「<」のことを正式には「左アングルブラケット」、「>」のことを「右アングルブラケット」と言います。ところが、これではとても長いので、<と>でブラケットなので、<を「ブラ」、>を「ケット」と呼ぶことを提案します。

私の仕事場での会話では、「このケットが全角になっている!」などと、「ブラ」と「ケット」を普段から分けて使っていますが、とても便利な呼び方なので、みなさん馴染まれたようです。この呼び方は、物理数学、特に量子力学で使われていますので、中には、すでに馴染みがある方もいらっしゃると思います。

<や>を文書中に直接書き込みたい場合

ここで注意しておかなければいけないことが、一つあります。それは、半角<や半角>を、文書の内容に直接書き込みたい場合も出てきます。そういったときは、<と書いてしまうと、ブラウザは「これはタグだな」と判断してしまい、画面表示結果に支障がおこります。そこで、<や>は、次のように文書中に書き込まなければなりません。

● 「<」の記述

&lt;

<

● 「>」の記述

&gt;

>

このようにブラウザが混乱してしまうような文字を、特殊文字と言い、中にはメタ文字と言う人もいます。「lt」は、「less than」の略で、日本語では数学で出てくる「小なり」です。反対に「gt」は、「greater than」の略で、これも数学で出てくる「大なり」です。特殊文字に関して詳しくは、「HTMLでよく使う特殊文字」をご覧ください。

キーボードでの入力方法

「<」と「>」の入力方法は、漢字変換モードが「直接入力」モードになっているのを確認して、キーボードの「Shift」キーを押さえたまま、「M」キーの右隣の「,(カンマ)」キーや「.(ドット)」キーをポンと1回押して下さい。「Shift」キーは、左右2カ所ございますが、どちらか一方を押さえたままでOKです。


波括弧 { }

波括弧はCSSで用いられる

波括弧は、「 { 」と「 } 」のことです。これは、「29.CSSの書き方とCSSコマンド簡単リファレンス」でも紹介しているように、CSSコマンドを記述するときに用います。

例えば、pタグの文書全体のフォントサイズを変更したいときは、スタイルシートに次のように、pと書き込んだあと、半角スペースを開けて、山括弧を書き、その中にフォントサイズを変更するCSSコマンドを入れます。

● pタグのフォントサイズを変更するCSS記述例

p {font-size: 120%;}

波括弧を文書中に書き込みたい場合

波括弧は山括弧と違い、文書中に直接書き込んでもかまいません。

● 波括弧を文書中に書き込む例

波括弧{と}は、文書中に直接{や}と書き込んで、問題ありません。

キーボードでの入力方法

「{」と「}」の入力方法は、漢字変換モードが「直接入力」モードになっているのを確認して、キーボードの「Shift」キーを押さえたまま、「Enter」キーの左隣の「[(左括弧)」キーや「](右括弧)」キーをポンと1回押して下さい。「Shift」キーは、左右2カ所ございますが、どちらか一方を押さえたままでOKです。


丸括弧 ( )

丸括弧とは、「 ( 」や「 ) 」のことで、backgroundコマンドとJavaScriptの関数で用いられます。この2パターンについて、簡単に説明したいと思います。

backgroundコマンドでの背景画像指定

スタイルシート、styleタグならびにstyle属性で使われるbackgroundコマンドは、背景色や背景画像を指定するコマンドです。ここで、背景画像を指定するときに、背景画像のURLを入力しますが、そのときに丸括弧が使われます。

test {background: #ffffff url("gazou.gif");}

ここで、丸括弧内で画像のURLを囲むのに「"(ダブルクォーテーション)」を使うのは、スタイルシートとstyleタグの場合です。style属性でbackgroundコマンドを指定するときは、属性値を囲む「"」と、backgroundコマンドの「"」が連続して入ると、ブラウザが混乱して正常に表示されません。そこで、次に示すように、style属性において、画像のURL指定を指定する場合は、「"」の代わりに「'(クォーテーション)」を用いてください。

<p style="background: url('gazou.gif');">

JavaScriptの関数の引数

丸括弧は、「 ( 」と「 ) 」のことです。これは、HTMLソース内では、JavaScriptの関数で引数(ひきすう)を入れる括弧として用いられます。JavaScriptとは、HTMLに組み込むことができるプログラムの一種です。

使い方としては、次のようになりますが、次の記述例は、プログラムを組んでいないので、実行するとエラーになるので、ご注意ください。

● JavaScriptの記述例

<a href="#" onclick="program('test')">テストプログラムの実行</a>

引数とは、プログラムに引き継ぐ値のことです。この例では、引数が「test」という文字列です。aタグで「テストプログラムの実行」という文字列を囲っていますので、ブラウザで開いたときに、この文字列をクリックすると、aタグのonclick属性が実行されます。

ここで、onclick属性には、「proguram()」と書かれていますが、通常headタグ内のscriptタグの中か、拡張子が「.js」の別ファイルに書かれたJavaScriptの、program関数が実行されます。そして、丸括弧内の引数である「test」という文字列が、そのプログラムに引き継がれ、使用されます。

JavaScriptに関しては、追々コンテンツを追加していく予定です。

キーボードでの入力方法

「(」と「)」の入力方法は、漢字変換モードが「直接入力」モードになっているのを確認して、キーボードの「Shift」キーを押さえたまま、数字の「8」キーや「9」キーをポンと1回押して下さい。「Shift」キーは、左右2カ所ございますが、どちらか一方を押さえたままでOKです。