メンバー サポート / Web関係の技術情報
Member Support

• ホーム
• インデックス
• 掲示板
• リンク
• このサイトについて
• 参加のご案内

---

Web関係の技術情報 / 要素参照

建築マップの建物紹介ページで使う可能性がある要素に絞って説明します。適材適所な要素のマークアップとスタイルシートを組み合わせると、p要素やfont要素の組み合わせよりも、はるかにページが作りやすくなります。

h1 h2 h3 h4 h5 h6要素 Headlines

見出し、という意味です。数字は見出しの等級を表すもので、必然的にページの上にあるものほど見出しのレベルが高くなることでしょう。IEやネットスケープなどのブラウザは、見出しのレベルに合わせて文字の大きさに変化をつけて表示します。見出しのレベルが高いほど文字が大きくなるようにブラウザ側の標準スタイルシートで設定されているだけで、各自で用意したスタイルシートで文字の大きさは変更できます。つまり、h1要素の文字が大きすぎるからh4要素を使っておこう、という使い方は間違いです。
建物紹介ページでは、サイトの題名（Architectural Mapもしくは建築マップ。タイトル画像だけをマークアップすることも出来ます。）をh1要素に、建物名をh2要素としてマークアップする方法が考えられます。

dl要素 dt要素 dd要素 Definition List / Definition Term / Definition Description

定義リストを意味します。li要素とよく似ていますが、li要素に題名とその意味を分けて説明できるものと考えてください。dt要素に用語を、dd要素にその用語を定義（説明）します。一般ブラウザではdd要素に3文字ほどインデントされて表示します。dt要素とdd要素は単独では使えず、必ずdl要素で入れ子状態にしなくてはいけません。またdt要素とdd要素は一対で使うべきですが、dt要素に対してのdd要素が無い場合もありえるので、必ず1対にならなくても構いません。
以下にソースの例と、そのソースをWebブラウザで表示させた状態を挙げます。

<dl>
<dt>設計</dt>
<dd>Flank Lloyd Wright<br>
フランク ロイド ライト</dd>
<dt>現所在地</dt>
<dd>愛知県犬山市内山1番地（博物館明治村内）</dd>
<dt>旧所在地</dt>
<dd>東京都千代田区内幸町</dd>
<dt>用途</dt>
<dd>宿泊施設</dd>
<dt>竣工</dt>
<dd>1923年（大正12年）</dd>
<dt>構造</dt>
<dd>煉瓦型枠鉄筋コンクリート</dd>
</dl>

設計

Flank Lloyd Wright
フランク ロイド ライト

現所在地

愛知県犬山市内山1番地（博物館明治村内）

旧所在地

東京都千代田区内幸町

用途

宿泊施設

竣工

1923年（大正12年）

構造

煉瓦型枠鉄筋コンクリート

dfn要素 Definition of a term

定義文。専門用語の解説をする時に、その用語そのものだけをdfn要素でマークアップします。定義リストと似てますが、単発モノで定義を解説するときに使えるかと思います。
以下に実例を挙げます。

sequence（シークエンス）とは、連続している一連の景観現象で、古くは回遊式庭園に見られるように観客の動きにしたがって次々とシーンが変化し、連続して展開されていくこと。

abbr要素 acronym要素 Abbreviated form / Acronym

省略されたテキストに使います。略語は2種類に分類されます。URL（ユー・アール・エル）という風に省略された文字をアルファベット読みする略語にはabbr要素を用います。NATO（ナトー）という風に人言葉として発音して別の読み方ができる略語にはacronym要素を用います。略語要素は基本的にabbr要素を用い、その中でも別口の読み方が成立するものに限ってacronymという使い分けをします。この二つの要素に意味を持たせるためにはtitle属性が必須です。title属性の値として正式な名前を入れておきます。
一部サポートしていないブラウザもあります。日本語の省略語はどうやって使うのだろう。
以下にソースの例と、そのソースをWebブラウザで表示させた状態を挙げます。

<abbr title="Hyper Text Transfer Protocol">HTTP</abbr>
<abbr title="Steel framed Reinforced Concrete">SRC</abbr>造

HTTP
SRC造

<acronym title="North Atlantic Treaty Organization">NATO</acronym>
<acronym title="キャド:Computer Aided Design">CAD</acronym>の導入

NATO
CADの導入

スタイルシートを利用されている方は以下のような設定をしておくと、Webブラウザ上では点下線が表示され、マウスカーソルを該当文字に乗せると、Helpカーソルに切り替えることができます。

abbr, acronym
 {
 border-bottom: 1px dotted #666666;
 cursor: help;
 }

sup要素 sub要素 Supscript / Suberscript

上付き文字、下付き文字。元素記号や平方メートルなど、通常テキストよりも上下に文字を配置したいときに使います。建築マップでは面積単位である平方メートルを表示させたいときに使います。
以下にソースの例と、そのソースをWebブラウザで表示させた状態を挙げます。

1,500m<sup>2</sup>

1,500m²

sup要素はブラウザ上で表示されるだけの物理的意味合いが強く、HTML文書上わかりにくいマークアップかも知れません。平方メートルの記号化はsquare meterの省略ですから、acronym要素でマークアップするという方法も考えられます。title属性にsquare meterと記述しましたが、平方メートルと記述しても良いと思います。ちょっと過剰なマークアップかも知れませんが、参考までに挙げておきます。

1500<acronym title="square meter">m<sup>2</sup></acronym>

1500m²

ruby要素 Ruby / Ruby Base / Ruby Text / Ruby Parenthesis

振り仮名をつけるときに使います。ルビを振りたい文字の上に配置されます。ruby要素をサポートしていないブラウザでは、該当文字のあとに続いて括弧で表示させることも出来ます。ruby要素を使うには、文書型をXHTML 1.1として宣言する必要があります。（宣言しなくても表示はします）
以下にソースの例と、そのソースをWebブラウザで表示させた状態を挙げます。

<ruby><rb>大徳寺孤篷庵忘筌</rb><rp>（</rp><rt>だいとくじこほうあんぼうせん</rt><rp>）</rp></ruby>
<ruby><rb>Flank Lloyd Wright</rb><rp>（</rp><rt>フランク ロイド ライト</rt><rp>）</rp></ruby>

大徳寺孤篷庵忘筌（だいとくじ こほうあん ぼうせん）
Flank Lloyd Wright（フランク ロイド ライト）

要素の組み合わせ例

このページで紹介した要素を組み合わせて、建築マップ内でよく使う建物情報の例を挙げます。

上記の組み合わせ例には、p要素font要素を一切使っていませんが、じゅうぶん読みやすいテキストに仕上がったと思います。適切な要素でマークアップすれば、色や文字に変化をつけなくてもそれなりにメリハリの効いたページに仕上がります。あとはスタイルシートで要素ごとに文字の大きさや色、余白・空白(margin padding)などを設定してゆけば、さらにページが作りやすくなることでしょう。特に再編集で本領を発揮します。

Web関係の技術情報 / 機種依存文字一覧表

機種依存文字とは、異なる文字コードには登録されていない文字を指します。登録されていない文字にもかかわらず無理矢理表示させているものが文字化けと呼ばれているものです。半角カタカナも機種依存文字です。依存なので同じ文字コードならきちんと表示します。

共通文字一覧(機種依存文字ではない文字)

○△▽□◇☆●▲▼■◆★◯◎♂♀＃♭♪＠＆〓＊※§¶†‡→←↑↓⇒⇔（）〔〕［］｛｝〈〉《》「」『』【】‘’“”〒Å°′″￥＄¢£℃‰％＋−×÷＝≠±√￣―＿／＜＞≦≧≪≫＝≡∞∂∫∬∇∠⊥⌒∝∽∴∵∧∨¬￣∀∃ゐヰヴゑヱ(ここから縦書き文字)・？！ノ‖｜／＼々〃仝〆ヽヾゝゞ(ここまで)ー゛゜、。，．・：；―‐〜‖｜￣＿／＼…‥々〃仝〆ヽヾゝゞ´｀¨＾(ここから罫線)├┬┴┼┤┌┐└┘─│┣┳┻╋┫┏┓┗┛━┃┠┰┸╂┨┝┯┷┿┥

機種依存文字（使用禁止）