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

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

▼GHP講座2.3 − XHTMLタグを覚える


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

br hr h1 h2 h3 h4 h5 h6 p em strong i b blockquote q cite

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

★コメント - <!〜〜> - Comment


 「しきいの為のコメント」に使っているコメントタグです。
 コメント内の文字列は表示されません。
 通常「--」を入れて「<!-- 〜〜 -->」として使うことが多いです。
<!-- コメント1 -->
コメント2
<!-- コメント3 -->
↓ コメントは表示されない ↓
コメント2

★特殊文字

 「<」 ← 「&lt;」

 「>」 ← 「&gt;」

 「&」 ← 「&amp;」

 「 」 ← 「&nbsp;」


 直接書いてはいけない記号です。直接書くと不具合が生じる可能性があります。
 「&nbsp;」は半角スペースを複数個入れる場合に使います。
 最後の「;(セミコロン)」は必ず書いて下さい。
&lt;」「&gt;」「&amp;」「&nbsp;」「&nbsp;&nbsp;&nbsp;&nbsp;
↓ コメントは表示されない ↓
「<」「>」「&」「 」「    」


★改行 - <br /> - Break


 XHTML、HTMLでは文章を普通に「エンターキー」で改行しても改行されません。
 改行には改行タグ「<br />」を使い、以下のようにします。
WSJ2003年度企画
グッドホームページを創ろう!
↓ 普通の改行では改行されない ↓
WSJ2003年度企画グッドホームページを創ろう!

WSJ2003年度企画
<br />グッドホームページを創ろう!
WSJ2003年度企画<br />
グッドホームページを創ろう!
↓ 改行タグを入れると改行される ↓
WSJ2003年度企画
グッドホームページを創ろう!

WSJ2003年度企画
<br /><br />グッドホームページを創ろう!
↓ 改行タグの数だけ改行されます ↓
WSJ2003年度企画
 
グッドホームページを創ろう!

★平行線 - <hr /> - Horizonal Rule


 水平な線(横線)を引く時に使います。
 主に文章の途切れ目や、デザイン目的で使います。
 デザイン目的での使用の場合はCCSを使用しますので後述します
WSJ2003年度企画
<hr />
グッドホームページを創ろう!
↓ 水平線タグを使えば一発! ↓
WSJ2003年度企画
グッドホームページを創ろう!

 ※CSSで点線にしたり色を付けたりもできます
 ※以降、各項目毎にhrタグで区切って書き進んで、自分で打った文章を残していきましょう!

★見出し - <h1>〜<h6> - Heading


 見出しを付ける目的で使います。
 <h1>の大見出しから、<h6>の小見出しまでの6段階あります。
 見出しとは「内容が一目でわかるようにつけた標題、目次、索引」を表します。
<h1>WSJ2003年度企画</h1>
<h2>グッドホームページを作ろう</h2>
<h3>グッドホームページとは?</h3>
<h4>WSJ2003年度企画・・・</h4>
<h5>WSJ2003年度企画・・・</h5>
<h6>WSJ2003年度企画・・・</h6>
↓ 順番に書き出してみました ↓

WSJ2003年度企画

グッドホームページを創ろう

グッドホームページとは?

WSJ2003年度企画・・・

WSJ2003年度企画・・・
WSJ2003年度企画・・・

<h3>・GHP - グッとホームページを創ろう</h3>
 みなさん良いホームページを創ってみたいと思いませんか?でも「自分にはそんな技術はない」と諦めているみなさんに朗報です。当サイトではホームページ作りの入門者、初心者に分かりやすく解説していきます。もし、分かり難いところがありましたらドンドン質問して下さいね。お待ちしております。
↓ 実際は、見出しの後に文章を書きます ↓

・GHP - グッとホームページを創ろう

 みなさん良いホームページを創ってみたいと思いませんか?でも「自分にはそんな技術はない」と諦めているみなさんに朗報です。当サイトではホームページ作りの入門者、初心者に分かりやすく解説していきます。もし、分かり難いところがありましたらドンドン質問して下さいね。お待ちしております。

 ※見出しの上下の隙間なんかはCSSで調整できます

★段落 - <p> - Paragraph


 本などのように文章に段落を付けるために使います。
 主に文章の途切れ目や、デザイン目的で使います。
 デザイン目的での使用の場合はCCSを使用しますので後述します
<h3>・GHP - グッとホームページを創ろう</h3>
<p>みなさん良いホームページを創ってみたいと思いませんか?でも「自分にはそんな技術はない」と諦めているみなさんに朗報です。当サイトではホームページ作りの入門者、初心者に分かりやすく解説していきます。もし、分かり難いところがありましたらドンドン質問して下さいね。お待ちしております。</p>
↓ あまり利用価値が見出せませんね(汗) ↓

・GHP - グッとホームページを創ろう

みなさん良いホームページを創ってみたいと思いませんか?でも「自分にはそんな技術はない」と諦めているみなさんに朗報です。当サイトではホームページ作りの入門者、初心者に分かりやすく解説していきます。もし、分かり難いところがありましたらドンドン質問して下さいね。お待ちしております。

↓ でも、CSSと組み合わせると凄く便利なんです! ↓

・GHP - グッとホームページを創ろう

みなさん良いホームページを創ってみたいと思いませんか?でも「自分にはそんな技術はない」と諦めているみなさんに朗報です。当サイトではホームページ作りの入門者、初心者に分かりやすく解説していきます。もし、分かり難いところがありましたらドンドン質問して下さいね。お待ちしております。


 ※CSSについては後述します

★弱い強調 - <em> - Emphasis

★強い強調 - <strong> - Strong

☆斜体 - <i> - Italic - 非推奨

☆太字 - <b> - Bold - 非推奨


 文章を強調させたい時に使用します。
 通常、<em>は斜体で、<strong>は太字で強調します。
 斜体には<i>、太字には<b>がありますが、これらは非推奨タグです。
<h3>・GHP - グッとホームページを創ろう</h3>
<p>みなさん<strong>良いホームページを創ってみたい</strong>と思いませんか?でも<strong>「自分にはそんな技術はない」</strong>と諦めているみなさんに朗報です。当サイトでは<em>ホームページ作りの入門者、初心者に分かりやすく解説</em>していきます。もし、分かり難いところがありましたら<em>ドンドン質問</em>して下さいね。お待ちしております。</p>
↓ 強調されルンです! ↓

・GHP - グッとホームページを創ろう

みなさん良いホームページを創ってみたいと思いませんか?でも「自分にはそんな技術はない」と諦めているみなさんに朗報です。当サイトではホームページ作りの入門者、初心者に分かりやすく解説していきます。もし、分かり難いところがありましたらドンドン質問して下さいね。お待ちしております。


 ※CSSと一緒に使うと色を変えたりできるので、より強調できます

★長文引用 - <blockquote> - Block Quote

★短文引用 - <q> - Quotation

★出典引用 - <cite> - Citation


 引用する場合に使う3つのタグです。実際のところ「」で済ませてしまうのは気が・・・
 <blockquote>は主に字下げ目的で使用されています。
 <q>、<site>なんかは、ほとんど使われていないのが現状です。
<h3>・新聞からの長文引用</h3>
<blockquote><p>次世代の家庭用ゲーム機の開発が注目を集めている。中でも"台風の目"になりそうなのはソニーのプレイステーションの次世代機「プレステ3」。プレステの生産、販売会社であるソニー・コンピュータエンタテインメントは「研究しているのは事実だが、何も決まっていない」と言うが、業界他社やアナリストは「早ければ05年にも発売になる」と見ている。プレステは「1」「2」合計で、世界で約1億3300万台を出荷したガリバー商品だけに、「3」はどんな製品になるのか、ファンの期待も高まっている。</p></blockquote>
<cite>毎日新聞</cite>
 
<h3>・本からの短文引用</h3>
<p>夏目漱石の『我が輩は猫である』は「<q>我が輩は猫である。名前はまだない</q>」の書き出しから始まる<strong>猫の視点で人間社会を描いた作品</strong>で知らない人はほとんどいません。</p>
↓ 引用する場合は、出典や参考元を書くようにしましょう ↓

・新聞からの長文引用

次世代の家庭用ゲーム機の開発が注目を集めている。中でも"台風の目"になりそうなのはソニーのプレイステーションの次世代機「プレステ3」。プレステの生産、販売会社であるソニー・コンピュータエンタテインメントは「研究しているのは事実だが、何も決まっていない」と言うが、業界他社やアナリストは「早ければ05年にも発売になる」と見ている。プレステは「1」「2」合計で、世界で約1億3300万台を出荷したガリバー商品だけに、「3」はどんな製品になるのか、ファンの期待も高まっている。

毎日新聞

・本からの短文引用

夏目漱石の『我が輩は猫である』は「我が輩は猫である。名前はまだない」の書き出しから始まる猫の視点で人間社会を描いた作品で知らない人はほとんどいません。


 ※右寄せはCSSでしますので後述します
 ※全角スペースを入れると任意の場所に持っていくこともできます。

★・・・予告・・・


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

br hr h1 h2 h3 h4 h5 h6 p em strong i b blockquote q cite


◇◆◇次頁の講座で解説するタグ◇◆◇

big small ins del u s strike sup sub dfn tt bar code kbd samp pre


◇◆◇表示例◇◆◇
 いままでの物を打ち込めばこのようになります。
 ◎サンプル3
←講座2-2  ●もどる●  講座2-4→