cssを動的に変更するとレイアウトが崩れる。 - PHPプロ!Q&A掲示板

3339

  • 0P

cssを動的に変更するとレイアウトが崩れる。

質問日時 / 2011年8月8日 16:25    回答数 / 5件

Questioner:  koyaman  このエントリーをはてなブックマークに追加 

キーワード / css    動的    レイアウト   

php5.3.6です。
cssを動的に変更したいのですが、動的に変更すると、レイアウトが崩れてしまいます。

<A href=\"http://172.16.5.116/syun/season/hinmeiaccordion.php?hincd=".$row["hincd"]."\" target=\"_self\">でhinmeiaccordion.phpを呼び出す。

******hinmeiaccordion.php*******
<?php
function accordioncss() {
require_once("../../../data/pgcon.php");
require_once("lib/css.php");

...データベースからデータを取得する処理....
 //スライド画像の数に応じて幅をセットする。
switch ($p) {
case 3:
$width="167px";
break;
case 4:
$width="125px";
break;
case 5:
$width="100px";
break;
case 6:
$width="83.4px";
break;
case 7:
$width="72px";
break;
case 8:
$width="62.5px";
break;
}

return $width;
}

$a=accordioncss();
//ECHO $a."\n"; きちんと出力される。この場合:72px
wide($a);
?>

<?php
//HTMLヘッダーなどの作成
require_once("../../php/hpheader.php");

//タイトル
$ti="魚の紹介";
//パス
$path="../../";

//hpheaderインスタンスの作成
$h=new hpheader($ti,$path);

//リンクの作成
$h->linkadd("<link rel=\"stylesheet\" type=\"text/css\" media=\"all\" href=\"lib/set.css\" />");
...略...
?>

*******css.php********
<?php
function wide($widthcss) {
//echo $widthcss."\n";きちんと出力される。
return $widthcss;
}
?>

*******hrzexample.php(css.phpを読み込んでいる。)*******
<?php
require_once("./css.php");
header("Content-type: text/css");

$width1=wide();
//echo $width1."\n";

$height='400px';
echo <<< EOD
@charset "utf-8";

/*Handle*/
.handle3 {
float: left;
width: $width1;
height:$height;
text-align:center;
background: #666;
border: 1px solid white;
}

...以下略...
?>

*****set.css(hinmeiaccordion.phpでスタイルシートを読み込んでいるcss)*******
@charset "utf-8";

@import "hrzexample.php";
@import "hrzdefault.php";

アコーディオンを作成してくれる"jQuery"を使わしてもらっているのですが、"hinmeiaccordion.php"でスタイルシートを読み込んだタイミングでは、"hrzexample.php"の中の変数"$width1"の値は、変わっていないのでしょうか。

css.php内で、$wisthcss='72px';
または、hrzexample.php内で、$width1='72px';
ときちんと指定してやれば、レイアウトは崩れて表示されません。

スタイルシートを読み込んだ後に、cssが変更されているのでしょうか。
また"hrzexample.php"の中の変数"$width1"の値がいくらになっているかわかる手段は
あるのでしょうか。

わかりにくいですが、よろしくお願いします。

この質問への意見の募集は締め切られ、ポイントは既に配分されました。
意見を投稿することはできますが、ポイントを受け取ることはできません。



ツリー一覧

┣A01shimix#htmlやhttpの仕組みがわかっていれば間違いようがな
┃┗A01-1koyamanshimixさんご回答ありがとうございました。 html,h
┃ ┗A01-1-1shimix>というのは、php同志でGETやPOSTを使用するというこ
┃  ┗A01-1-1-1koyamanshimixさんわざわざコードまで書いていただきありがと
┣A02iroha_codeこの意見は投稿者によって削除されました。
┗A03kaitau>>CODE <script> jQuery(function($){ $('.handle3

回答一覧

並び替え:

A01
answerershimix [8月8日 17:43] (最終編集:8月8日 17:45)

#htmlやhttpの仕組みがわかっていれば間違いようがないと思うのですが(汗

>"hinmeiaccordion.php"でスタイルシートを読み込んだタイミングでは、
>"hrzexample.php"の中の変数"$width1"の値は、変わっていないのでしょうか。

text/htmlを返すhinmeiaccordion.phpと、text/cssを返すhrzexample.phpはブラウザからは別々にアクセスされます。htmlソースにimg要素を書いていればブラウザがその画像ファイルにアクセスするのと同じです。外部CSSであればブラウザが受け取ったhtmlソースを解析して読み込む必要がある外部CSSファイルと判断してからアクセスします。

つまりhttpリクエスト自体が別です。両方のスクリプトは各々単独に動作します。hinmeiaccordion.phpからhrzexample.phpへ何か値を渡したければQueryStringなどで渡すなどの方法を採らないといけません。


外部CSSでなく(hinmeiaccordion.phpがブラウザに返す)htmlソース内に全部書き込む(includeでhrzexample.phpを呼び出す=当然httpレスポンスなどは使わない)のであれば問題ないんでしょうけどね。

この意見に回答する

ツリーへ TOPへ

A01-1
replyerkoyaman [8月10日 09:21]

shimixさんご回答ありがとうございました。

html,httpの仕組みが分かっていませんでした。

>htmlソース内に全部書き込む
で、<head>内に
$h->linkadd("<style type=\"text/css\">);とやってcssを全て書いて、変数を受け付けられるように$h->linkadd("width:".photowide().";\n");としました。
photowide()は、phpで作成したfunctionです。(72pxとかが返ってきます。)
こうすればレイアウトが崩れずにうまくいきました。

しかし今回cssが長かったので、でもう一つの方法、

>hinmeiaccordion.phpからhrzexample.phpへ何か値を渡したければQueryString
>などで渡すなどの方法を採らないといけません。
というのは、php同志でGETやPOSTを使用するということなのでしょうか。
いろいろ調べてみましたが、"fsockopen関数"などを使うということなのでしょうか。
http://blog.promob.jp/fri/2009/05/phppost.html
ここのサイトを参考にして、
// 送信先のURL
 $url = "http://172.16.5.116/syun/season/hrzexample.php";

 // 送信内容
 // パラメータ
 $data = "wide=$width";
のようにそのまま使ってみたのですが、結果は、レイアウトが崩れたままでした。
やり方が間違っているかもしれません。
http://weble.org/2011/03/07/php-get-and-post-function
こういうサイトもありました。

上記の考え方で間違っていなかったらタイプミス等していないか調べてみてもう少しがんばってみます。
がんばってもダメでしたら、cssをべた書きする方法を採用しようと思います。

よろしくお願いします。

この意見に回答する

ツリーへ TOPへ

A01-1-1 満足
replyershimix [8月10日 10:31] (最終編集:8月10日 11:09)

>というのは、php同志でGETやPOSTを使用するということなのでしょうか。
>いろいろ調べてみましたが、"fsockopen関数"などを使うということなのでしょうか。

いえ、違います。「GETで渡す」というところまでは合ってますが、それを実現するのはQueryStringでいいです。

CSSでimportを使っているので多少面倒ですが、html側の記述(外部CSSの呼び出し)を

$h->linkadd('<link rel="stylesheet" type="text/css" media="all" href="lib/set.css.php?' . $width . '" />');

とphpスクリプトを呼び出すように変更してQueryStringで(「?」以降で)widthの値を渡します。

(lib/set.css.php)
  1. <?php
  2. header('Content-type: text/css');
  3. print '@charset "utf-8"' . PHP_EOL;
  4. if ($_GET['width']) {
  5.   print '@import "hrzexample.php?"' . $_SERVER['QUERY_STRING'] . ';' . PHP_EOL;
  6. } else {
  7.   print '@import "hrzexample.php;' . PHP_EOL;;
  8. }
  9. ?>
  10. @import "hrzdefault.php";
(hrzexample.php)
  1. <?php
  2. if ($_SERVER['QUERY_STRING']) { $widthcss = $_SERVER['QUERY_STRING']}
  3. require_once("./css.php");
  4. header("Content-type: text/css");
  5.   :
  6.   :
  7.  (以下略)


(蛇足)
他に渡すものが増える可能性があれば(皆無でなければ)、QueryStringで「?width=72」を付加して$_GET['width']で受け取るようにしてもいいかもしれません。

この意見に回答する

ツリーへ TOPへ

A01-1-1-1
replyerkoyaman [8月11日 16:00]

shimixさんわざわざコードまで書いていただきありがとうございました。

記述されたとおりにやってみたのですが、結果は、レイアウトが崩れた状態になってしまいました。使ったことが無いようなものなので戸惑いました。

やはり今回は、cssべた書きで決着しそうです。javascript(jQuery)に値を渡してということも考えてみましたが、".js"などといった別ファイルにすると結局は同じですね。

cssを動的に変更して反映させるというのは、別ファイルにすると難しいということですね。

いろいろとありがとうございました。

この意見に回答する

ツリーへ TOPへ

A02
answereriroha_code [8月10日 12:16]

この意見は投稿者によって削除されました。

ツリーへ TOPへ

A03
answererkaitau [8月11日 16:34]

  1. <script>
  2. jQuery(function($){
  3. $('.handle3').css('width',<?php echo json_encode($a)?>);
  4. });
  5. </script>

この意見に回答する

ツリーへ TOPへ

<<質問一覧へ



Pick Up Q&A

Q
ログファイルの中の空のデータ行を削除したい
 このエントリーをはてなブックマークに追加 
A
ログのデータ個数(列数)が固定で、空のログが"<><><>"だと既知であれば if ($line === "<><><>") { continue; } で読み飛ばしてもいいのでは? ...

>>続きを読む

まずは配列や文字列の扱いから、じっくり勉強して行きましょう。

▲解説者:岡本(アシアル株式会社 教育コーディネーター兼 システムエンジニア)