ゲーマー介護士さんがばとんはじめた。
やってみろよと言われたので、やってみることにした。
前にホムペをやっていた時も考えていたけど、実現せず。
「FF 100の質問」でぐぐると絶対に一番上にくる有名なやつを紹介。
ソースも配布しているので、ホムペに公開したい人は楽だけど、このソースをそのまま流用しても4.01Strictどころか、Transitionalなページすら作れないから注意して。あくまでソースは参考程度に。
スクウェアゲーム同盟サーチ
http://www.cute.to/~sds/※聞いたことない人はあまりいないかもしれません。いたらゴメンナサイ。私自身はサイトをまじまじと見たことないのですが(^^;)
では、本題。私はよくテーブルを作るのにexcelを使います。xlsファイルをテキスト形式にするとタブ区切りになるので、タブをHTMLタグに変換してやっているわけですな。
しかし、注意点が一つ。掲示板とかブログではユーザが入力しやすいように改行タグ
を使わなくともEnter押すだけで改行になるわけですが・・・つまり、テーブルタグ ～
までの間のテーブルの内容以外の所に改行を入れてはいけないという罠があります。実際に記事に反映させる場合は改行を外しましょう。
例を紹介。実際の記事に改行が挿入されるところには＜br＞と表現します。要素の属性は省略。
悪い例
<table>＜br＞
<tr><td> ～ </td></tr>＜br＞
<tr><td> ～ </td></tr>＜br＞
<tr><td> ～ </td></tr>＜br＞
<tr><td> ～ </td></tr>＜br＞
</table>＜br＞
テーブルをこのように編集すると、これだとテーブルの上部に無駄な改行スペースができる。
↓
スペース
スペース
スペース
・・・
テーブル
みたいなかんじで。なぜ上部なのかは仕様だからということで。
普通のページを作る場合はこれでいいんだけど。。。
大丈夫な例1
<table><tr><td> ～ </td></tr><tr><td> ～ </td></tr><tr><td> ～ </td></tr><tr><td> ～ </td></tr></table>＜br＞
編集するときに見難いですが、実際の記事に反映させる場合はこれが理想形。
大丈夫な例2
<table><tr><td> ～ ＜br＞
</td></tr><tr><td> ～ ＜br＞
</td></tr><tr><td> ～ ＜br＞
</td></tr><tr><td> ～ ＜br＞
</td></tr><tr><td> ～ ＜br＞
</td></tr></table>＜br＞
荒業。編集時の見やすさも記事に反映させる時も非常に楽なスタイル。
これはテーブルの内容の中で改行をしているので、悪い例のとは反映され方が違っています。
改行の＜br＞とは2行目を作るのではなく、これ以降に文章を作らない的な役割があるので、行が増えたりしません。
とりあえず、この大丈夫な例2の方法でばとんを作ってみる。
1.
http://www.cute.to/~sds/100.htmlから質問の内容をコピー。
2.excelにペースト。えっ？うまく表にならない？たぶんそれは私のようにFirefoxとか、IE以外のブラウザを使っているからかと思われ。その場合、貼り付ける時に形式を選択して張り付ければいいと思います。形式はテキスト形式で。
3.隣のセルにそれぞれ質問の答えを書いていきます。後に紹介する変換作業でレイアウトを考えるのであれば、セルを1～2列ぐらい離すといいかもしれません。
4.書いた内容をテキスト形式で保存するか、全部コピーします。
ここでTeraPadを使いたいと思います。
メモ帳と同じ、プレーンテキスト形式のファイルを作成することができるアプリケーションソフトです。
初めてPcを使用した大学時代から使っていますが、私の中ではもはやメモ帳じゃあ事足りないです。
TeraPad
http://www5f.biglobe.ne.jp/~t-susumu/5.TeraPadで編集。変換作業を行う場合は検索のところにある置換を選択。オプションの欄に\n=改行,\t=TAB,\\=\があると思いますが、それにチェックを入れてください。実はこれがカギです。
ここからがレイアウトを決める思案どころです。
まだタブ区切り段階なので、タブをどのように置換するかでレイアウトを自在にすることができます。
テクニックというよりはセンスの問題ですかね。
3.で行った作業によってレイアウトの自由度が変わります。
やり直したい場合はexcelで編集し直しましょう。
一応、下の例でクラス属性入れてるので、CSSでレイアウトできますよ。
もちろん、別の属性に置き換えてもおｋ。
いずれも1番目に「\n」をあえて「\n \n \n」に変換させているのは意図です。
これを入れないと途中で作った「\n」まで変換してしますからです。
A.1行に質問と答えをまとめるタイプ
一番オーソドックスで最も変換が簡単なタイプ。3.でセルを離す必要はなく、タブをタグに変換するだけです。
1.「\n」を「\n \n \n」にする
2.「 」を「\n</td><td class="b">」にする
3.「\t」を「\n</td><td class="c">」にする
4.「\n \n \n」を「\n</td></tr><tr><td class="a">」にする
5.一番最後の行に出てきた「<tr><td class="a">」だけを頭に持ってくる
6.テーブルタグの開始と終了をつける
B.質問と答えを別の行にするタイプ
ちょっと捻り。3.でセルを離す必要はなく、タブをタグに変換するだけです。
1.「\n」を「\n \n \n」にする
2.「 」を「\n</td><td class="b">」にする
3.「\t」を「\n</td></tr><tr><td class="c">」にする
4.「\n \n \n」を「\n</td></tr><tr><td rowspan="2" class="a">」にする
5.一番最後の行に出てきた「<tr><td rowspan="2" class="a">」だけを頭に持ってくる
6.テーブルタグの開始と終了をつける
C.質問と答えだけでなく、番号も別々に振りたいタイプ
捻り。3.で質問の隣のセルに番号を振ります。excelなので一気にフィルハンドルを引っ張ればいいだけですね。その番号から答えとの間を1列離してください。
1.「\n」を「\n \n \n」にする
2.「 」を「.」にする。見難いかな？半角ピリオドです。スペースとかが好きならそっちでも。ここは自由
3.「\t\t」を上と同じにする。「\t」と同じ変換ではダメなのでセルを1列開けた理由がここにあります
4.「\t」を「\n</td></tr><tr class="b"><td>A」にする
5.「\n \n \n」を「\n</td></tr><tr class="a"><td>Q」にする
6.一番最後の行に出てきた「<tr class="a"><td>Q」だけを頭に持ってくる
7.テーブルタグの開始と終了をつける
質問100コできてないので、とりあえず、ここまで。
