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

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |123456789101112131415161718|  次へ>>

ウイルスバスター 30日無料体験版 ノートン無料体験版 マカフィー・30日間無料版 [PR]

● 要素の分類

文字を書き、リンクを付け、画像を添え、レイアウトを決める。
これで、基本的なウェブページの作成ができるように成ったと思いますが、 ココでもう一度タグを配置することを意識してみます。

開始タグ/終了タグ
通常、要素は開始タグと終了タグ(閉じタグなどとも言う)のペアで使われ、 そしてこれらのタグで挟むように文字などの『内容』を記述します。
ただし、『空要素』という、 BR要素やIMG要素のように内容を記述しないでタグ単体で構成される要素もります。
ブロック要素
主に、文の構成をするための要素で、特徴として、その前後で改行されます。
文字をおくための骨組みを作るように、その要素には境界(border)があり、幅(width)・高さ(height)、余白(margin)隙間(padding)といった設定が可能になります。
(H1〜H6要素、P要素、DIV要素、FORM要素、TABLE要素、HR要素などがそれに当たります。)
インライン要素
ブロック要素内で使用され、主に、文字または文字の代わりを設定する要素で、その前後では改行されません(BRは別です)。
(A要素、IMG要素、SPAN要素などがそれに当たります。)

H1要素はタイトルなのだから独立して記述される物ですし、 IMG要素(画像を表示する要素)もA要素(文字をリンクさせる要素)も段落中に文章として記述されものです。 ・・・というように要素の意味を理解していれば、これらブロック要素とインライン要素の区別は付き易いと思います。

<H1>タイトル</H1>
<P>
段落の途中<SPAN class=01>装飾したり</SPAN1>、<A href="XXXX" >リンク</A>を当てたり、<IMG src="XXXX">画像を貼ったり、します。
</P>

何の変哲もないタグの配置ですが、この中には暗黙の規則があります。
それは、H1要素が、P要素中には記述されないということ、
それは、A要素、SPAN要素、IMG要素がP要素の中に記述されているということです。
つまり、インライン要素は必ず、ブロック要素内に記述する。
そして、インライン要素内にはブロック要素を記述しない。
という事です。
だから、このような記述は間違いです。

<H1>タイトル</H1>
<IMG src="XXXX">ブロック要素外へのインライン要素の記述
<A href="XXXX" >
<P>
ブロック要素にインライン要素を記述する。
<HR>ブロック要素を含めないブロック要素にブロック要素を記述する。
</P>
</A>

ブロック要素外へのインライン要素の記述

ブロック要素にインライン要素を記述する。


ブロック要素を含めないブロック要素にブロック要素を記述する。

間違いなのですが、実際にやってしまっても(↑、恐らく大きな問題はないと思います・・・保障はできませんけど・・・。
ただ、間違った記述で、意図しない表示をすることがあります(↓。

<P style="text-align:center ; font-size:1.5em">
真ん中揃えにした段落中に、
<DIV style="font-size:2em ; border:0.1em ridge #efefef ; background-color:#FFE36B">
背景色の違う一角を作成
</DIV>
しようと思いました。</P>

この記述は間違いです。段落中に違うスタイルの記事を書こうとし、 DIV要素を使用したのですが、P要素は終了タグを省略できるという特徴があり、 DIV要素が出現した時点で自動的にP要素は終了します。

真ん中揃えにした段落中に、

背景色の違う一角を作成
しようと思いました。

そのため、『背景色の異なる部分』はP要素で設定した文字の真ん中揃えは解除されます。 そして、最後の一行は元のフォントになっています。
つまり、上の記述はブラウザにこの(↓ように解釈さたことになります。

<P style="text-align:center ; font-size:1.5em">
真ん中揃えにした段落中に、
</P>
<DIV style="font-size:2em ; border:0.1em ridge #efefef ; background-color:#FFE36B">
背景色の違う一角を作成
</DIV>
しようと思いました。</P>

このように、最後の1文は、タグの無い文字になっています。
上の記述を、正しいHTMLで、意図どおりに見せたい場合は要素の使い方に工夫する必要があります。

真ん中揃えにした段落中に、

背景色の違う一角を作成

しようと思いました。

<DIV style="text-align:center ; font-size:1.5em">
真ん中揃えにした段落中に、
<P style="font-size:2em ; border:0.1em ridge #efefef ; background-color:#FFE36B">
背景色の違う一角を作成
</P>
しようと思いました。</DIV>

この場合は、一塊りのブラックの中に、『段落』とその上下に一文が存在しているという解釈に、つまり、 最初と最後の行は段落外に存在していることになります。
しかも、DIV要素からP要素へスタイルが継承されて、フォントが2倍の2倍(2emに2em)となっており、 ボーダーの太さも『2emの2em』を基準とした、0.1emとなり0.4emの太さとなります。
また、P要素の部分では段落の変わり目の処理が行われますので、スタイルを利用し適当な設定をする必要があります。

真ん中揃えにした段落中に、

背景色の違う一角を作成

真ん中揃えにした段落中に、しようと思いました。

<P style="text-align:center ; font-size:1.5em">
真ん中揃えにした段落中に、
</P>
<DIV style="font-size:2em ; border:0.1em ridge #efefef ; background-color:#FFE36B">
背景色の違う一角を作成
</DIV>
<P style="text-align:center ; font-size:1.5em">
真ん中揃えにした段落中に、しようと思いました。
</P>

『背景色の異なる部分』の前後で段落を変えるという方法です。少々記述が増えましたが、落ち着いた気がします。
この場合、『背景色の異なる部分』をDIV要素では無く、P要素にするべきかもしれません。
このように、タグの配置はそれぞれの要素を十分に考慮して、配置しなければ成らないです。
難しい〜。このサイト内でおかしなところがあったら言ってください。勉強します(^^

<<前へ  |上へ|  次へ>>
123456789101112131415161718

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

TOP] [HOME

更新日時:2014/08/09