PHP

php内でcssを変化させる方法【PHPの中で動的にCSSを制御する】 




phpの内容に応じて、cssを変化させられたらどうでしょうか。

結果に応じて、表示/非表示を切り替えたり、色を変えたりすることが出来ます。
phpで、cssを制御する方法は、いくつかあります。

今回は、その中でも、私が実際に使った2つをご紹介します。

1.headタグの"style"の中にphpを記述する

このパターンは、HTML内の<style>タグ内にphpを埋め込む(入れ込む)方法です。
サンプルの場合、$testという変数が0の場合、"テストだよ!"の文字が、黒背景白文字に変わります。

基本的に、最初からphpの結果が返る場合に便利です。
<body>内に、再度<style><?php   ~  ?></style>書くことで、途中でCSSを制御することも出来ます。

ただし、プログラムが乱れるので、多用は注意が必要です。

また、実行の順番によりCSSが効かないこともあるので、!important を付ける方がいいかもしれません。

<!DOCTYPE html>
 
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="ここにページの概要が入ります。">
 
        <title>PHPでCSS制御</title>
  
      <style type="text/css">
       #test {
          background-color: #FFF;
          color: #000;
        }
        <?php $test = 0; 
        if($test == 0) { ?>
        #test {
            background-color: #000;
            color: #FFF;
        }
        <?php } ?>
   </style>

    <body>
        <p id="test">テストだよ!</p>
 
    </body>
</html>

2.クラスを付与して、CSSを制御する

個人的には、このやり方が確実です。

このサンプルも、前述の「headタグの"style"の中にphpを記述する」と同じ結果で、$testが0の時に文字の色が変わります。

HTMLのpタグのクラスには、phpを埋め込んでおきます。
phpの結果に応じて、クラスが付与されれば、class="test0"が効くことになります。

<!DOCTYPE html>
 
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="ここにページの概要が入ります。">
 
        <title>HTMLひな型</title>
       <!--<link rel="stylesheet" href="style.css">--><!--外部CSSの読み込み-->
      <style type="text/css">
      
        p {
          background-color: #FFF;
          color: #000;
        }
        .test0 {
            background-color: #000;
            color: #FFF;
        }
        
        </style>
        
        <body>
            
            <?php
            $test=0;
            $class="";
            if ($test==0) $class="test0";   
            ?>
            
            <p class="<?PHP echo $class; ?>">テストだよ!</p>
 
 
    </body>
</html>

ほかにもJavascriptでの制御などもあるそうです。
php内にCSS制御を埋め込みできると、display:noneにしたりして、表示/非表示が切り替えられるので、便利ですよね!

まずは上記2つで試してみるのはいかがでしょうか。

ほかにも良い方法がありましたら、教えていただけたら嬉しいです(*^^*)

下記の記事も、あわせて読んでみてください♪

▼Javascriptで、特定のCSSが効いているものだけを除外して取得する

相談・質問を募集しています。

記事に関する相談・質問を募集しています。

是非この機会にどうぞ
コメントでの質問も大歓迎です!

ハヤぶろぐのLINE@登録はこちら


メールの方はこちら




-PHP