毎週金曜日配信 What's New 2002/8/23
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
初心者のためのホームページ作り
http://www.scollabo.com/banban/
＜第15号＞
banban@scollabo.com
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
残暑お見舞い申し上げます。
この講座はタグを覚えてテキストエディタだけでホームページを作るという、ど
ちらかというとやや専門的な作業が中心になります。各種の専用のオーサリング
ソフトとは一線を画して、思い通りのプロ並みのＨＰを作ることが出来ます。
時には専門的で難解な言葉も出てきますが、なるべく初心者にも分かりやすく
解説していきます。どうぞ、気軽な気持ちでお付き合いください。講座をすすめ
る中で分からない点がありましたら遠慮なくメールください。
当講座ではHTML4.01を中心とした文法が主体となっています。なお、このマガ
ジンは等幅・等長フォントでお読みいただくと快適に読めるようになります。
今週の課題■ テーブル その３ （今回は少し難しいかもしれません。）
■ アンケート結果
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆今回はテーブルによるレイアウトの表現を中心に講座を進めます。ある意味で
はテーブルを使うハイライトかもしれません。
初心者にはちょっと難しいと思いますが、繰り返し何度もお読みください。
ポイントとして、どこまでが横の行で、どこまでがセルの範囲なのかをつかんで
おくことが大切です。
これから作るのは、実際にアメリカのサイトにあるトップページを少し変えたも
のです。かなりカラフルなページが出来上がります。少し長くなりますが気合で
入力してください。
スタイルシートを多用しますので、コロン「：」、セミコロン「；」を間違え
ないようにタイプしてください。コピーしてしまう手もありますが、自分で入力
しながら意味を理解することが上達のコツです。入力ミスも上達への道です。
がんばりましょう。
テキストエディタ（SimpleTextやメモ帳など）を立ち上げて下記のようにタイ
プします。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>テーブルのレイアウト表現</title>
<style type="text/css">
<!--
table { width: 100% }
td { height: 100px }
td.gr { background-color: #090;
width: 25% }
td.bl { background-color: #009;
width: 25% }
td.yw { background-color: #ff0;
width: 50% }
td.rd { background-color: #f00 }
td.or { background-color: #f90;
color: #fff;
text-align: center }
td.dg { background-color: #099;
color: #fff;
font-weight: bold }
td.rbl { background-color: #cff;
color: #009;
font-weight: bold;
font-size: x-large }
td.line { border-top: 100px solid purple;
background-color: #cfc;
padding: 5px;
color: #f00;
text-align: right }
h1,h2 { margin: 0px }
ul { margin: 0px;
padding: 1em;
list-style-type: none }
-->
</style>
<title>テーブルのレイアウト表現</title>
</head>
<body>
<table cellpadding="0" cellspacing="0" summary="テーブルにおけるレイアウ
トのサンプルを表示します">
<tr><td class="gr">
<img src="images/space.gif" width="1" height="1" alt=""></td>
<td class="yw">
<img src="images/space.gif" width="1" height="1" alt=""></td>
<td class="bl">
<img src="images/space.gif" width="1" height="1" alt=""></td>
</tr>
<tr><td class="rd">
<img src="images/space.gif" width="1" height="1" alt=""></td>
<td class="or">
<h1> Web for beginner</h1></td>
<td class="dg" rowspan="2" valign="top">
<ul>
<li>Element</li>
<li>Propaty</li>
<li>Value</li>
</ul></td>
</tr>
<tr><td class="rbl" colspan="2">
<ul>
<li>HTML -- Hyper Text Markup Language</li>
<li>CSS --- Cascading Style Sheet</li>
</ul></td>
</tr>
<tr><td class="bl">
<img src="images/space.gif" width="1" height="1" alt=""></td>
<td class="yw">
<img src="images/space.gif" width="1" height="1" alt=""></td>
<td class="gr">
<img src="images/space.gif" width="1" height="1" alt=""></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" summary="テーブルにおけるレイアウ
トのサンプルをもう１つ表示します">
<tr><td class="line"><h2>Latest Update Aug,23,2002</h2></td>
</tr>
</table>
</body>
</html>
入力が終わりましたら保存します。いつものように半角小文字で
test_19.html と、必ず拡張子「.html」を忘れないようにします。
保存後、test.html をダブルクリックしてブラウザで見てみましょう。
なお、保存時の文書名は、ご自分で好きな名前をつけてもかまいません。必ず
拡張子「.html」だけは忘れないでください。これだけは半角小文字です。
うまく表示できない場合は、どこかにタイプミスがあります。例えば、ダブル
コーテーション 「 " 」が閉じ忘れたり、「 > 」 の閉じ忘れが多いようです。
また、終了タグの忘れも表示できない場合がありますので、もう一度見直して
ください。
スタイルシートやHTMLでは皆さんに見やすくするために、わざと改行を多くし
ていますが、まったく問題ありません。ブラウザはちゃんと表示してくれます。
上記HTMLの実行結果は本誌サイトにも掲載しました。お手数ですが、ご覧いただ
けると参考になると思います。
URL http://www.scollabo.com/banban/magazine/index.html#sample_01
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
（Tips）
セルの横幅を最初の横列しか設定しませんでした。
通常、テーブルでは最初に決められた幅で、その下の行にも同じ幅を表示し
ます。
この特質を利用して、最初の行で幅を設定しました。色の設定は私が勝手に
決めたものです。コンテンツや色を自由に変更してください。
◆解説
スタイルシートから
■ table { width: 100% }
テーブルの幅を、いっぱいの100％としました。
幅を指定する値には、ピクセル単位と、％があります。％は相対的な幅、つま
りユーザの画面のブラウザの幅に対して決定される値になります。
（注：この100%とは、親要素に対して100%となります。上記HTMLでは、親要素
は、bodyとなっています。）
■ td { height: 100px }
すべてのセルの高さを100ピクセル分に設定しました。％は使えません。
■ td.gr { background-color: #090; width: 25% }
セルの背景色を緑色に、横幅を25％としました。
この幅の値には、ピクセル単位と％で使うことができます。
（注：ここでの25％はテーブル全体の幅の25％という意味になります。）
■ td.bl { background-color: #009; width: 25% }
セルの背景色を青にした以外は上記と同じです。
■ td.yw { background-color: #ff0; width: 50% }
セルの幅を 50％にしました。背景色は黄色です。
■ td.rbl { background-color: #cff; color: #009; font-weight: bold;
font-size: x-large }
セルの背景色を薄い青、文字色を濃い青としました。文字を大きくかつ強調さ
せました。
■ td.rd { background-color: #f00 }
セルの背景色を赤色にしただけです。幅の設定はありません。
■ td.dg { background-color: #099; color: #fff; font-weight: bold }
セルの背景色をやや濃い青緑として、文字色を白、文字を強調させました。
■ td.or { background-color: #f90; color: #fff; text-align: center }
セルの背景色をオレンジ色、文字色を白、位置を中央に設定しました。
■ td.line { border-top: 100px solid purple; background-color: #cfc;
padding: 5px; color: #f00; text-align: right }
セルの上部に枠線を表示させ、紫色で高さを 100ピクセルとしました。セル内
の背景色を薄い緑色で、余白を５ピクセル分取り、文字を右寄せに、文字色は
赤色に設定しました。紫の枠線がセルのようでとても面白い効果があります。
■ h1,h2 { margin: 0px }
見出し要素の２つをまとめて設定しました。カンマで区切ることにより、複数
の要素に対して設定することができます。
ここでは、一切の余白を０に設定しました。
■ ul { margin: 0px; padding: 1em; list-style-type: none }
リストを表示させる要素の余白を０とし、リスト内の余白を１文字分取りまし
た。また、通常黒丸の行頭のマーカーも消してしまいました。
●HTML
■ <meta http-equiv="Content-Style-Type" content="text/css">
スタイルシートを使う場合には、必ずヘッダ部に記述してHTTPサーバにその情
報を受け渡します。
■ <style type="text/css"> 〜 </style>
style要素は必ずヘッダ部に記述します。 type="text/css" はMIMEタイプで、
これもHTTPサーバに記述内容がスタイルシートであることを伝えます。
なお、この要素内で <!-- と -->は、スタイルシートに対応していないブラウ
ザに対して無視させるための安全策です。必ず記入しましょう。
■ <table cellpadding="0" cellspacing="0" summary="テーブルに 〜 ">
セル内の余白、セル間の余白を無くしました。summary 属性は音声ブラウザに
テーブルの情報を伝えるためのものです。この属性を書かなくても問題ありま
せんが、視覚障害者への配慮として記述することをお奨めします。
■ <td valign="top">
セル内のデータの位置を上側に表示させるための属性です。この valign属性は
テーブル内の、td、th のみ使用可能です。それ以外は非推奨扱いになります。
他の値として、middle、bottom、baseline があります。
デフォルト値（ブラウザの初期値）は、middle 真ん中に表示されます。
■ <td class="gr">
セルのスタイルシート td.grを呼ぶためのクラス属性です。この指定がないと
スタイルシートは反映されません。
（クラス属性については、いずれ講座で説明します。）
■ rowspan="2" colspan="2"
セルを連結する属性です。
rowspan="2" 縦列のセル２個分を結合します。
colspan="2" 同じ横列のセルを２個分結合します。
■ <img src="images/space.gif" width="1" height="1" alt="">
セル内のダミーです。この画像は透明でブラウザには何も表示しません。
データセルには何か入れないといけないので、ダミーとして使用しました。
この画像は、以前にもご案内したとおり、本誌サイトから圧縮ファイルとして
配布しているものです。まだ入手していない方は、下記サイトで。
ダウンロード先は http://www.scollabo.com/banban/daf/material.html
（いつも使っているフォルダの中に、imagesという名のフォルダを作って、そ
の中に、解凍した画像を入れてください。パスの関係上必要な処置です。）
なお、画像が入手できない環境の方は、下記のように記述してください。代用
になると思います。
<td> </td>
は、Web上のすべての言語で共通するスペースを意味します。
およそ、半角１文字分のスペースが確保できます。文法的にはあまりお奨め
できませんがブラウザは表示してくれます。あくまでも臨時です。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
（Tips）
セルの中には、画像以外に、スクリプトや動画、アプレットなどのオブジェク
トを入れることができます。
（Tips）
テーブルの横幅を決めるにはスタイルシート以外にも、table 要素内でも記述
できます。width属性を使います。
例： <table width="100%" 〜 > ピクセル単位か、％単位で設定。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆テーブルの中にテーブルを入れる
いわゆるテーブルの入れ子というもので、セルの中にテーブルを記述して入れ子
にします。慣れないうちはややこしくなってしまいますが、設計段階で整理して
おくと理解が早いと思います。
ポイントとして、入れ子にするテーブルは、データセル（td）の中で記述する
ようにします。
ちょっと長くなりますが、作ってみましょう。スタイルシートを用います。入力
の際に、コロン「：」、セミコロン「；」を間違えないように。
（下記のテーブルは横１列しかありません。）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>テーブルの入れ子</title>
<style type="text/css">
<!--
td.sub1 { background-color: #3c3;
color: #fff;
padding: 10px;
white-space: nowrap }
td.sub2 { background-color: #f30;
color: #fff;
padding: 10px;
white-space: nowrap }
td.sub3 { padding: 20px }
td.sub4 { background-color: #f09;
color: #fff;
padding: 10px;
white-space: nowrap }
td.sub5 { background-color: #06f;
color: #fff;
padding: 10px;
white-space: nowrap }
h1 { color: #f00;
text-align: center }
ul { margin-top: 1em;
margin-left: 10px;
list-style-type: none }
strong { font-size: larger }
-->
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" summary="メインテーブル">
<tr><td valign="top"> <!-- 横列１つ目のセルの始まり -->
<!-- ここから入れ子のサブテーブルです -->
<table cellpadding="0" cellspacing="0" summary="サブテーブルその１">
<tr><td class="sub1"><strong>お料理教室</strong>
<ul><li>お弁当のお惣菜</li>
<li>お酒の肴</li>
<li>簡単味噌汁</li>
<li>残り物の工夫</li>
</ul></td></tr>
<tr><td class="sub2"><strong>季節の野菜料理</strong>
<ul><li>かぼちゃの煮付け</li>
<li>なすの味噌焼き</li>
<li>トマトのソース作り</li>
<li>そら豆の豆腐和え</li>
</ul></td></tr>
</table>
<!-- サブテーブル終わり -->
</td> <!-- 横列１つ目のセルの終わり -->
<td class="sub3" valign="top"> <!-- 横列２つ目のセルの始まり -->
<h1>ばんばんの健康料理</h1>
<p>残暑を乗り切るためにも栄養たっぷりの料理が欠かせません。健康のため
にも野菜を摂るようにしましょう。</p> <!-- １行で記述してください -->
</td> <!-- 横列２つ目のセルの終わり -->
<td valign="top"> <!-- 横列３つ目のセルの始まり -->
<!-- ここも入れ子のサブテーブルです -->
<table cellpadding="0" cellspacing="0" summary="サブテーブルその２">
<tr><td class="sub4"><strong>スタミナ料理</strong>
<ul><li>激辛カレー</li>
<li>鶏胆の煮付け</li>
<li>うなぎの蒲焼</li>
<li>ニンニク料理</li>
</ul></td></tr>
<tr><td class="sub5"><strong>さっぱり料理</strong>
<ul><li>カラフル冷麦</li>
<li>夏野菜のソーメン</li>
<li>スタミナサンドイッチ</li>
<li>冷たいデザート</li>
</ul></td></tr>
</table> <!-- サブテーブル終わり -->
</td> <!-- 横列３つ目のセルの終わり -->
</tr> <!-- 横列すべての終わり -->
</table> <!-- メインテーブルの終わり -->
</body>
</html>
入力が終わりましたら保存します。いつものように半角小文字で
test_19.html と、必ず拡張子「.html」を忘れないようにします。
上記HTMLの実行結果は本誌サイトにも掲載しました。参考にしてください。
URL http://www.scollabo.com/banban/magazine/index.html#sample_02
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
適当にコンテンツを配しました。お気に召さない方は自分なりのコンテンツを記
述してください。色についてもお好きなように変更してみてください。
テーブルの横の行は３つのセルから成り立っています。左と右側のセルの中に
入れ子のテーブルを記述しています。
真ん中のセルには見出し要素と段落を表わす p要素を記述しています。この中
に適当な画像を入れていただいてもかまいませんが、あまり大きなサイズの画像
では不意な横スクロールが発生する可能性があります。
◆解説
スタイルシートから
■ td.sub1 { background-color: #3c3; color: #fff; padding: 10px;
white-space: nowrap }
セル内の背景色を緑色に、文字色は白に設定しました。セル内の余白は10ピク
セル分とってコンテンツに余裕を持たせています。
white-space: nowrap このスタイルシートの属性は、セル内のテキストを改行
させないものです。通常ブラウザは、横幅に余裕がない場合、不用意に改行し
てしまいます。その不用意な改行を禁じたものです。
■ td.sub2 { background-color: #f30; color: #fff; padding: 10px;
white-space: nowrap }
セル内の背景色をオレンジ色にした以外は上記と同じです。
■ td.sub4 { background-color: #f09; color: #fff; padding: 10px;
white-space: nowrap }
これもセル内の背景色をピンク色にした以外は同様です。
■ td.sub5 { background-color: #06f; color: #fff; padding: 10px;
white-space: nowrap }
これもセル内の背景色を青色にした以外は同様です。
■ td.sub3 { padding: 20px }
セル内の余白を20ピクセル取っただけです。
■ h1 { color: #f00; text-align: center }
見出しを表わすh1要素に、文字色を赤、位置をセンタリングに設定しました。
■ ul { margin-top: 1em; margin-left: 10px; list-style-type: none }
リストアイテム要素 ulのマーカーを無しとして、余白（マージン）を上側か
ら１文字分、左側からは10ピクセルにしました。
■ strong { font-size: larger }
文字を強調させる strong要素の文字の大きさを一段大きくしました。
HTMLから
■ <table cellpadding="0" cellspacing="0" summary="メインテーブル">
テーブル内のセル内の余白、セル間の余白を０としました。これを記述しない
と、ブラウザが勝手に余白を設定してしまいます。
table要素は、ここから </table> までがテーブルであることを表わします。
■ <tr><td valign="top">
tr要素はテーブルの横の業であることを現します。この中にデータセル（td）
や、ヘッダセル（th）を配します。
td=valign="top" データセルの垂直方向の位置を指定します。これを指定する
ことでデータセル内のデータ（コンテンツ）は上側に寄せられて表示します。
指定がない場合は、初期値として真ん中で表示します。
■ <!-- ここから入れ子のサブテーブルです --> コメントです。
<!-- と --> に囲まれた内容はブラウザは表示しません。この中にコメント
やメモなどを記述して、後で編集する時などすぐに見つけられて便利に使えま
す。大きなテーブルや段落などに使うといいでしょう。
（Tips）
p要素について説明します。この<p>を使うと、代表的な視覚系ブラウザでは、
改行＋改行というような表示をします。多くのHTML解説書でも、改行＋改行と
解説しています。
しかし、それは明らかな間違いです。改行＋改行としているのは、ブラウザ
が勝手に表示してしまうだけのことです。この要素はブロックレベル要素です
から改行はしますが、もともと何も空白は持っていないのです。
スタイルシートで、p { margin: 0px } と記述すると空白は一切消えてしまい
ます。このことでも分かるように、改行＋改行ではないということがはっきり
理解できます。
つまり、ブラウザが勝手にマージン（余白）を表示しているのです。これは
ul、ol要素も同様にそのような傾向があります。おそらくブラウザ側で、ここ
は見出し、ここは段落、ここはリストだから分かりやすいように１文字分の余
白をつけてやろうという「親切心」なのかもしれません。
だからといって、<p> </p>というように空の段落を記述して空白を作る方法
は決してよくありません。W3Cのトップページでそのような記述がありますが、
明らかな文法違反です。W3Cでも誤った文法を犯すとは恐れ入りました。
W3Cでは、空の段落を記述した場合、ブラウザは無視するようにソフトウェア
メーカーに対して指導しています。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆テーブルを早く表示させるには
先々週も述べました通り、テーブルの表示はすべてのデータが読み込んでから順
次ブラウザ上で表示されます。これは各セル内の横幅や高さをブラウザが判断し
て表のレイアウトを決定するために仕方がないことでしょう。
テーブルの入れ子ではさらにその傾向が強まります。入れ子をたくさん入れす
ぎると表示までの時間が思ったよりもかかってしまい、訪問者に逃げられてしま
います。入れ子はほどほどにしましょう。
テーブルのセルの幅を気にしないのであればスタイルシートの記述で素早く表
示させることが可能です。ただし、今のところNetscape、Macintoshの MSIEは対
応していません。
構文 table { table-layout: fixed } あるいは
<table style="table-layout:fixed">
これはブラウザがテーブルの１行目を読み込んだ瞬間にレイアウトを決定して
表示させる属性です。もともと横幅などを指定していない場合にのみ有効です。
デフォルト（初期値）は auto でテーブル全体を読み込み後に表示します。
なお、これはテーブルでページ全体のレイアウトを構成する場合には不向きで
す。これを指定すると、かなり悲しい結果になるでしょう。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
今回はここまで、ではでは・・
今週のおさらいはＷｅｂページにも掲載しましたので、是非見ておいてください。
ＷｅｂページはHTML分の実行結果のサンプルもあり、より分かりやすく説明して
います。あわせて過去の記事のおさらいも掲載しています。
（今週のおさらい）
http://www.scollabo.com/banban/magazine/
次回は、コンテンツの位置のコントロールについて、２週にわたって詳しく解説
します。より実戦的なテーマとなるでしょう。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆アンケート結果
本当にたくさんのアンケートの返信をありがとうございます。アンケートをお寄
せいただいた方には、すべてコメントをつけてお礼の返信をさせていただきまし
た。また、お寄せいただいた御意見には、今後の講座に工夫を凝らして、生かし
たいと考えております。
■ 本誌の講座の難易度
難しい 21％
理解できる 42％
ほとんど理解できる 37％
難しいと思われる方が多いことについて、講座の工夫が足りないのかと反省し
ています。今後に期待してください。
■ スタイルシートについて
難しい 25％
理解できる 60％
ほとんど理解できる 15％
思っていたよりも理解されている方が多いようです。しかし、25％の方には難
しかったようで、この点も講座内容を見つめ直す必要がありそうです。
■ HTMLについて
難しい 14％
理解できる 58％
ほとんど理解できる 28％
HTMLで使われる要素について理解されている方が多いのはうれしい反面、まだ
よく分からない方も存在することには責任を感じています。この点を今後どの
ように表現していくかが課題になります。
■ メールマガジンの読みさすさについて
読みにくい 0％
まぁ読みやすい 76％
読みやすい 24％
内容がかなりのボリュームになってしまう場合があり、この点について苦労し
ているところでもあります。読みにくいといわれる方がいなかったのは幸いで
すが、まだまだ向上させる必要もあると思っています。
■ 読者の使用ＯＳ
Windows98/98SE 35％
WindowsME 35％
Windows2000 17％
WindowsXP 4％
Mac OS（8.5以上） 9％
圧倒的にマイクロソフト社の WindowsＯＳが多く、91％を占めています。残念
ながらUNIX系のＯＳは１人もいませんでした。
■ 読者の使用ブラウザ
Internet Explorer 5.0 4％
Internet Explorer 5.1 15％
Internet Explorer 5.5 36％
Internet Explorer 6.0 37％
Netscape 6.0 2％
Netscape 7.0 5％
Opera 1％
複数お答えいただいたものも集計しました。これも圧倒的に MSIE が多く全部
で92％というシェアを占めています。恐るべしマイクロソフト！
■ 読者の通信環境
CATV 28％
ADSL 15％
ISDN 42％
ダイヤルアップ 15％
いわゆるブロードバンド（高速常時接続）通信環境は、43％となっています。
世間一般の数値よりも講座読者では大きな数字だと思います。
それでもまだまだ普及したとはいえない数値で、コンテンツのサイズには配慮
が必要な状況には変わりありません。
■ 広告掲載について
許せない 0％
少しなら許せる 85％
許せる 15％
マガジン内での広告掲載についてたずねたところ、許せない人は１人もいませ
んでした。大変ありがたいことです。
ただ、メールマガジン配信で儲けようという気はサラサラありません。多く
のメールマガジンでは広告掲載が当たり前になっていますが、１誌くらい広告
が一切ないというのもいいだろうと思っています。
読者の皆様の寛大な気持ちだけでもうれしく思っています。当分の間、本誌
では広告の掲載はありません。
（広告を入れるスペースがあるくらいなら講座に力を注ぎたいものです。）
アンケートをお寄せいただいた中から、厳選なる（？）抽選を行い、当選者には
こちらからメールにてご案内させていただきました。
抽選に漏れた方には、申し訳ありません、あしからず。
なお、厳選なる抽選とは、印刷したアンケートを放り投げて一番遠いところに
飛んだ順で決めました。極めて原始的で乱暴なやり方で申し訳ありません。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、お使いのOS、通常使っているブラウザ、使っているテキ
ストエディタなど、なるべく分かりやすく制作環境を明記していただけると回答
しやすくなると思います。
発行/編集 ばんばん
協 力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/ （ID 0000090196）
誤字・脱字・変換ミス・表現欠乏などには平に御容赦願います。なお、マガジン
のすべての記述に誤りがある場合、叱咤と罵声と共に私まで突きつけていただく
と幸いに思います。
バックナンバー こちらで公開しています。
プレーンテキスト http://www.scollabo.com/banban/magazine/magazine.html
各号のおさらい http://www.scollabo.com/banban/magazine/
まぐまぐの過去記事 http://backno.mag2.com/reader/Back?id=0000090196
配信の変更・中止はこちらです。
個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助か
ります。
当サイトにて http://www.scollabo.com/banban/magazine/magazine.html
まぐまぐにて http://www.mag2.com/m/0000090196.htm
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
＜えでぃた〜ず・るーむ＞
今回のレイアウトに使うテーブルのHTMLはずいぶん苦労しました。何度書き直し
たか分からないくらいサンプルを作りました。
いざ、実際に作ろうとしてもなかなかアイデアが湧いてこないものです。アイ
デアとは、ある意味ではひらめきにも似たものがあり、自分自身のひらめきが枯
渇していることを実感しました。
JavaScriptまで考え、３ページ分くらい作りましたが、これはいずれ応用編で
使うことにしました。その際には配布の形をとりますので、改めてご案内します。
来週の配置のコントロールでも、悩みそうなテーマではあります。
アンケートで、たくさんの暖かい励ましをいただき、本当にうれしく感じまし
た。１人でコツコツやっていた甲斐があります。
マガジンを配信続けていく中で、読者の皆さんはどう思っているだろう？この
マガジンは役に立っているのだろうか？と疑心暗鬼になったりします。
今回のアンケートはすべて印刷し、大切にファイルしました。めげた時には読
み返すと、きっと勇気が出そうな気がします。重ねてお礼申し上げます。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中の内容について、無断で使用することを固く禁じます。
なお、記事中のスタイルシート、HTMLをご自分のページ作成に自由に使ってい
ただいても差し支えありません。
Copyright(C) 2002 www.scollabo.com/banban/
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
Copyright(C) 2002-3003 banban@scollabo.com