商店主さん向けHTMLセミナー
windows95&Internet Explorler準拠

Chapter 4

テキストを揃える！（２）
　さて、この文字をそろえるのは様々な方法があります。 　では、もう一度index.htmをメモ帳でひらいてみてください。

■index.htm-メモ帳
ファイル(F)　編集(E)　検索(S) ヘルプ(H)
<HTML>

<HEAD>
<TITLE>ＡCLUB ホームページ </TITLE>
</HEAD>

<BODY BGCOLOR="#FFFAFO">
<CENTER>

<H1><FONT COLOR=red>ようこそＡClubへ</FONT> </H1>

</CENTER>
<FONT COLOR=green>
私達はまごころで商売をしているＡClubです！<BR>
よろしくお願いします！<BR>
送料、振込料はもちろん当社負担です<BR>
お客様のリクエストには全力でお応えいたします！<BR>
まず、我々の素晴らしい商品の数々を<BR>
とくとご覧くださいませ！<BR>
webmaster:山田一郎
</FONT>

 </BODY>
</HTML>

　今まで学習された方なら、「ようこそＡClubへ」が真ん中に位置しているのが、このソースを見ただけで ぴんとくるでしょう。それが大事なことなんです。また時をおいて見た時でも、ちゃんとわかりやすく タグを配置整理しておくことは、大変有意義なことであります。

　ここでは、この赤文字の部分を色々整形配置してみましょう

P

　　Pというタグに 「ALIGN=なんとか」という呪文(ALAGINではをありませぬぞぉ、アラインメントといいまする） を加えることによって、文字を左右や中央に揃えることができます！ このALIGNというタグはよく出てよくお世話になるタグですので今から仲良くいたしておきましょう！

文章というのは、通常なにも指定がなければ、P ALIGN="left"となって左よせになってます。
P ALIGN="center"では、前日説明したCENTERと同じ揃えになります。
では、P ALIGN="right"はどうなるでしょうか？

<P ALIGN="right">

<FONT COLOR=green>
私達はまごころで商売をしているＡClubです！<BR>
よろしくお願いします！<BR>
送料、振込料はもちろん当社負担です<BR>
お客様のリクエストには全力でお応えいたします！<BR>
まず、我々の素晴らしい商品の数々を<BR>
とくとご覧くださいませ！<BR>
webmaster:山田一郎
</FONT>

</P>

A CLUBホームページ-Microsoftインターネットエクスプローラ
ファイル(F) 編集(E) 表示(V) 移動(G) お気に入り(A)　ヘルプ(H)

ようこそＡClubへ

私達はまごころで商売をしているＡClubです！
よろしくお願いします！
送料、振込料はもちろん当社負担です
お客様のリクエストには全力でお応えいたします！
まず、我々の素晴らしい商品の数々を
とくとご覧くださいませ！
webmaster:山田一郎

　なんだかアンバランスな感じですね。このタグ?!僕はPはこういった行揃えにはほとんど使用しません。 むしろ単独タグ（閉じタグのないもの）として段落をつくる場合に多用しています。 WEB MASTER直前のBRをPにかえてみましょう

とくとご覧くださいませ！<P>
webmaster:山田一郎

A CLUBホームページ-Microsoftインターネットエクスプローラ
ファイル(F) 編集(E) 表示(V) 移動(G) お気に入り(A)　ヘルプ(H)

ようこそＡClubへ

私達はまごころで商売をしているＡClubです！
よろしくお願いします！
送料、振込料はもちろん当社負担です
お客様のリクエストには全力でお応えいたします！
まず、我々の素晴らしい商品の数々を
とくとご覧くださいませ！

webmaster:山田一郎

BLOCKQUOTE

　これは、左右に適当な余白をつくるタグです。「後いれ先だし」「先いれ後だし」の鉄則にしたがって タグをいれます。文章が短いと効果がわかりにくいですから、改行タグ<BR>を全部はずしてみます。

<BLOCKQUOTE>

<FONT COLOR=green>
私達はまごころで商売をしているＡClubです！
よろしくお願いします！
送料、振込料はもちろん当社負担です
お客様のリクエストには全力でお応えいたします！
まず、我々の素晴らしい商品の数々を
とくとご覧くださいませ！
webmaster:山田一郎
</FONT>

</BLOCKQUOTE>

　スペルに注意してくださいね。僕が以前実験的に使用したHTML作成ソフトでは「BLOCKQOUTE」になって ました。迂闊な作成者もいるものですねぇ（笑）
これを上書き保存して、ブラウザの更新（リロード）をしてみましょう

A CLUBホームページ-Microsoftインターネットエクスプローラ
ファイル(F) 編集(E) 表示(V) 移動(G) お気に入り(A)　ヘルプ(H)

ようこそＡClubへ

私達はまごころで商売をしているＡClubです！ よろしくお願いします！ 送料、振込料はもちろん当社負担です お客様のリクエストには全力でお応えいたします！ まず、我々の素晴らしい商品の数々を とくとご覧くださいませ！ webmaster:山田一郎

　なかなかカッコよく纏まってきましたね！

DL

　これは、左側のみに余白をつくるタグです。俗に「インデントする！」ともいいます。 何個か連続していれることが可能です。ただしその個数分を閉じタグでタグエンドしておかねば なりません。ここでは<DL>を二個分つかってみましょう！先ほどのBLOCKQUOTEの位置に そのまま<DL><DL>と</DL></DL>を置いてみましょう

<DL><DL>

<FONT COLOR=green>
私達はまごころで商売をしているＡClubです！
よろしくお願いします！
送料、振込料はもちろん当社負担です
お客様のリクエストには全力でお応えいたします！
まず、我々の素晴らしい商品の数々を
とくとご覧くださいませ！
webmaster:山田一郎
</FONT>

</DL></DL>

A CLUBホームページ-Microsoftインターネットエクスプローラ
ファイル(F) 編集(E) 表示(V) 移動(G) お気に入り(A)　ヘルプ(H)

ようこそＡClubへ

私達はまごころで商売をしているＡClubです！ よろしくお願いします！ 送料、振込料はもちろん当社負担です お客様のリクエストには全力でお応えいたします！ まず、我々の素晴らしい商品の数々を とくとご覧くださいませ！ webmaster:山田一郎

ただし、NN（ネットスケープ）では、より多めに左があく傾向がありますので、 NNと比較しながら使用するのがベストでしょう

1×1テーブル

　でも、どうしても最初の改行位置で、しかもテキストを揃えて表示したい！という時の切り札は、 1×1テーブルです！テーブルに関する詳細は、また別の項でふれることにしますが、 皆さんは「テーブル」といえばExcelなんかで作成された整然とした表を思いうかべるでしょうが、 WEB SHOPの実際の現場では テーブルを「いわいるテーブル表組み」として使用する場合より以下の場合が多いのです。
  1. ページレイアウトの隠れた骨組み
  2. 商品展示の際の飾り枠
  3. プライス表示
  4. 立体ボタン
  5. ラインマーカーやエリアペイント等の部分着色
そこでタグとして以下を丸暗記＆認識してください。閉じタグが逆順なのにご注目ください。

<TABLE><TR><TD>
</TD></TR></TABLE>

　これであなたは、どこにでも置くことのできる四角形を手にいれた！と理解して ください。テーブル配置のコツはまずBORDER=1として外枠を見えるようにしておいて 配置完了後にBORDER=0にすることです。 BORDERは外枠の太さを示すもので、通常指定がないと0で、でないことになっています。 TABLEのすぐ後に半角スペースをはさんでBORDER=1としてみましょう。 改行位置は元どおりに<BR>をうってみてください

■index.htm-メモ帳
ファイル(F)　編集(E)　検索(S) ヘルプ(H)
<HTML>

<HEAD>
<TITLE>ＡCLUB ホームページ </TITLE>
</HEAD>

<BODY BGCOLOR="#FFFAFO">
<CENTER>

<H1><FONT COLOR=red>ようこそＡClubへ</FONT> </H1>

</CENTER>
<TABLE BORDER=1><TR><TD>

<FONT COLOR=green>
私達はまごころで商売をしているＡClubです！<BR>
よろしくお願いします！<BR>
送料、振込料はもちろん当社負担です<BR>
お客様のリクエストには全力でお応えいたします！<BR>
まず、我々の素晴らしい商品の数々を<BR>
とくとご覧くださいませ！<P>

webmaster:山田一郎
</FONT>

</TD></TR></TABLE>

</BODY>
</HTML>

A CLUBホームページ-Microsoftインターネットエクスプローラ
ファイル(F) 編集(E) 表示(V) 移動(G) お気に入り(A)　ヘルプ(H)

ようこそＡClubへ

私達はまごころで商売をしているＡClubです！
よろしくお願いします！
送料、振込料はもちろん当社負担です
お客様のリクエストには全力でお応えいたします！
まず、我々の素晴らしい商品の数々を
とくとご覧くださいませ！

webmaster:山田一郎

　さあ、ここまで学習されたあなたなら、これをどうやって真ん中に配置するか？ 簡単に正解をみつけられるでしょう。
そうです！CENTER内に収めた後、BORDER=0（枠をなくす）にすればいいんですね！

■index.htm-メモ帳
ファイル(F)　編集(E)　検索(S) ヘルプ(H)
<HTML>

<HEAD>
<TITLE>ＡCLUB ホームページ </TITLE>
</HEAD>

<BODY BGCOLOR="#FFFAFO">
<CENTER>

<H1><FONT COLOR=red>ようこそＡClubへ</FONT> </H1>

<TABLE BORDER=0><TR><TD>

<FONT COLOR=green>
私達はまごころで商売をしているＡClubです！<BR>
よろしくお願いします！<BR>
送料、振込料はもちろん当社負担です<BR>
お客様のリクエストには全力でお応えいたします！<BR>
まず、我々の素晴らしい商品の数々を<BR>
とくとご覧くださいませ！<P>

webmaster:山田一郎
</FONT>

</TD></TR></TABLE>

</CENTER>
</BODY>
</HTML>

A CLUBホームページ-Microsoftインターネットエクスプローラ
ファイル(F) 編集(E) 表示(V) 移動(G) お気に入り(A)　ヘルプ(H)

ようこそＡClubへ

私達はまごころで商売をしているＡClubです！
よろしくお願いします！
送料、振込料はもちろん当社負担です
お客様のリクエストには全力でお応えいたします！
まず、我々の素晴らしい商品の数々を
とくとご覧くださいませ！

webmaster:山田一郎

どうです。すっきりしたでしょう。行揃えのテクニック、よく復習して自分のものにしておいてくださいね。 さあ、明日からいよいよ画像を配置していきましょうね〜

今日のタグ
<P ALIGN=""></P >段落揃え
<P >　段落　 単独タグ
<BLOCKQUOTE></BLOCKQUOTE>左右にスペース
<DL></DL>左文字をインデント (連続使用可）
<TABLE><TR><TD>
</TD></TR></TABLE>１×１表組み
私は「ここ」でつまづいた！

「を」がうてない

　最初「を」がうてなくてメールもなるだけ「を」が付かない文章で返信していました（笑）
「を」はWOでうてます！ちなみに小さい「ぁ、ぃ、ぅ、ぇ、ぉ」はLA,LI,LU,LE,LOで出るようです。

「~」チルダがうてない

　私のＩＢＭ　DOS/V機ではチルダの場所でチルダがでません。こりゃこまりました。 みたいHome Pageが見ることができません！色々試した結果 Shift+^で出てきます。そうなら、そうとちゃんと書いておいてよぉ＞ＩＢＭ

スペースが反映されない

　おかしい？いくらスペースキーをうっても、HTMLの文章に反映されない！ 僕の環境下でのお話ですが、Shift+スペースでうったものは、スペースとして認識されて、 単にスペースだけ打った場合は全くHTMLには反映されませんでした。

｜←Chapter3へ ｜目次にもどる ｜→Chapter5へ ｜

kasaya.comBACK HOME