Sponsored Link

その10．見た目改造の心得と小技

テーブル移動の際の注意点
ぶら：
ちょ〜っとだけ前回のテーブルいじってみようかな〜なんて…
小梅：
死ぬ気になった？んじゃあ、私がやってるテーブル改造時のやり方を言うね。
もちろんこれはあくまで私流のやり方であって、こうするべきというものじゃあないよ。
ぶら：
しゅた。（メモ用意）
小梅：
まず、途中でレイアウトがしっちゃかめっちゃかになることを覚悟する！
ぶら：
精神論かよ…
小梅：
事前にpet.cgiのコピーを取っておくのは常識として…全文プリントアウトする！
ぶら：
うひゃ。全部？
小梅：
テーブル制覇のページで判ったと思うけど、開始タグと閉じタグがバラバラになってるから、どれとどれが対応してるのかチェックするには、カラーペンを駆使して線ひっぱったりするのが一番判りやすいんだ。
私はそのために百均で10色ボールペンを購入したぞ。
ぶら：
なるほどねえ。
小梅：
次に、検索で「table」を探して、そこのborder=0（CGI中ではborder=\"0\"）になってるところを全部border=1（CGI中ではborder=\"1\"）にする！
ぶら：
え？それだと枠線が全部でちゃうよ？
小梅：
出ていいのよ。そうするとどの文章がどの枠の中に入ってるか判るもん。 そうすると、こうなる。

原寸で見たい人は画像をクリックしてね。
ぶら：
あ、なるほど。後でまた0に戻すんだね？
小梅：
枠線と枠線が重なって、見えない部分もあるけど、ないよりゃマシ。
枠線までピンクになってるのは、sub tabletopとsub tablebottomで囲まれた部分。
グレイの枠線なのは、sub bodytopとsub bodybottomで囲まれた部分およびsub barの部分。
ぶら：
なるほど、こうして見ていけばどの部分がどのテーブルに囲まれてるか、どこにどう<TD>が入るか判るね。
小梅：
テーブルの構造がややこしいと思うから、事前に自分がどういうレイアウトにしたいかを紙の上でじっくり考えてから実行に移すといいよ。
考えながら書き換えたりすると、間違えるからね。
それと、何度も言うけどよく判らない部分は絶対にいじらない。
大切な<form>や<input>タグの部分、変数の部分とかね。
そして、できれば完全な削除ではなく、過去のプチ改造のところでやったみたいに、元の行を#でコメント化して、新しい行を書くようにしてね。
ぶら：
#は１行に１個入れればいいのかしら？
小梅：
うん。ただあんまりコメント部分が多くなってくると逆にややこしくなるから、ある程度の確認ができたら完全に削除しちゃってもかまわないよ。
ぶら：
ある程度の確認て、どの程度？
小梅：
名前入力の画面、遊ぶ画面、遊んだ後の画面、ランキング画面を見て、レイアウトが崩れてたり見えない部分があったりしなければ、それでひとまずはOKかな。完全にやるなら、空き部屋の画面、ペットがいなくなった画面、次世代ペットを飼うための場面も確認するとばっちりだね。
ぶら：
空き部屋までは判る。けど、ペットがいなくなった画面なんてどうやって出すの？
小梅：
pet.datをいじるんです。「最後に餌をやった時間」にあたる数字、６項目めだね、この「1062054906」とかって数字の、位の高いほうの数字をどーんと減らしてしまいます。
「1022054906」とかね。そうすると「最後に餌をやった時間」がものすごく過去になるので…あー…飢え死にと。
ぶら：
なるほど。でもちょこちょこ変えるたびにFTPかあ。めんどくさいな
小梅：
ここまでやる気なら、自宅サーバ計画を実行したほうがいいね。安全性は二の次…あわわ、とにかく、楽！
CSSに注目してみる
ぶら：
もうちょっと楽な見た目改造ってないのぉ〜？
小梅：
う〜ん、前回もちょっと言ったCSS…スタイルシートという手もあるけど
ぶら：
あるんならもったいぶらずに早く教えてよ！
小梅：
いや、楽は楽だけどさ…CSSの記述のしかた知ってる？
難しくはないけど、白紙の状態だと話が長くなるからさ。
ぶら：
え…えーと…えへ。
小梅：
過去の回にも言ったとおり、CSS（スタイルシート）は装飾専門のタグみたいなもんなのね。
今サイト作る時には、骨組みはHTML、レイアウトや装飾はCSSというやり方に移行しつつあるの。
現在はHTMLだけでも表示できるけど、それはCSSがまだまだうまく動いていないからなのね。
ブラウザや環境によって表示できたり出来なかったり、ということが多いということを、まず頭に入れて置いてください。
ただまあ最近ようやく環境のほうも整ってきたから、CSS使ってるサイトが増えましたね。
ぶら：
どんなのがCSSなの？
小梅：
目の前にあるでしょ。このページCSS多用してます。
ぶら：
そーいやHTMLにはない罫線だ…
小梅：
今頃気づいたのかよ…まあいいや、んで、CSSを記述するには３つ方法があるけど、いちばん手っ取り早そうなのでいくね。
<head>
<style type="text/css">
<!--
a:link{
color:#0099cc;
text-decoration:none;
}
a:visited{
color:#009966;
text-decoration:underline;
}
a:hover{
color:#ff33cc;
text-decoration:none;
}
-->
</style>
</head>
こんなふうに、<head>と</head>の間でやります。
ぶら：
<head>と</head>の間ならどこでもいいの？
小梅：
うん。で、ここに書いたのはリンクに対する装飾なの。説明すると
a:link{　←リンク先がまだ飛んだことのないページの時
color:#0099cc;←色指定
text-decoration:none;←下線なし
}

a:visited{←飛んだことのあるページの時
color:#009966;
text-decoration:underline;←下線あり
}

a:hover{←カーソルを当てた時
color:#ff33cc;
text-decoration:none;
}
ブライト翔ぶ！
こんな感じに、カーソル当てると色が変わったり、ね。
ぶら：
HTMLの書き方に似てるけど違うって感じだね。
小梅：
うん。次に、pet.cgiでの話に行くね。
スタイルシートのサブルーチン
小梅：
さて、PET ROOMでスタイルシートを使ってるサブルーチンは、ずばり■L870のsub styleです。
ぶら：
あ、さっきやったリンクの指定がある。
小梅：
print "body, tr, td, th { font-size: $fontsize }\n";
は<body><tr><td><th>で囲まれた文字のサイズ指定ね。 これは変数になってるから、最初にやった設定部分で指定できます。
CSSでこうやって設定しておくと、<body><tr><td><th>で囲まれた部分は全部この文字サイズになってくれるって寸法よ。
print ".button { font-size: $but_sze; border : solid; border-width: $txs_bdr; border-color:$txc_bdr; background-color: $btc_bcg } \n";
これはボタンの設定。これもほとんど設定部分で変更できるけど、ポイントはこのborder : solid;。
ぶら：
ボーダーというからには…これが罫線！？
小梅：
オリジナルの設定だと
.button {font-size:10;border:solid;border-width:1pt;border-color:#FF9999;background-color:#FFCCCC}
となり、結果はこのとおり。

.button {font-size:10;border:double;border-width:2pt;border-color:#FF9999;background-color:#FFCCCC}
にしてみると…

border-widthが1ptだとくっついちゃってわかんないからね。
同様にborder:groove;だと
border:ridge;だと
border:inset;だと…………
border:outset;だと
border:dashed;だと…………
border:dotted;だと
ぶら：
わ、わ、わ…いろいろあるんだ…
小梅：
この罫線の指定はテーブルの罫線にも指定できます。
table{border:dotted;border-width:2pt;border-color:#FF9999;background-color:#FFCCCC}っていうのをスタイルんところに付け加えれば
こんなかんじに
あと、テーブルの色指定や背景色指定は■L358でやってるからpet.cgi内では必要ないよ。ボーダーだけに絞ろう。
table{border:dotted;border-width:2pt;border-color:#FF9999}
ぶら：
おっとー、もうひっかかんないぞ。
print "table { border:dotted;border-width:2pt;border-color:#FF9999 } \n";
だもんね
小梅：
あ、惜しいなあ。１つ大事なことを忘れてる。pet.cgiはテーブルを多用してるってこと。
ぶら：
あ、そうか。外のテーブルには罫線つけたいけど、中のテーブルには罫線つけたくない、なんて時は？
小梅：
ほほほ。気づいたか。そのためにはクラス指定という手があります。さっきの
print "table { border:dotted;border-width:2pt;border-color:#FF9999 } \n";
これを
print ".soto { border:dotted;border-width:2pt;border-color:#FF9999 } \n";
とします。
これをsub styleに追加します。 追加する場所はsub styleの{から}までの中であればどこでもいいよ。 そして、装飾したい<table>だけ<table class="soto">とします。
CGIの中で使う時にはもちろんエスケープして<table class=\"soto\">ね。
こういう指定の仕方すると、class="soto"にしたテーブルにだけ.sotoの装飾が適用されるの。
ぶら：
外側のテーブルだけなら■L358のとこだけでいいんだね。
こんな感じかな。
$table = "<table class=\"soto\" width=$tbsize border=0 cellspacing=0 cellpadding=0 align=center background=\"$tbbcground\" bgcolor=$tbcolor>";
小梅：
それやるとどうなるかというと
ぶら：
…ダサ
小梅：
角画像の始末もつけないとね。あと、バーとか背景の配色も変えると。そのあたりは設置する人の好みだね。
ぶら：
配色次第で、可愛い画面になりそうだね！
小梅：
うん。
スタイルシートについてもっと詳しく知りたい人は、とほほのWWW入門のスタイルシートのところを見るといいね。もちろん本を買ってもいいし。
というところで、このコーナーもいったん終了。
ぶら：
CGIについては？
小梅：
超基礎はとりあえずすんだと。
こっから先はかなり理屈っぽくなるし、私もまだ制覇してない部分があるからね。
今自分のPET ROOMの大改造してるから、それ済んだら旧バージョンの方をどんなふうにいじっていったか公開しようかなと。
ぶら：
ともあれ、おつかれー。
小梅：
またねー。
TOP >> 1 >> 2 >> 3 >> 4 >> 5 >> 6 >> 7 >> 8 >> 9 >> 10 >> 11

PET ROOMはMissing Linkさんが配布されているCGIゲームです

[コーナートップ] [ブライト翔ぶ！] [ぶらいとふぉーらむ]