雑記
Web開発の現場では一部を除きフロントエンドとサーバサイドを中心に分業化されているケースが殆どである．とはいえ双方の業務において共通認識として，知っておかなければならない事も多々あるのも現状である．筆者の場合どちらかというと装飾・デザイン面にはほぼ興味がなく，サーバサイド処理等の技術的な内容に関心が偏りがちである．
フロントエンドといえばWordPress等のCMSに依存しがちの印象が強いが，本記事ではフロントエンドエンジニアにも知っておいてもらって損のない技術のひとつとしてPHPでCSSを制御する方法について解説していく．
CSS外部ファイルの読み込み
CSS外部ファイルは通常，拡張子cssとしHTML内に読み込む場合は下記のタグを記述する．
<link rel="stylesheet" href="hoge.css">
PHPでCSSファイルを制御する
今回はPHPで時間帯によって背景色と文字色を切り替えるCSS外部ファイルの作成方法を記述する．（拡張子については後述参照）
change_by_time.php
<?php
# タイムゾーンの設定（設定値: 日本）
date_default_timezone_set('Asia/Tokyo');
# CSSを記述するコード内でのヘッダ設定
header('Content-Type: text/css; charset=utf-8');
# 現在のシステム時刻（ゼロなしの時）を取得
$now = date('G');
# システム時刻5:00〜16:59までとそれ以外の時刻で背景色と文字色を切り替える
$bgcol = $now >= 5 && $now < 17 ? '#87ceeb' : '#000033';
$ftcol = $now >= 5 && $now < 17 ? '#000000' : '#ffffff';
?>
body {
background-color: <?= $bgcol; ?>;
color: <?= $ftcol; ?>;
}
上記ソースコードの重要点
タイムゾーンの設定は必須
date_default_timezone_set('Asia/Tokyo');
CSSを記述するコード内でのヘッダ設定
text/cssの部分を他の形式にするとCSSは反映されない．
header('Content-Type: text/css; charset=utf-8');
三項演算子を使用している
if文でも構わないがソースコード短文化のため，本記事ではネストの浅い三項演算子を採用している．
$bgcol = $now >= 5 && $now < 17 ? '#87ceeb' : '#000033';
$ftcol = $now >= 5 && $now < 17 ? '#000000' : '#ffffff';
【最重要】CSSファイルだが拡張子をphpとする
PHPで制御しているので，拡張子がcssだとPHP制御が効かなくなるので注意が必要．
change_by_time.css => change_by_time.php
実際にHTML内に埋め込む
sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS外部ファイルの読み込み -->
<link rel="stylesheet" href="change_by_time.php">
<title>タイトル</title>
</head>
<body>
<h1>テキスト</h1>
</body>
</html>
表示してみる
システム時刻5:00〜16:59
システム時刻17:00〜翌日4:59
↧