はもちくわ

コードについて自分なりの解釈を書いてます。

【PHP】値によってCSSを変える方法

今回書く方法は、あまり他で見たことないので、本来の使い方ではないのかもしれませんが、前の記事で書いた、妖精さんのいるサーバー世界を思い浮かべるとこんな方法でもいいんじゃないと私は勝手に使ってます。



今日の登場妖精は、この3人

f:id:hamochikuwa440:20210227014042j:plainf:id:hamochikuwa440:20210227014002j:plain

f:id:hamochikuwa440:20210227014013j:plain

webページは、PHPをP・ロボがHTMLに翻訳したコードを元にH・ブラックとC・レッドが作るわけです。

 

例えば、変数$cが0以下のときは、赤い表示にするという例を書いてみると、

 

HTML・PHP


    ==いろいろ省略==
<?php
  if($c<0){
    $des_c='red_t';
  }else{
    $des_c='normal_t';
  }
?>

<p class="<?php echo $des_c; ?>">
   <?php echo $c; ?>
</p>

 

CSS


.red_t{
   color : red;
 }
 
.normal_t{
   color : black;
 }
 

のような書き方で変更できます。
上のコードのHTMLとPHPは、見やすいかなと思ったので小分けで書いてますが、$cの表示のときは<?php ?>を2回繰り返すのは面倒なので、つなげて書いちゃえばいいです。

 

さらに私は上のコードより、もう少し省略してコードを書くことも多々あります。
条件によって、赤だけ変えるなら、PHPelse以降を書かずに、if文の前に$des_c="";と宣言しておき、CSS側の.normal_tクラスは書きません。P・ロボの翻訳結果は、class=""となるわけですが、C・レッドはclass=""は無かったこととしてくれるので、簡単につくるときはそうしています。
無視してくれることに甘えてるだけかもしれませんが、、、

 

省略したものがどんなコードになるかといいますと、

 

HTML・PHP


    ==いろいろ省略==
<?php
  $des_c="";
  if($c<0){
    $des_c='red_t';
  }

  echo '<p class="', $des_c, '">', $c, '</p>';

?>

 

CSS


.red_t{
   color : red;
 }

 

P・ロボが翻訳する時、変数の中が””の場合、HTML上は何も無かったことになります。PHPは書いたコードがそのまま動くイメージというより、妖精界の奥で翻訳したものが現実世界のブラウザに戻ってくるイメージです。なので、H・ブラックはPHPの入ったコードは見てないってことですね。
これと同じ考え方で、ループしながら値によってチェックボックスchecked入れるとか、セレクトボックスのoptionにselectを効かせることもできます。これはPOSTのたびに本当によく使いますね。

 

さて、いつも長くなるので今日はここまでにします。