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が効いているものだけを除外して取得する