今回からサーバ側の改良。
konohanaDBクラスにつけた自分の投稿関係の削除機能への対応と返す内容の検討っす。
極端な話、PHPで毎回動的に生成してるんだから
というように返す事だってできるんですが…
やっぱウェブブラウザでも表示できるHTML表記で返したいわけですよ。
で、そのために現在はtableタグを使ったページを返すようにしてるわけです。
HTML表記～？tableタグ～？な人は、ここらへんの激闘の記録その(131)～を読みましょう。
ちなみにSafariで上のように表示ページのソースを表示させるには、表示＞ソースを表示メニューね。
ま、これで十分なんですが…
もうちょっと商用サイトのようなオシャレな感じをね、出したいな、と。画像の大きさそろえたいなとか、早い話以下のような表示にしたいんですよ。
ただ～、あんまり装飾のためにPHPのソースを複雑にするのもな～。
と、いうのも正論なわけで…
ここらへんをうまく解決するためにCSS（Cascading Style Sheets）を導入することにしますた。
で、結果以下のようにあんまりソースの内容は増やさずに大幅に変更できたぞっと。
上にかぶさってるのが新しくCSSを使った記述で、下側が従来の記述っす。参考のために、PHPじゃなくHTML版で単独で見ることができるようにしたサンプル置いときます。
解凍してできるサンプルフォルダ内のmainlist-old.htmlてのが従来版、mainlist-new.htmlがCSS版。Safariにドラッグアンドドロップすれば表示結果を比較する事ができるっす。
ソースの理解にはXHTMLとCSSの情報が必要だけど、ここらへんは奥村晴彦教授のサイトがお勧め。
奥村晴彦教授のサイト：XHTMLとCSS
もちろん激闘の記録その(131)～その(155)を読むのでもOK。ふっ、めまいがする量ですな。
CSSの導入でなにをやったかというとtableタグからdivタグへの移行っす。divタグはHTMLテキストの範囲を指定するためのタグで、元々は画面上には大した影響は無いものなんですが、こいつにCSSを適用すると、矩形の大きさや配置方法、背景画像なんかを指定できるようになるんですな。
例えば以下のように記述されてるページがあったとすると
そのままだと以下のような表示にんるわけですが
こいつに
て一文を入れて、style.cssファイルを読み込ませると
って感じで、いきなり表示が変化するんですわ。
style.cssに何が書かれているかというと
という定義。
こいつが、divタグに働いて表示を変化させてるわけです。
margin（余白）の指定がいまいち正しくないように見えるのは、ページ全体を決めるbodyタグにもmarginが設定されてるから。
を追加してやれば
ほらスッキリ。
タグにはclass属性が設定できるので
なんて具合に外側のdivにrowっていうclass属性を設定しておいて、style.cssに
ってな感じでrow class属性を持つdivタグの設定を追加してやると
というように表示が変化するんですな。
なんてして、各classごとに設定を与えてやれば
はい、横置き液晶画面のアップ。
回り込み指定（float:leftという指定。また回り込めるかどうか判定するので幅の指定も必要になる。これがwidth:100pxという指定で100ピクセルの幅を指定している理由）もできるのでdivタグ全体に指定してやると～
なんかテーブルっぽくなってきた～。
んじゃ、row classのdivにだけ回り込みを解除させて、幅も大きめにしてみたら～
表っぽい～。
つ～わけで、CSSを使うとHTMLの内容を触らずにデザインを変更していく事が可能なんですな。
次回は、従来版では提案ページに移動するさいに隠しFORMとしていた問い合わせIDをURLに含めてGET形式で送るようにし、ページングもこのURLに表示させたい問い合わせIDを含ませる形で対応する予定。
konohanaDBクラスにつけた自分の投稿関係の削除機能への対応と返す内容の検討っす。
極端な話、PHPで毎回動的に生成してるんだから
写真パス1, 名前候補1, コメント1,
写真パス2, 名前候補2, コメント2,
・
・
写真パス2, 名前候補2, コメント2,
・
・
というように返す事だってできるんですが…
やっぱウェブブラウザでも表示できるHTML表記で返したいわけですよ。
で、そのために現在はtableタグを使ったページを返すようにしてるわけです。
HTML表記～？tableタグ～？な人は、ここらへんの激闘の記録その(131)～を読みましょう。
ちなみにSafariで上のように表示ページのソースを表示させるには、表示＞ソースを表示メニューね。
ま、これで十分なんですが…
もうちょっと商用サイトのようなオシャレな感じをね、出したいな、と。画像の大きさそろえたいなとか、早い話以下のような表示にしたいんですよ。
ただ～、あんまり装飾のためにPHPのソースを複雑にするのもな～。
と、いうのも正論なわけで…
ここらへんをうまく解決するためにCSS（Cascading Style Sheets）を導入することにしますた。
で、結果以下のようにあんまりソースの内容は増やさずに大幅に変更できたぞっと。
上にかぶさってるのが新しくCSSを使った記述で、下側が従来の記述っす。参考のために、PHPじゃなくHTML版で単独で見ることができるようにしたサンプル置いときます。
解凍してできるサンプルフォルダ内のmainlist-old.htmlてのが従来版、mainlist-new.htmlがCSS版。Safariにドラッグアンドドロップすれば表示結果を比較する事ができるっす。
サンプルプロジェクト：CSS.zip
ソースの理解にはXHTMLとCSSの情報が必要だけど、ここらへんは奥村晴彦教授のサイトがお勧め。
奥村晴彦教授のサイト：XHTMLとCSS
もちろん激闘の記録その(131)～その(155)を読むのでもOK。ふっ、めまいがする量ですな。
CSSの導入でなにをやったかというとtableタグからdivタグへの移行っす。divタグはHTMLテキストの範囲を指定するためのタグで、元々は画面上には大した影響は無いものなんですが、こいつにCSSを適用すると、矩形の大きさや配置方法、背景画像なんかを指定できるようになるんですな。
例えば以下のように記述されてるページがあったとすると
<div>
<div>1-a</div><div>1-b</div><div>1-c</div>
</div>
<div>
<div>2-a</div><div>2-b</div><div>2-c</div>
</div>
<div>1-a</div><div>1-b</div><div>1-c</div>
</div>
<div>
<div>2-a</div><div>2-b</div><div>2-c</div>
</div>
そのままだと以下のような表示にんるわけですが
見てわかるようにソース側の改行は意味を持たない。あくまでdivタグで囲まれている部分がひとつのブロックとして扱われ改行が入る。
ちなみにブロックごとに改行を加えない範囲指定にはdivではなくspanというタグを使う。
ちなみにブロックごとに改行を加えない範囲指定にはdivではなくspanというタグを使う。
こいつに
<link rel="stylesheet" type="text/css" href="style.css" />
て一文を入れて、style.cssファイルを読み込ませると
って感じで、いきなり表示が変化するんですわ。
style.cssに何が書かれているかというと
div {
margin:10px 10px;
background-color:#eee;
}
margin:10px 10px;
background-color:#eee;
}
という定義。
こいつが、divタグに働いて表示を変化させてるわけです。
margin（余白）の指定がいまいち正しくないように見えるのは、ページ全体を決めるbodyタグにもmarginが設定されてるから。
body {
margin:0;
}
div {
margin:10px 10px;
background-color:#eee;
}
margin:0;
}
div {
margin:10px 10px;
background-color:#eee;
}
を追加してやれば
ほらスッキリ。
タグにはclass属性が設定できるので
<div class="row">
<div>1-a</div><div>1-b</div><div>1-c</div>
</div>
<div class="row">
<div>2-a</div><div>2-b</div><div>2-c</div>
</div>
<div>1-a</div><div>1-b</div><div>1-c</div>
</div>
<div class="row">
<div>2-a</div><div>2-b</div><div>2-c</div>
</div>
なんて具合に外側のdivにrowっていうclass属性を設定しておいて、style.cssに
body {
margin:0;
}
div {
margin:10px 10px;
background-color:#eee;
}
div.row {
background-color:#066;
}
margin:0;
}
div {
margin:10px 10px;
background-color:#eee;
}
div.row {
background-color:#066;
}
ってな感じでrow class属性を持つdivタグの設定を追加してやると
というように表示が変化するんですな。
<div class="row">
<div class="a">1-a</div><div class="b">1-b</div><div class="c">1-c</div>
</div>
<div class="row">
<div class="a">2-a</div><div class="b">2-b</div><div class="c">2-c</div>
</div>
<div class="a">1-a</div><div class="b">1-b</div><div class="c">1-c</div>
</div>
<div class="row">
<div class="a">2-a</div><div class="b">2-b</div><div class="c">2-c</div>
</div>
なんてして、各classごとに設定を与えてやれば
body {
margin:0;
}
div {
margin:10px 10px;
background-color:#eee;
}
div.row {
background-color:#066;
}
div.a {
background-color:#f00;
}
div.b {
background-color:#0f0;
}
div.c {
background-color:#00f;
}
margin:0;
}
div {
margin:10px 10px;
background-color:#eee;
}
div.row {
background-color:#066;
}
div.a {
background-color:#f00;
}
div.b {
background-color:#0f0;
}
div.c {
background-color:#00f;
}
はい、横置き液晶画面のアップ。
回り込み指定（float:leftという指定。また回り込めるかどうか判定するので幅の指定も必要になる。これがwidth:100pxという指定で100ピクセルの幅を指定している理由）もできるのでdivタグ全体に指定してやると～
body {
margin:0;
}
div {
margin:10px 10px;
float:left;
width:100px;
background-color:#eee;
}
div.row {
background-color:#066;
}
div.a {
background-color:#f00;
}
div.b {
background-color:#0f0;
}
div.c {
background-color:#00f;
}
margin:0;
}
div {
margin:10px 10px;
float:left;
width:100px;
background-color:#eee;
}
div.row {
background-color:#066;
}
div.a {
background-color:#f00;
}
div.b {
background-color:#0f0;
}
div.c {
background-color:#00f;
}
なんかテーブルっぽくなってきた～。
回り込み指定（float:left）について
これは隙間があれば、左詰めで配置していけという指定。
というように、自分が入ることが出来る隙間がある場合、下には入らずに左詰めで入っていく。
この隙間があるかないかは、自分の親の領域に対するものであり、今回のようにdiv領域の中に入れ子状に配置されたdiv領域は、親のdiv領域に対して隙間があるかないかを判断する。
これは隙間があれば、左詰めで配置していけという指定。
というように、自分が入ることが出来る隙間がある場合、下には入らずに左詰めで入っていく。
この隙間があるかないかは、自分の親の領域に対するものであり、今回のようにdiv領域の中に入れ子状に配置されたdiv領域は、親のdiv領域に対して隙間があるかないかを判断する。
<div>
<div>1-a</div><div>1-b</div><div>1-c</div>
</div>
<div>1-a</div><div>1-b</div><div>1-c</div>
</div>
んじゃ、row classのdivにだけ回り込みを解除させて、幅も大きめにしてみたら～
body {
margin:0;
}
div {
margin:10px 10px;
float:left;
width:100px;
background-color:#eee;
}
div.row {
clear:both;
width:370px;
background-color:#066;
}
div.a {
background-color:#f00;
}
div.b {
background-color:#0f0;
}
div.c {
background-color:#00f;
}
margin:0;
}
div {
margin:10px 10px;
float:left;
width:100px;
background-color:#eee;
}
div.row {
clear:both;
width:370px;
background-color:#066;
}
div.a {
background-color:#f00;
}
div.b {
background-color:#0f0;
}
div.c {
background-color:#00f;
}
表っぽい～。
つ～わけで、CSSを使うとHTMLの内容を触らずにデザインを変更していく事が可能なんですな。
次回は、従来版では提案ページに移動するさいに隠しFORMとしていた問い合わせIDをURLに含めてGET形式で送るようにし、ページングもこのURLに表示させたい問い合わせIDを含ませる形で対応する予定。