|
|||||
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 テキストテキストテキストテキストテキストテキストテキスト
◎ 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 ?>; } ※このページは次の日付で、一部リライトしています。
リライト更新日: |