ヘッダー・コニファロゴ
phpを使ってcssを生成する簡単な方法

phpを使ってcssを生成する簡単な方法が、PHP-generated CSS magic - Pixarea Blogで紹介されていました。便利そうなので、試してみました。

変数に値を定義したphpをimportしてcssを生成しています。
htmlの<link rel="stylesheet" href="css/php2css-color.css" type="text/css" />から
cssを読み込み、phpをimportしています。

◎ php2css-color.cssの内容:
@import url(php2css-color.php);

私的なブログのようなページで、その日の気分により、色を変えたい…等という方には便利な方法です。cssの管理も楽になります。

以下色替えに特化した簡単なサンプルです。なお、サンプルのhtmlソースは省略していますが、各要素のスタイル指定には下段のphp内で定義しているid名、class名を使用しています。

◎ サンプル
sample1-color テキストテキストテキストテキストテキストテキストテキスト
sample2-color テキストテキストテキストテキストテキストテキストテキスト
sample3-color テキストテキストテキストテキストテキストテキストテキスト
sample4-color テキストテキストテキストテキストテキストテキストテキスト
sample5-color テキストテキストテキストテキストテキストテキストテキスト
sample6-color テキストテキストテキストテキストテキストテキストテキスト
sample7-color テキストテキストテキストテキストテキストテキストテキスト
sample8-color テキストテキストテキストテキストテキストテキストテキスト
sample box1
sample box2
sample box3
sample box4
◎ php2css-color.phpの内容
<?php
header("Content-type: text/css");
$bg = 'ffffff';
$bg1 = 'eeeeff';
$bg2 = 'eeffee';
$bg3 = 'ffffee';
$bg4 = 'ffeeee';
$bg5 = 'efefef';
$bg6 = 'ebebeb';
$bg7 = 'cfcfcf';
$bg8 = 'c0c0c0';
$color1 = 'FF3399'; 
$color2 = 'FF9933';
$color3 = 'CCFF33';
$color4 = '66FF33';
$color5 = '00FF99';
$color6 = '33FF99';
$color7 = '33CCCC';
$color8 = '3366CC';
$color9 = '666666';
?>body { background: #<?= $bg ?>; } div#sample1 { color: #<?= $color1 ?>; } div#sample2 { color: #<?= $color2 ?>; } div#sample3 { color: #<?= $color3 ?>; } div#sample4 { color: #<?= $color4 ?>; } div#sample5 { color: #<?= $color5 ?>; } div#sample6 { color: #<?= $color6 ?>; } div#sample7 { color: #<?= $color7 ?>; } div#sample8 { color: #<?= $color8 ?>; } div.sample1b { background: #<?= $bg1 ?>; color: #<?= $color9 ?>; border: 1px solid #cdcdcd; } div.sample2b { background: #<?= $bg2 ?>; color: #<?= $color9 ?>; border: 1px solid #cdcdcd; } div.sample3b { background: #<?= $bg3 ?>; color: #<?= $color9 ?>; border: 1px solid #cdcdcd; } div.sample4b { background: #<?= $bg4 ?>; color: #<?= $color9 ?>; border: 1px solid #cdcdcd; } div.sample5b { background: #<?= $bg5 ?>; } div.sample6b { background: #<?= $bg6 ?>; } div.sample7b { background: #<?= $bg7 ?>; } div.sample8b { background: #<?= $bg8 ?>; }
 

※このページは次の日付で、一部リライトしています。
リライト更新日:



 

戻るボタン
Copyright© 2019 Conifer,Inc. All rights reserved.