programing0613
@programing0613

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

styleタグの中でfor文を使用してクラスを生成したいのですがうまくいきません

styleタグの中でfor文を使用して
.t0{ border: 5px solid $player[0]['first_color']};

.t1{ border: 5px solid $player[1]['first_color']};

.t2{ border: 5px solid $player[2]['first_color']};

.t3{ border: 5px solid $player[3]['first_color']};

.t4{ ・・・・・・・・

を実現し、別のfor文でループしているdivタグにクラスとして付与したいのですが、以下のコードでうまく動作しません。
原因がわかる方がいらしゃったら、ご回答の方をよろしくお願いいたします。

該当するソースコード

<?php

//省略します

?>

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <?php for ($k = 0; $k < $user_num; $k++) { ?>
        <div class="<?php echo '.t' . $player[$k]["team_id"]; ?>">
            <div class="img-box">
                <img src="<?php echo $player[$k]["img_path"] ?>" alt="NoImage">
            </div>
        </div>
    <?php } ?>
</body>

<style>
    <?php for ($k = 0; $k < $user_num; $k++) { ?>
    <?php $class_name = 't' . $player[$k]["team_id"]; ?>
    <?php $first_color = '#' . $player[$k]['first_color']; ?>
    <?php echo "." . $class_name . "{ border: 5px solid " . $first_color . " };" ?>
    <?php } ?>
</style>

</html>
0

2Answer

styleタグ中にfor文などを使い実現することは可能なのでしょうか。

はい、可能です。
PHPが処理される時点ではHTMLタグに意味はないので、styleタグだけ特別ということはなく、他と同じようにifでもforでも使うことができます。

Webアプリケーションの仕組みとして、サーバーサイドのPHPがHTMLを作り、それをクライアント(個々の端末)にダウンロードすることでブラウザがそれを描画させます。
つまりクライアントに引き渡すまでに正しいフォーマットのHTMLになっていれば良いので、その方法はHTMLタグに縛られることはありません。

1Like
<body>
   SSI風のphp差し込み
</body>

<style>
    SSI風のphp差し込み
</style>

表示順番も大切ではないでしょうか?

1Like

Comments

  1. @programing0613

    Questioner

    スタイルタグボディータグの下の方に移動させたのですが、なおうまく動作しません。

  2. うまく動作しません

    スタイルシートが生成されないのでしょうか?
    スタイルシートが生成されるが、想定した制御ができないのでしょうか?

    因みに、ファイル単体で試験できますか?
    php test.php

    スタイル側のbodyのように記述するのはどうでしょうか?

  3. @programing0613

    Questioner

    ファイル単体で実行してみたところエラー箇所が浮き彫りになり、問題を解決することができました。
    丁寧なご回答をありがとうございました。

  4. 問題を解決することができました。
    解決できて、おめでとうございます。

    スタイルシートは生成されています。
    つまり、スタイルシートは正しく、javaScriptの方が間違っていると云うことでしょうか?
     既読者のために、解決編の披露をお願いします。

Your answer might help someone💌