[PR]テレビ番組表
今夜の番組チェック

 

ブロック要素について

DIV要素について

インライン要素について

SPAN要素について

Page Top ▲

About Object

要素についてのページです。
要素(タグ)には、大きくブロック要素とインライン要素の2種類分かれます。
スタイルシートを使用する時、この要素の種類を理解していないと思った効果がでません。

 

ブロック要素について

ブロック要素(タグ)は、要素が箱のような状態の形式ものです。要素と要素は改行されます。
よく使用されているタグの多くがブロック要素です。理解しやすい要素が<TABLE>ですが、<P>や<H>などもブロック要素です。
サンプルは、<P>要素を罫線囲んでます。スタイルを指定したブロック要素の内容すべてにそのスタイルに適応されます。WordやDTPソフトでの、TEXTコンテナと同じです。要素のサイズや任意の位置に配置する事ができます。

<p style="border: 1px solid rgb(102,102,255);">Dynamic HTMLは、.....</p>
<p style="border: 1px solid rgb(255,51,51);">Dynamic HTMLドキュメントでは、.....</p>

Dynamic HTMLは、Microsoft® Internet Explorer 4.0の革新的な機能の1つである。Dynamic HTMLにより、オーサーはドキュメントのレンダリングとコンテントを動的に変更でき、 視覚的に優れたHTMLドキュメントを作成できる。

Dynamic HTMLドキュメントでは、これらの変更はユーザーとの対話によって可能となるため、 サーバー側のプログラムや、特殊効果を実現する複雑なHTMLページに依存することがない。

 

DIV要素について

DIVは、ブロックの空要素(タグ)です。DIVは、スタイルシートでレイアウトするのに重要なタグで、要素のコンテナとして利用します。
サンプルは、2つの要素を<DIV>に収納した場合です。HEADERやMAINやLEFT部分などDIVで配置し、その中に要素を格納するれば、紙と同じようなレイアウトをWebでもできます。このサイトも全てDIVで配置して作られています。この方法で、TABLEを使用しなくてもレイアウトができます。

<div style="border: 1px solid rgb(255,51,51); padding: 10px;">
<p style="border: 1px solid rgb(102,102,255);">Dynamic HTMLは、.....</p>
<p style="border: 1px solid rgb(255,51,51);">Dynamic HTMLドキュメントでは、.....</p>
</div>

Dynamic HTMLは、Microsoft® Internet Explorer 4.0の革新的な機能の1つである。Dynamic HTMLにより、オーサーはドキュメントのレンダリングとコンテントを動的に変更でき、 視覚的に優れたHTMLドキュメントを作成できる。

Dynamic HTMLドキュメントでは、これらの変更はユーザーとの対話によって可能となるため、 サーバー側のプログラムや、特殊効果を実現する複雑なHTMLページに依存することがない。

 

インライン要素について

インライン要素は、ブロック要素内の部分(行範囲)要素です。
代表的なものとして<B>や<I>・<U>などのタグがあります。
サンプルは、Microsoft® Internet Explorer 4.0の部分を<B>で指定した場合です。<B>で指定された範囲だけ罫線で囲まれます。この罫線で囲まれた部分がインライン要素のエリアです。

<p style="color: rgb(51,102,204);">Dynamic HTMLは、<b style="border: 1px solid  rgb(255,51,51);">Microsoft® Internet Explorer 4.0</b>の革新的な機能の1つである。</p>

Dynamic HTMLは、Microsoft® Internet Explorer 4.0の革新的な機能の1つである。

 

SPAN要素について

DIVがブロックの空要素に対し、SPANはインラインの空要素です。
SPANタグは、 部分的に指定するのに便利なタグです 。行範囲で文字を大きくしたり、色を変えたりできます。 この<SPAN>タグにスタイルシートを組み込めば、表現が拡大できます。
サンプルは、Dynamicはその行で指定されているフォントサイズ15ポイントのArialで赤い文字。HTMLは、<SPAN>で15ポイントより125%大きい緑の文字。<SPAN>でStylingは、15ポイントより150%大きな青い文字を指定し場合です。

<p style="font-size: 15pt; font-family: Arial, Helvetica; color: red>
Dynamic<span style="font-size: 125%; color: green;">
HTML</span><span style="font-size: 150%; color: blue;">
Styling</span></p>
 

 

Dynamic HTML Styling