■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
【 Webプログラミング Code Sample 】 Since2001/11/23
Code010: 続・HTMLとは何か！(後編)
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
Produced by ichikoro.com
▼毎週月曜日配信です。
▼等幅フォントでご覧いただくとキレイに見えます。
▼登録・解除はこちらから可能です。
< http://www.ichikoro.com/webp/ >
※バックナンバーへのリンクもあります。
※お友達にもぜひお勧めください(^^)/
─【Contents】───────────────────────────────
--. Plan ..................... 発行予定のネタ一覧
21. Sample ................... 水平線(罫線)：HRタグ
22. Sample ................... 半角スペースやタグを有効にする：PRE, XMPタグ
23. Sample ................... コメント文：<!-- -->
24. Sample ................... METAタグ: その1
25. Sample ................... METAタグ: その2
26. Sample ................... METAタグ: その3
27. Sample ................... METAタグ: その4
28. Sample ................... METAタグ: その5
29. Sample ................... METAタグ: その6
30. Sample ................... METAタグ: その7
※続編になります。
まずはこちらをお読みください。
< http://www.ichikoro.com/webp/back_list/ >
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
発行予定のネタ一覧
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
みなさんこんにちは、編集者のかつべです。
今引越しの準備に翻弄しています。部屋の中にはダンボールが山積みになっており、
谷間のような空間でこのメルマガを書いています。
引越しの度に改めて思うのは、お金が大量に出て行くのもありますが、手続きの
煩雑さです。こう、一発でスパッとできないものでしょうか。お手ごろな価格だ
ったら、代行業者なんかあって欲しいものです。
お、こんなところにもビジネスのアイデアが(^^;
※といいつつ、やはり出費が一番痛いのですが(笑)
さてさて、ここのところHTMLに終始していますが、今後どういう風に展開していく
予定かまとめてみました。迷走すると発行者もつらいですので(^^;
以下がWebプログラミングで今年取り上げる予定の内容です。
※注意!
内容が確定していませんので、回数はあくまで
目安程度にご覧ください。ぶれる可能性大です(^^;
【 Now → 】 (1)HTMLとは何か！
(2)スタイルシート入門 (全5回)
(3)C言語入門(全15〜20回)
│
└MS-DOSで覚えるCUI入門(全1回)
(4)Perl入門(全15〜20回)
│
└正規表現講座(全2〜3回)
(5)CGIを極めよう！(全10回)
│
└ Cookieも合わせて
(6)SSI入門(全1回)
(7)奥義 JavaScript入門(全10回)
(8)これまでの技術でゲームを作ろう＜詳細未定
皆さんからのリクエストや、インターネットの動向、ライターの気分によって都度見
直していきます。ご意見やご要望などありましたら、ぜひお寄せください。
今後、最新のラインナップは巻末に掲載する予定です。
・ご意見、ご要望
< mm-webp@ichikoro.com >
これまでに配信しましたバックナンバーは、こちらからご覧いただけます。
・Webプログラミング バックナンバー
< http://www.ichikoro.com/webp/back_list/ >
さぁ、前置きが長くなりましたが今週も行って見ましょう！
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
21.Sample 「水平線(罫線)：HRタグ」
──────────────────────────────────────
さてさて、今週の一発目は水平線(罫線)です。
<HTML>
<HEAD>
<TITLE>必殺!Webサイト</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<H2>必殺!Webサイト</H2>
<P>
ないようないようないようないようないようないよう<BR>
ないようないようないようないようないようないよう<BR>
ないようないようないようないようないようないよう<BR>
</P>
<HR>
(C)2002 M.Katsube
</BODY>
</HTML>
このHRタグを使うことで、ご覧のような水平線を引くことができます。
HRとは Horizontal Rule の略です。
属性として下記の物が用意されています。
・align ........... この水平線の位置を調節できます。
left：左寄に表示
center：中央に表示
right：右寄りに表示
何も指定しない時はcenterになっています。
が、これは通常単独で使用することは少ないでしょう。
width属性でサイズを指定しないと、何をここで指定し
ても変わらないからです(^^;
・noshade ......... 通常IEやNCでは立体的な罫線を引きます。この属性を指定した
場合、立体的な線ではなくベタ〜とした線にすることができま
す。
<HR noshade>
といった具合に指定します。
・size ............ 罫線の高さを特定することができます。
※昔の携帯電話では、これを悪用したメールを送ると
フリーズしたりしましたが.....。
・width ........... こちらは幅を指定します。
ピクセル数、パーセンテージでの指定が可能です。
実は、いずれの属性もHTML4.0では不適切とされています。
見た目にかかわる物は、ほぼすべてスタイルシートで記述する動きに
ありますが、当分の間は使用しても問題ないでしょう。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
22.Sample 「半角スペースやタグを有効にする：PRE, XMPタグ」
──────────────────────────────────────
タグを表現するためには、
< → <
> → >
に変換し、
<HTML>
とすることで表示できます。
また半角スペースは
で表せると以前解説しました(*1)
ただ、これだと大量のHTMLや文章を載せる時は涙が出てしまいそうになります。
検索置換すりゃいいんですが、後から変更などを加えることを考えると、もう少
し楽な方法が欲しいものです。
そこであらわれたのがこのXMPタグです。
<HTML>
<HEAD>
<TITLE>必殺!Webサイト</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
このページはこんなソースで書かれています<BR>
<XMP>
<HTML>
<HEAD>
<TITLE>必殺!Webサイト</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<H2>必殺!Webサイト</H2>
<P>
ないようないようないようないようないようないよう<BR>
ないようないようないようないようないようないよう<BR>
ないようないようないようないようないようないよう<BR>
</P>
<HR>
(C)2002 M.Katsube
</BODY>
</HTML>
</XMP>
</BODY>
</HTML>
ところが、このタグはHTML4.0で廃止されてしまいました。
現在は同様の機能を持っているPREタグの使用が推奨されています。
XMPをPREに置き換えて実行してみてください。やっていただくと分か
りますが、半角スペースなどは反映される反面、タグはそのまま実行
されてしまいます。つまりタグを表現する際には
< → <
> → >
の変換が必要になってしまいます。
*1 ...... 詳しくはバックナンバーの“Code002: HTMLとは何か！(前編)”
をご覧ください。
< http://ichikoro.com/webp/back_list/?cd=00002 >
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
23.Sample 「コメント文：<!-- -->」
──────────────────────────────────────
長〜いページを作る時などに、作った人間だけがわかるようなメモ書きのような
物を埋め込むことができます。
<HTML>
<HEAD>
<TITLE>必殺!Webサイト</TITLE>
<!--
・変更履歴
2002/01/10 M.katsube ファーストリリース
2002/01/11 M.katsube タイトル変更
-->
</HEAD>
<BODY bgcolor="#FFFFFF">
<!-- タイトル -->
<H2>必殺!Webサイト</H2>
<!-- 内容だよん -->
<P>
ないようないようないようないようないようないよう<BR>
ないようないようないようないようないようないよう<BR>
ないようないようないようないようないようないよう<BR>
</P>
<HR>
<!-- コピーライト -->
(C)2002 M.Katsube
</BODY>
</HTML>
といった具合です。
<!-- と --> の間にはさまれた言葉が対象になります。
複数の行にまたがってもかまいません。
一般的にこのことを“コメント”と呼んでいます。ちなみに、<! と-- の
間に空白が含まれてはいけません。また、コメント内では二つ以上のハイ
フンを使ってはいけません。というわけで、
<! -- ←だめだよん -->
や、
<!-----------------------------------------
これもダメだよん
----------------------------------------->
というようなコメントを書いてはいけません。
プラス、コメントの中にコメント文を入れることもできません。
※実際のところ、解釈してくれるブラウザもあるようですが、
安全のため上記のことはしない方がよいでしょう。
活用法として、一時的に消したい内容や、変更を加える際にバックアップ
のためコピーをコメントアウトしておくということも考えられます。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
24.Sample 「METAタグ: その1」
──────────────────────────────────────
これまでHEADの中に書けるタグは、TITLEしか紹介してきませんでした。
他にもHEADにはたくさんの情報を記述することができます。その一つに
METAタグと呼ばれるものがあります。
HEADに書かれるのはその文書の情報ですから、通常ここに書かれたものが
表に出ることはなかなか無いでしょう。
※そういう意味で言うと、TITLEタグは色々なところで
活用されますね(^ ^)
さてさて、ではMETAタグとは何なのでしょうか？
これが一言で言うのは難しいのですが、
「製作者が追加できる、文書内容、文書についての情報」
というところでしょうか。
次項から具体例を示したいと思います。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
25.Sample 「METAタグ: その2」
──────────────────────────────────────
METAタグは上の項で説明したとおり、HEADの内部で使用します。
<HTML>
<HEAD>
<META name="Author" content="M.Katsube">
<TITLE>必殺!Webサイト</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
〜内容〜
</BODY>
</HTML>
上記の例は、制作者を指定しました。
<META name="Author" content="M.Katsube">
ちなみに、これを書いたからって別段何も起こりません（笑）
ただ一般的に
<META name="○○" content="××">
というのは、検索エンジンなどに情報を提供します。
<META http-equiv="○○" content="××">
というのはブラウザに情報を渡します。
※微妙に違いますが説明するとワケ分からなくなりますので、
httpの話が出てきたときにもう一度詳しく取り上げます。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
26.Sample 「METAタグ: その3」
──────────────────────────────────────
もう少し例を見て見ましょう。
<HTML>
<HEAD>
<META http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT">
<META name="Author" content="M.Katsube">
<TITLE>必殺!Webサイト</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
〜内容〜
</BODY>
</HTML>
というのは、この文書の有効期限のような役目を果たします。
キャッシュから消えることを期待して書くこともできますが、
必ずしもブラウザがサポートしているとは限りません。
今度は、ロボットタイプの検索エンジンで検索した際に、ひっかかってほしい
キーワードや説明文を指定します。キーワードはカンマ(',')で通常区切ります。
<META NAME="Description" content="ここには説明文が書けます">
<META name="keywords" lang="ja"
content="たい焼き,どら焼き,大判焼き,今川焼き,たこ焼き">
Googleなど、検索エンジンによっては無視される場合もあります。
infoseekでは、長さに制限があったりしますので、確実に検索エンジンの
ロボットに読み込まれるものではありません。あまり期待しない方がいい
でしょう。
また、これらを必ず指定するようにしておけば、社内などでシステムを組むとき
に活用することもできますよね。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
26.Sample 「METAタグ: その4」
──────────────────────────────────────
なんとなく、どんなタグなのか分かっていただけたでしょうか？
さぁ、今度はかなり重要なトピックスです。
以前16進数のお話をしたときにも解説しましたが、パソコンは1と0の人間でいうと
ころの2進数で演算をしています。早い話、パソコン上の全ては数字で操作されてい
るのです。この“あ”というような文字も、内部では何らかの数値で扱われているわ
けです。
この文字に割り振られている値というのは、とあるルールがあります。でないとAさん
のパソコンで見れたデータが、Bさんのパソコンでは見れないというような現象がおき
てしまうからです。これを「文字コード」といいます。
たとえば、英数字などはASCIIコードと呼ばれ、下記のように定められています。
・ASCIIコード一覧表
http://www.psl.ne.jp/perl/pdojo00b.html
※ちなみにこの表はかなり有名です。
たとえば、半角の'A'なら41(16進数)です。この表をまるまる覚える必要はありま
せんが、プログラマになるのが目標なら“主要”ないくつかは覚えておいた方が、
データの規則性を発見する際などに役に立ちます。
アルファベットだけなら言いのですが、日本語などのように異様に数がある場合は、
このASCIIコードのように一つの数字ではまかないきれず、二つの数字で扱うことに
なります。つまり、一般的に言うと
アルファベット ← 半角 ← 1byte(一つの数字で表現する)
漢字などの日本語 ← 全角 ← 2byte(二つの数字で表現する)
なわけです。
※ざっくりとした説明ですので細部は異なります。
ここではあまり詳しくふれませんが歴史的な背景からこの文字を割り振る
ルール、文字コードは複数あるのです。しかも困ったことに、他の人間か
らはどの文字コードなのか100%判別する手段がないのです。
※出現する文字によっては分かる場合があります。
そこで、あらかじめどの文字コードで書かれているか指定しないと、いわゆる
「文字化け」を起こしてしまう可能性があります。
※WindowsのIEだと、表示 → エンコード で文字
コードを選べますよね？(^^)
やはり詳しくはふれませんが、使っているOSによって下記のように
分類できます(ファイルを作成したOSです)。
Windows → シフトJIS
MacOS → シフトJIS
UNIX → EUC
メールでは普通は、JISを使います。
また最近のWindowsは内部でUNICODEと呼ばれる文字コードを使用している
ようです(←Windowsの詳細はあまり詳しくありません(^^;)
無論、複数の文字コードに対応しているソフトであればWindows上でEUCを使用
することも可能です。
長くなりましたが、この文字コードをあらかじめMETAタグで“的確に”指定し
ておけば、ユーザーが文字化けに合う確立は非常に少なくなると思われます。
そこで、
<META http-equiv="Content-type" content="text/html; charset=文字コード">
このように指定します。
文字コードの部分は、
・シフトJIS Shift_JIS
・EUS euc-jp
となりますので、
<META http-equiv="Content-type" content="text/html; charset=Shift_JIS">
という一文になります。
逆に誤った文字コードを指定すると、無論化けてしまいますのでご注意を。
また、2byteコードが出てくる前に指定する必要がありますので、HEADタグの直後
に記述する習慣をつけた方がよいでしょう。
この話題について、もっと詳しく知りたい場合は下記のサイトが参考になります。
・日本語の文字コード
http://www.asahi-net.or.jp/~bd9y-ktu/html4rec_f/jis.html
・日本語と文字コード
http://kanzaki.com/docs/jcode.html
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
27.Sample 「METAタグ: その5」
──────────────────────────────────────
まだまだMETAタグの話は続きます。
もうお腹いっぱいでしょうか？(^^;
今度は実際に動きが見られますよ！
さぁ、このサンプルを実行してみてください。
<HTML>
<HEAD>
<META http-equiv="refresh" content="10">
<TITLE>クライアントプル</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
10秒ごとに再読み込みします。
</BODY>
</HTML>
これは10秒ごとに、自動的に再読み込みをします。content属性の値がそのまま秒数
になりますので、ここを調整してください。よくチャットで自動的に再読み込みが
されるのは、このタグを使っている場合が多いです。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
28.Sample 「METAタグ: その6」
──────────────────────────────────────
上の項を、もうすこし拡張してみましょう。
<HTML>
<HEAD>
<META http-equiv="refresh" content="3;URL=http://www.isize.com/">
<TITLE>りふれっしゅ</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
3秒後に移動します。
</BODY>
</HTML>
今度はこうすることで自動的にページを移動できます。
時々、引越しをしたサイトに出会ったときに、“3秒後に自動的に移動します”とい
うのはこれを使っている場合が多いです。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
29.Sample 「METAタグ: その7」
──────────────────────────────────────
ブラウザがキャッシュしないような指定になります。
<META http-equiv="pragma" content="no-cache">
ただ、ブラウザに依存しますので必ずしもキャッシュされないとは限りません。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
30.Sample 「METAタグ: その8」
──────────────────────────────────────
ちょっと上の方で解説し忘れましたが、ロボットタイプの検索エンジンに読み
込まれたくない時、下記のように指定すると効果がある場合があります。
<META name="robots" content="noindex,nofollow">
詳しい書き方は、こちらのサイトをご覧になってください。
・ロボット型検索エンジン攻略でアクセスアップ
http://www.robot-search.com/
http://www.robot-search.com/search_04.htm
----------------------------------------------------------------------
★デジタル製品購入前にクチコミ評価をチェック┏━━━━━━━━━━━┓
★ＰＣ・ネットで困ったら、相談しよう！ ┃ 株式会社リクルート ┃
★売れ筋ランキングもチェック！ ┃ＩＳＩＺＥ ＰＣ相談室┃
★もちろん登録料・利用料一切無料です！ ┗━━━━━━━━━━━┛
http://ad.trafficgate.net/e/m.pl?h=10137&g=6&m=92&t=mail
----------------------------------------------------------------------
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
編 集 後 記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
こんにちは、いかがでしたでしょうか？
METAタグって、本当に奥が深いですね〜。
実はHEADに記述できるタグはまだまだあります。
おいおい説明しますので、今しばらくお待ちくださいませ。
コンビニで清算する時、最後に必ず“客層”のボタンを押していると思うのです
が、こっそり見ていると時々ショックを受けます。
だいたいどこのコンビニのレジも一緒なようで、客層らしきボタンは2列になって
おり、
青列 9 19 29 39 49
赤列 9 19 29 39 49
てな感じになっています。おそらく男で25歳っぽかったら、青い29のボタンを
押されるのでしょう。だいたい29あたりを押されるのですが、この間ロー○ン
で39を押され、ビビリました(^^; 次の日もう一度行くと49を押されてしまい
ました(ーー;)
※ちなみに私は20代前半です。
しかも、マーケティングのデータとして役にたってないぞ、○ーソン(笑)
こうしてお客を失っていくのではないかと密かに思ったりして。
というか、あのボタンは何なのだ！？
正体をしっているかた、ぜひ教えてくださいませ( ^.^)( -.-)( _ _)
まぁ、それはさておき、来週も予定通り月曜日にお送りする予定ですが、
もしかしたら引越しがらみで遅れるかもしれません。ごめんなさい(;^_^A
ちなみに、来週はいよいよフォームのお話です。
ではではまた来週お会いしましょう (^-^)/~~
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
【 Webプログラミング Code Sample 】
発 行 ： ichikoro.com
発行責任者 ： 勝部 麻季人
< katsube@ichikoro.com >
発行部数 ： 1435部(前回)
Webサイト ： < http://www.ichikoro.com/webp/ >
お問い合わせ先 ： < mm-webp@ichikoro.com >
Powerd by まぐまぐ
All Right Reserved, CopyRight(C) 2001 Webプログラミング Code Sample
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
