HOMEへ   ホームページを作ろう |レンタルサーバいろいろ
TOPB B SScriptPCMY-LOG

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |1234567891011121314151617|  次へ>>

「激安ガーデン通販」では、只今期間限定セール開催中! [PR]

● 文章構造

文章を書き始めるときには、まず見出し(タイトル)を書くでしょう。
この見出しを意味する要素はH1H6となります。 (Hはheadingを意味し、後の数字は、見出しの強さになります。 要素の意味合いからH1から順に使っていくのが正しいのでしょう。)
この『<H1>』タグと『</H1>』タグで、 文中のタイトルになる部分を囲むように記述すれば文字が見出し(タイトル)として表示されます。

<H1>H1によるタイトル</H1>

<H6>H6によるタイトル</H6>
※上のH1要素はスタイルシートによって大きさが変わっています。

タイトルを書くと、それ以降は普通の文章になるわけですが、通常、文章は段落わけされているでしょう。
その段落を意味する要素は(paragraph)です。
そして、段落内にはいろいろな文章が入りますが、 例えば強調したい部分や引用した文などが出てくると思います。
このような、文章を書くことをそのままHTMLに当てはめると、下のようになると思います。

<H1>タイトル</H1>
<P>
<EM>・・・強調されます。・・・・</EM>
・・・一つ目の段落<BR>
<STRONG>・・・より強調されます。・・・・</STRONG>
</P>
<P>
<CIT>・・・引用文です。・・・・</CITE>
・・・二つ目の段落<BR>
</P>
<ADDRESS>・・・作者アドレス・・・・</ADDRESSE>
※P要素の終了タグ(</P>)は省略できます。 これは、新しい段落が開始されたり、タイトルが書かれる時は、前の段落が終了すると考えられるからです。

このように、HTMLはタグを用いて印付けを行なうことで、平打ちされた文書を構造化することが出来ます。 ウェブ文書を読込むブラウザは、このタグを手がかりにして文の構造を認識することができ、 それに相応しい表現で出力することが可能になります。
つまり、H要素の内容は『見出しを意味する』、P要素の内容は1つの段落となっている、EM要素の内容は強調されている・・・と把握し、 スペルチェッカーや音声システム、翻訳システム、サーチンエンジンの検索など、非視覚的なページ処理システムに対する助けとなり、 意味をもった文字情報を提供できると考えられます。

・文字に意味を持たせるHTML要素

EM:強調したい文字であることを示します。(emphasisの略で力強く表示って意味みたいです。)
STRONG:より強く強調したい文字であることをしめします。(strong emphasisのことです。)
CITE:引用文のタイトルや、他の文書名、著者名、サイト名など他情報への参照であることを示します。
Q:短いインラインの引用に使用します。BLOCKQUOTE要素のインライン型です。cite属性に引用元のURLを記述します。

BLOCKQUOTE:長いブロックレベルの引用に使用します。Q要素のブロック型です。cite属性に引用元のURLを記述します。
この要素中にはP要素やTABLE要素を記述しますが、P要素内には記述できません。

この要素は、通常、視覚的には字下げされますが、この要素を字下げ目的で使用するのは誤りです。 字下げにはスタイルシートの『margin-left』を用いるのが適当でしょう。

DFN:囲われた用語が定義を行っている語で、特殊な意味のある語であるとか、別途解説のある語であることを示します。
CODE:コンピュータのコードやサンプルプログラムであることを示します。
SAMP:プログラムやスクリプトなどのサンプル出力であることを示します。
KBD:何らかの解説等で、ユーザがキーボード等で入力する部分であることを示します。
VAR:プログラムの変数など、状況によって変化する値を示します。
ABBR:略語、省略された言葉であることを示します。例えば、WWW、HTTP、URI、Mass.、など。
ACRONYM:頭文字であることを示します。例えば、WAC、radar、など。

ADDRESS:記事の最後などで、問い合わせ先(メールアドレス等)を示します。

== 註 ==
※Q要素は視覚的には記述された記事を、引用符で囲って表示されるので、 引用符を記述しないようにする必要があります。 N7.0・O6.0では『"』がつきますが、IE5.5/6.0では変化がありあません。)
※Q要素内にQ要素を記述する入れ子の引用も可能らしいです。
※Q要素もBLOCKQUOTE要素も視覚的にはURLが意味をなしていません。 BLOCKQUOTE要素は文字が下がっただけですし、Q要素では特に変化はありません。 これでは困るという場合は、スタイルシートを利用して斜体等の装飾を行うとよいでしょう。
※ABBR要素、ACRONYM要素の違いがいまいちではありますが、 両者ともにtitle属性『title="ここに元の語を書く"』により元の語句を示すと良いのですが、 IE5.0/6.0だとACRONYM要素だけしか表示されませんのでその辺が使用分けのちがいでしょうか(笑。
ちなみにIEではまったく装飾されませんが、N7.0・O6.0なら両方に『title』が表示され、N7.0では下線がつきます。

たとえば、 『タイトル』ならH1〜H6要素(heading)、 『段落』ならP要素(paragraph)、 『他の文書より引用した文』ならCITE要素(citation)、 『問い合わせ用のメールアドレス』ならADDRESS要素など。
これらの要素を設定された文章は、それぞれのブラウザにより、 意味に合ったそれなりの表現をします。
例えば、文字を太く大きくしたり、1行程度の行間を空けたり、斜体にしたり、また音声システムでは読み方を変えるなどで処置されます。
しかしそれぞれは、文書構造を定められているのであり、その表示はブラウザによる視覚的な表現にすぎません。 つまり、H1要素が文字を大きくするための要素、P要素が行間をあけるための要素ではありません。
要素が、文字に『見出し』『段落』『強調』・・・と言った意味づけをするための物であることを充分に認識してください。
これらの要素を記述することで、音声システムやスペルチェッカー、翻訳システム、サーチンエンジンの索引システム などが、文章に込められた意味を受けとることができるのですから。
なお、特別な意味合いを持たさずに視覚的表現を変えるためには、 CSSによる文字の装飾を利用します。
例えば、STRONG要素を使っても、
STRONG:より強い強調です。
<STRONG style="font-size:0.8em ; font-weight:normal">STRONG:より強い強調です。</STRONG>
と、ちっとも強調していないような表示も可能ですし、
STRONG:より強い強調です。
<STRONG style="color:red ; font-weight:bold">STRONG:より強い強調です。</STRONG>
と、要素の示す意味を自由な形で表現できます。

<<前へ  |上へ|  次へ>>
1234567891011121314151617

広告掲載で簡単収入!!登録無料のアフィリエイトプログラムなら導入は安心。
Click Here! リンクシェア アフィリエイト紹介プログラム http://draft.j-a-net.jp/banner/NEXT アクセストレード
アフィリエイトプログラム比較

TOP] [HOME

更新日時:2014/08/09