雑記

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