ブロックレベル要素とインライン要素

HTMLで使われる要素は、大きくブロックレベル要素とインライン要素に分けられる。

ブロックレベル要素は、それ自体が「一つの塊(ブロック)」として扱われます。ブロックレベル要素の内容には、インライン要素はもちろんブロックレベル要素も含むことが出来ます。

しかし、段落(p)要素はインライン要素しか含むことが出来ないので注意が必要です。

また、ブロックレベル要素をインライン要素内に含むことは出来ません(置いてはいけない)。

ブロックレベル要素には、、見出し(h*)要素、段落(p)要素、リスト(ul,ol,dlなど)要素、hr要素、テーブル(table)要素、div要素などがあります。


インライン要素は、ブロックレベル要素の中で何かしらの機能を持ったもの、あるいは文字列などのことで、ブロックレベル要素の内容に含まれるべきものです。

インライン要素は、文字やその他のインライン要素を含むことが出来ますが、ブロックレベル要素を含むことは出来ません。ですからブロックレベル要素は、インライン要素の外に記序する必要があります。

インライン要素には、アンカー(a)要素、文字装飾(strong,em等)要素、img要素、br要素、span要素などがあります。

HTML 画像の配置 img要素

ブラウザーに画像を表示させるには、img要素を使用します。

img要素は、それだけでは何も表示できないので、属性と組み合わせて使用します。

src属性: この属性で画像がある位置を相対パス絶対パスのURLで指定します、src属性がないと画像の場所が特定できないのでimg要素には必須の属性です。
相対パス絶対パスが解らない方はリンク先を参照

alt属性: この属性は、画像を表示できないテキストブラウザや音声ブラウザ等のために画像の意味を表す代替テキストを入れます、ユーザビリティのためにもimg要素に必須の属性です。

width属性: 画像の幅をピクセル(%)で指定します。

height属性: 画像の高さをピクセル(%)で指定します。
width属性とheight属性は必須ではありませんが指定した方が表示するまでの時間が短いようです。
また画像のサイズをそのまま入れる必要もありません。
ただ、画像のサイズと違う値を指定すると見栄えが良くないので、通常Webデザイナーは、同じ値を指定するか画像自体を加工します。

実際には次のようになります。
<img src="画像のURL" alt="代替テキスト" width="画像の幅" height="画像の高さ">
また、XHTMLの場合は、次のようにタグを閉じる前に半角スペースを入れてから「/」スラッシュを入れる必要があります。
<img src="画像のURL" alt="代替テキスト" width="画像の幅" height="画像の高さ" />

それでは次のようなimg要素を表示してみましょう。
<img src="http://img-cdn.jg.jugem.jp/272/1474973/20091013_1058320.gif" alt="ファイル階層" width="400" height="400" />
すると下のように画像が表示されます。
ファイル階層

ちなみに使用できる画像のタイプは、GIF画像、JPEG画像、PNG画像ですが、一部のブラウザはPNG画像をサポートしていないため、画像を表示できないことがあるので注意が必要です。

alt属性に適当なテキストがない場合、特に意味のない画像を入れたときなどは、「alt=""」のようにしてalt属性を必ず入れるようにしましょう。

HTML テーブル(表) tr th td 属性 align valign

今回は、trとtd(th)要素のalign属性とvalign属性です。

align属性は、セル内の内容の横位置の指定に使用します。
フォーマットは次のようにtrかtd(th)要素の次に半角スペースを入れてから記序します。
<td align="横位置の指定">セルの内容</td>

横位置の指定は以下のような値があります:
left= 左揃え(td要素のデフォルト)
center= 中央揃え(th要素のデフォルト)
right= 右揃え
justify= 両端揃え

valign属性属性は、セル内の内容の縦位置の指定に使用します。
フォーマットは次のようにtrかtd(th)要素の次に半角スペースを入れてから記序します。
<td valign="縦位置の指定">セルの内容</td>

縦位置の指定は以下のような値があります:

top= セルの上部
middle= セルの中央
bottom= セルの下部
baseline= 列の1行目が同じ位置になる

また、これらのalign属性とvalign属性は、組み合わせて使用することも出来ます。

次のようなテーブルを元にalign属性とvalign属性を適用してみましょう。
ちなみにwidth属性とheight属性は非推奨ですので、style属性を使用していますがstyleの詳細はスタイルシートの時にやりますので説明は省きます。
<table border="1">
<tr>
<td style="width:150px; height:100px;">表示位置</td>
<td style="width:150px; height:100px;">表示位置</td>
<td style="width:150px; height:100px;">表示位置</td>
</tr>
</table>
下のようなテーブルが出来ます。
表示位置表示位置表示位置


上のセルに各align属性を適用してみましょう。
<table border="1">
<tr>
<td style="width:150px; height:100px;" align="left">表示位置</td>
<td style="width:150px; height:100px;" align="center">表示位置</td>
<td style="width:150px; height:100px;" align="right">表示位置</td>
</tr>
</table>
上記のようにalign属性を赤字のように適用すると下のようになります。
表示位置表示位置表示位置


次にvalign属性を適用してみましょう。
<table border="1">
<tr>
<td style="width:150; height:100px;" valign="top">表示位置</td>
<td style="width:150px; height:100px;" valign="middle">表示位置</td>
<td style="width:150px; height:100px;" valign="bottom">表示位置</td>
</tr>
</table>
上記のようにvalign属性を赤字のように適用すると下のようになります。
表示位置表示位置表示位置

これらはalign属性とvalign属性を組み合わせると四隅と中央に表示させることが出来ます。

テーブル関係の属性は、今回で終了です。
その他にも沢山の属性がありますが、それらの属性はスタイルシートを使用することが推奨されていますので、ここでは省きます。

HTML テーブル(表) th td 属性 rowspan colspan

今回はテーブルのtd(th)要素の固有の属性です。

セルを連結するための属性は、以下のように2種類あります。
rowspan:セルを縦方向に連結する。
colspan:セルを横方向に連結する。

フォーマットは次のようにtd(th)要素の後に半角スペースを入れてから記序します。
縦方向の場合(thも同じ)
<td rowspan="連結数を2以上の数字で">内容</td>

横方向の場合(thも同じ)
<td colspan="連結数を2以上の数字で">内容</td>

次のようなテーブルがあります。
<table border="1">
<tr><td>セル1</td><td>セル2</td><td>セル3</td></tr>
<tr><td>セル4</td><td>セル5</td><td>セル6</td></tr>
<tr><td>セル7</td><td>セル8</td><td>セル9</td></tr>
<tr><td>セル10</td><td>セル11</td><td>セル12</td></tr>
</table>
実際には下のように表示されます。
セル1セル2セル3
セル4セル5セル6
セル7セル8セル9
セル10セル11セル12

このテーブルのセル1,4,7,10を縦方向に連結してみましょう。
<table border="1">
<tr><td rowspan="4">セル1、4、7、10の連結セルlt;/td><td>セル2</td><td>セル3</td></tr>
<tr>この位置のセルは記序しない<td>セル5</td><td>セル6</td></tr>
<tr>この位置のセルは記序しない<td>セル8</td><td>セル9</td></tr>
<tr>この位置のセルは記序しない<td>セル11</td><td>セル12</td></tr>
</table>
このように連結したいセルの一番上のtd(th)要素(この場合セル1)に「rowspan="4"」を記序し、その下の連結されるセル(コメントを入れた位置)のtd(th)要素は記序しません。
すると下のようにセルが縦方向に連結された状態で表示されます。
セル1、4、7、10の連結セルセル2セル3
セル5セル6
セル8セル9
セル11セル12


次にセル1、2、3を横方向に連結してみましょう。
<table border="1">
<tr><td colspan="3">セル1、2、3を連結</td>この位置のセル2、3は記序しない</tr>
<tr><td>セル4</td><td>セル5</td><td>セル6</td></tr>
<tr><td>セル7</td><td>セル8</td><td>セル9</td></tr>
<tr><td>セル10</td><td>セル11</td><td>セル12</td></tr>
</table>
今度は連結したいセルの先頭(この場合セル1)のtd(th)要素に「colspan="3"」を記序して、続くセル2、3のtd(th)要素は記序しません、すると次のように表示されます。
セル1、2、3を連結
セル4セル5セル6
セル7セル8セル9
セル10セル11セル12


これらのrowspan、colspan属性は、結構使用する頻度が高いので、自分でいろんなパターンを書いてマスターしましょう。

HTML テーブル(表) table tr th td 属性編 その1

今回はtable関係の属性をやります。
数多くの属性がありますが、ここではtable要素類で非推奨となっている属性は省きます。

・table要素でよく使用するのが、テーブルの幅を指定するwidth属性。
省略することも出来ますが、その場合はテーブル内の内容によって幅が変ります。
単位はピクセルとパーセント(%)があり、単位を省くとピクセルで、%を入れるとパーセント表示されます。
ピクセルの場合は、モニターの解像度によりますが、HTMLではよく使用する単位です。
パーセントは、ブラウザーもしくは、親要素の幅に依存します。
ピクセル指定のテーブル。
<table border="2" width="100">
<tr>
<td>幅100ピクセルのテーブル</td>
<td>ボーダー2</td>
</tr>
</table>
幅100ピクセルのテーブルボーダー2


パーセント指定のテーブル。
<table border="2" width="100%">
<tr>
<td>幅100%のテーブル</td>
<td>ボーダー2</td>
</tr>
</table>
幅100%のテーブルボーダー2


・セルとセルの間隔
テーブル内の各td(th)要素同士の隙間を指定するには、cellspacing属性を使用します。
フォーマットは、「cellspacing="セルの間隔を0〜の数値で指定"」です。
セル間隔0の場合。
<table border="1" cellspacing="0">
<tr>
<td>セル間隔0のテーブル</td>
<td>セル間隔0のテーブル</td>
</tr>
<tr>
<td>セル間隔0のテーブル</td>
<td>セル間隔0のテーブル</td>
</tr>
</table>
セル間隔0のテーブルセル間隔0のテーブル
セル間隔0のテーブルセル間隔0のテーブル


セル間隔5の場合。
<table border="1" cellspacing="10">
<tr>
<td>セル間隔10のテーブル</td>
<td>セル間隔10のテーブル</td>
</tr>
<tr>
<td>セル間隔10のテーブル</td>
<td>セル間隔10のテーブル</td>
</tr>
</table>
セル間隔10のテーブルセル間隔10のテーブル
セル間隔10のテーブルセル間隔10のテーブル


・セルの内容とセルの枠の間隔。
セル内の内容と枠の間隔を指定するには、次のように指定します。
「cellpadding="間隔を0〜の数値で指定"」
間隔0の場合。
<table border="1" cellpadding="0">
<tr>
<td>間隔0のテーブル</td>
<td>間隔0のテーブル</td>
</tr>
<tr>
<td>間隔0のテーブル</td>
<td>間隔0のテーブル</td>
</tr>
</table>
間隔0のテーブル間隔0のテーブル
間隔0のテーブル間隔0のテーブル


間隔10の場合。
<table border="1" cellpadding="20">
<tr>
<td>間隔20のテーブル</td>
<td>間隔20のテーブル</td>
</tr>
<tr>
<td>間隔20のテーブル</td>
<td>間隔20のテーブル</td>
</tr>
</table>
間隔20のテーブル間隔20のテーブル
間隔20のテーブル間隔20のテーブル
*スタイルシートの都合上、スタイルを適用していますが、属性で指定した場合と表示は同じです。

長くなりますので、残りの属性は次回でやります。

HTML 属性

前回に引き続きテーブルの予定でしたが、今回は属性の基本をやります。

属性についてですが、属性は単独で使用することは出来ません、必ず要素と共に使用します。

属性は要素の開始タグ内で使用するよう決められています。

属性は、その要素の性質や特性を示すために使用します。

属性は「属性名=”値”」の形式で書きます。

1つの要素内で複数の属性を使用することが出来ますが、そのときは下の例のように各属性の間にスペースを入れることになっています。
<要素名 属性名="値" 属性名="値" 属性名="値">

書き方の注意として「=」や「"」は、省略しても表示されますが、W3Cでは、非推奨となっていますし、XHTMLでは省略することは出来ない仕様になっていますので、省略したか書き方はやめましょう。

また新しい仕様では、属性での指定が推奨されていない物もあります。
そういった値はスタイルシートで指定するようになっています。

HTML テーブル(表) table tr th td要素

HTMLで使用するテーブル(表)の基本形は次の通りです。
<table border="枠線の太さ">
<tbody>
<tr>
<td>文字や画像などの内容</td>
</tr>
</tbody>
</table>

このようにHTMLは<table>〜</table>の間に<tbody>〜</tbody>、その間に行を意味する<tr>〜</tr>、そのtr要素の間にセルにあたる<td></td>(あるいは見出しセルの<th></th>)を入れ子構造のようにしていきます。
ただしXHTMLではtbody要素は必須ではありません。

下の図を見て下さい。
テーブルの基本
視覚的には図のようになっていると考えて下さい。

テキストや画像は、td(th)要素のなかに入れていきます。

行を増やすには、tr要素を追加し、セル(列)を増やすにはtd(th)を追加していきます。

注意が必要なのは、tr要素のなかには必ずtd(th)要素が1つ以上入っていなければなりません。

table要素のborder属性は必須ではありませんが、これを省くと枠線が表示されません。
またborder属性の値は、0以上の半角数字を入れます。

それでは、実際にborderが1の以下のようなテーブルを作ってみましょう。
<table border="1">
<tr>
<th>見出しの1セル</th><th>見出しの2セル</th><th>見出しの3セル</th>
</tr>
<tr>
<td>1行目の1セル</td><td>1行目の2セル</td><td>1行目の3セル</td>
</tr>
<tr>
<td>2行目の1セル</td><td>2行目の2セル</td><td>2行目の3セル</td>
</tr>
</table>
ブラウザで表示すると以下のように見えます。
見出しの1セル見出しの2セル見出しの3セル
1行目の1セル1行目の2セル1行目の3セル
2行目の1セル2行目の2セル2行目の3セル

ちなみに見出しのth要素の内容は、通常のブラウザでは、太字で表示されセンターリングされます。

table要素には、表示等を設定するための属性がたくさんあります。

border属性:枠線の太さ。

width属性:テーブルの幅(ピクセル(px)やパーセンテージ(%)などで指定する。)

height属性:テーブルの高さピクセル(px)やパーセンテージ(%)などで指定する。)

cellspacing属性:セルとセルの間隔を指定。

cellpadding属性:セルの内容とセルの枠の間隔を指定。

等々その他にも沢山ありますが、CSS(スタイルシート)で調整することが、推奨されている属性もありますので注意が必要です。

これらの属性を含め次回で、テーブルをもう少し詳しく説明します。

HTML 定義リスト dl dt dd 要素

ul li要素と共によく使用するリストです。

dl dt dd要素は、イメージとして辞書のような表現をするために使われます。

dl要素は、Definition Listの略で定義リストの意。
dt要素は、Definition Termの略で定義の用語の意。
dd要素は、Definition Descriptionで定義の詳細の意。

これらの要素は、セットで使用します。
<dl>
<dt></dt>
<dd></dd>
</dl>
このように開始タグ<dl>〜閉タグ</dl>の間に、
開始タグ<dt>〜閉タグ</dt>と、
開始タグ<dd>〜閉タグ</dd>を入れて使用します。

実際の使用例は以下の通り。
<dl>
<dt>HTML</dt>
<dd>Webページの記述のためのマークアップ言語。。。
</dd>
<dt>ブログ</dt>
<dd>Web上の記録を意味する「weblog」の略。。。</dd>
</dl>

ブラウザでは下のように表示されます。
HTML
Webページの記述のためのマークアップ言語。。。
ブログ
Web上の記録を意味する「weblog」の略。。。


通常<dd>〜</dd>の内容が、インデントされて表示されます。
*このページでは、都合上CSSで調整していますが、調整しなくてもインデントされます。

HTML リスト ul li 要素

リスト(箇条書き)のul要素は、HTMLでも頻繁に用いるタグです。

リストの特徴は、<ul>タグで始まり</ul>で閉じて終わりですが、その間に<li>リスト項目</li>を入れます。
ですから実際に書くと以下のようになります。

<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
ブラウザの表示は下のようになります。
ulリスト表示

ブラウザのデフォルト表示は、各リスト項目の先頭に黒丸が付き、全体的にインデントされ、各項目が改行された状態で表示されます。

ただブラウザによって黒丸の大きさやインデントの量などは、異なることがあるので注意が必要です。

もう一つの特徴として、下のようにリストの中にリストを入れる入れ子構造にすることが出来ます。

<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3
<ul>
<li>リスト3-1</li>
<li>リスト3-2</li>
<li>リスト3-3</li>
</ul>
</li>
</ul>
ブラウザの表示は下のようになります。
ulリストの入れ子構造表示

これはインライン要素だけでなくブロックレベル要素(p,h*,ul,li等)を入れれることを意味します。

ul要素は使い勝手が良いので、サイトデザインでは、リストで使用するほかにメニュー項目などによく使用します。

HTML ページ内リンク a(アンカー)要素

今回もa(アンカー)要素を使ったHTMLをやりましょう。

前回、HTML 内部リンク a(アンカー)要素

前々回、webサイトの階層と相対パス

前々々回、HTML 外部リンク a(アンカー)要素

今回は、ページ内でのリンクの仕方です。

下の画像のようなサイトを作成したとしましょう。
左側がブラウザーで表示した内容で、右側がページのソースです。

HTML name属性

画像の右側を見てもらうとわかりますが、menu1からContents1にリンクをするには
「<a href="#cnt1">・menu1</a>」
とします。

これまでと違うのは「href="#リンク先名"」のように「#」記号が付くことと、「リンク先URL」ではなく「リンク先名」を使用することです。

「リンク先名」は、リンクしたい部分にa(アンカー)要素のname属性に入れる任意の文字のことです。

この場合は
「<a name="cnt1">・menu1</a>」
のように「href(ハイパーリファレンス)」属性ではなく「name」属性を使用し「name="任意の名"」のようにします。

よく使用されるのがページの先頭に戻るリンクです。

この場合は、以下のようにページの先頭にあたる「Site title」に「name」属性で位置名を付けておきます。
<h1><a name="top">Site title</a></h1>

そしてページ下の「^to top」に「href」属性を使用して
<a href="#top">^to top</a>
のように記序します。

このようにしておけば「^to top」をクリックするとページの先頭に戻るリンクを設定することが出来ます。

応用編、別ページの特定の位置へのリンク。

ページ1の「menu1」からページ2の「Contents1」にリンクするとします。

ページ2の「Contents1」には
「<a name="cnt1">・menu1</a>」
のように記序しておきます。

ページ1の「menu1」には
「<a href="ページ2/#cnt1">・menu1</a>」
のように「ページ名/#位置名」で記序します。

内部リンクで習ったのに「/#位置名」を加えるだけです。


最後にW3cによると「name」属性は、現在非推奨となっていて、今後は「id」属性を使用することが推奨されていて「XHTML1.1」では「id」属性しか使用できないことになっています。

現在は過渡期と言うこともあり、「name」属性、「id」属性の両方を入れることが薦められています。

ちなみに「#」記号は、「シャープ」ではなく「いげた」あるいは英語で「number sign」「numerical sign」「pound sign」「hash mark」などと言います。

「♯(シャープ)」記号と
「#(いげた)」記号はよく見ると違います。

日本ではシャープで通じるので、どうでも良いですがHTMLでは「#(いげた)」記号の半角を使用します。

Recent Comments

Recent Trackbacks