■ WSJ21[GHP] - XHTMLタグ講座で覚えよう

■Section 2-8■良いホームページ作成講座■

▼GHP講座2.8　－　XHTMLタグを覚える

◎ 基本的なホームページを作るために最低限必要な知識(言語)
◎ ホームページを作るために覚えなくてはいけないんです。
◎ 頑張って覚えて下さいね＜他人事＞初めは見ながらでいいですからっ♪
◎ 簡単な英語ができるなら、かなり楽に覚えられますよ。
.
◇◆◇このページで、解説するタグ一覧◇◆◇

[ruby] ruby rb rt rp (rbc rtc)

[text] address div span [base] base

※スタイルシートを使用している都合上、文字のサイズなど実際の表示と多少異なります。

★ルビ - <ruby> - Ruby

★ルビ - <rb> - Ruby Base

★ルビ - <rt> - Ruby Text

★ルビ - <rp> - Ruby Parentheses

　ルビ(読みがな)をふるために使います。
　※対応状況がまばらなため、実用性は極めてありません。

私達は<ruby><rb>明日</rb><rp>(</rp><rt>みらい</rt><rp>)</rp></ruby>に向かって歩み出しています。

↓　こんな感じです　↓

私達は明日(みらい)に向かって歩み出しています。
私達は明日(みらい)に向かって歩み出しています。
私達は明日(みらい)に向かって歩み出しています。
私達は明日(みらい)に向かって歩み出しています。
私達は明日(みらい)に向かって歩み出しています。

　上から順番に文字サイズが「10,12,14,16,18pt」「12,14,16,18,20px」に設定しています。
　「16pt」「20px」以上の大きさでないと読みづらいです。
　また、ルビ非対応ブラウザでは、タグを無視して表示され【明日(みらい)】と表示されます。

★連絡・問合せ先 - <address> - Address

　ホームページ・メールアドレス・住所・電話番号など、連絡をとるために必要な情報を書きます。
　企業さんとかのページで使うと良い感じになりますよ。

<hr /><address>
このホームページに関するお問合せ先
<br />サイト名「WSJ」 : <a href="http://www8.ocn.ne.jp/~wallshop/wsj/"> http://www8.ocn.ne.jp/~wallshop/wsj/</a>
<br />代表「PONTA」 : <a href="mailto:wsj21ponta@hotmail.com"> wsj21ponta@hotmail.com</a>
<br />住所：〒5xx-xxxx 大阪府雪狸町
<br />TEL：06-xxxx-xxxx　FAX：06-xxxx-xxxx
</address><hr />

↓　ページの上でも下でもお好きな場所にお入れ下さい　↓

このホームページに関するお問合せ先
サイト名「WSJ」 : http://www8.ocn.ne.jp/~wallshop/wsj/
代表「PONTA」 : wsj21ponta@hotmail.com
住所：〒5xx-xxxx 大阪府雪狸町
TEL：06-xxxx-xxxx　FAX：06-xxxx-xxxx

★ブロック範囲定義 - <div> - ???

★インライン範囲定義 - <span> - ???

　単体では意味はほとんど無く、主にCSSを使用する時に使います。
　<div>では文章全体などのブロックレベルで、<span>は一文や一単語のインラインで使用します。
　※↓以下はCSSを使った使用例です↓

<div style="width:500px;padding:10px 20px;border-left:15px solid #080;border-right:5px solid #080;border-top:1px solid #080;border-bottom:1px solid #080;">
　div要素は同要素で囲まれた文章を１つのブロックとし、 CSSと併用することで様々な演出を施すことができます。一例として、当講座で使用しているような『枠』です。このような表現には、一般的にテーブルタグが使用されていますが、テーブルタグを使用するより、より効率的な演出ができます。
</div><br />
　一方、span要素では同要素で囲まれた部分のみ「改行無し」で文章の一部に効果付けをすることができます。例えば次のように、文章内の<span style="font-weight:bold;color:#ff0; background:#333;">「文字色などを自由に変更」</span>することができます。

↓　ページの上でも下でもお好きな場所にお入れ下さい　↓

　div要素は同要素で囲まれた文章を１つのブロックとし、 CSSと併用することで様々な演出を施すことができます。一例として、当講座で使用しているような『枠』です。このような表現には、一般的にテーブルタグが使用されていますが、テーブルタグを使用するより、より効率的な演出ができます。

　一方、span要素では同要素で囲まれた部分のみ「改行無し」で文章の一部に効果付けをすることができます。例えば次のように、文章内の「文字色などを自由に変更」することができます。

★ベース - <base> - Base

　基本となるURLやtarget値を決める時に使用します。
　通常は表示されているページのURL、target値は「_self」になっています。
　※a要素のtarget属性と一緒に解説します。

★･･･予告･･･

◇◆◇前頁の講座で解説したタグ◇◆◇

[table] table caption tr th td (colgropup col thead tbody tfoot)

colgropup col thead tbody tfoot は使えないので省かせて頂きます。

◇◆◇今頁の講座で解説したタグ◇◆◇