8/12/2010

携帯サイトで外部 CSS のようにスタイル付けをする

携帯サイトはあまりにも制限が多く、Javascript を携帯サイトで使えないため、なかなか美しいサイトを Flash 抜きでは作りづらい。正直、携帯サイトってうんざりすることが多い。もしターゲットユーザに壮年以上を含める場合、壮年以上の人は携帯の機種変更を長年していないことも案外多く、最新機種に併せた作り方ではレイアウトがイカれてしまったりする。こんな場合は table だって使えないし、CSS だって使わない方が無難だろう。しかし現代のウェブページの制作に慣れてしまうと、CSS の便宜性は使いたい。できれば 1 ファイルで管理したいから外部 CSS を使いたい。そんなときはどうすれば良いのか。

まず、スタイルを CSS ファイルに書かなければならないということはない。php に書いてしまえばいい。ページも php にすれば、include で読み込み、変数をスタイルとして使えばできる。例えば、文字色の赤や大きい文字を設定する場合は、こんな風にすればできる。

★/css/css.php
<?php
  $colorRed = " color='#ff0000'";
  $fontBig = " size='+3'";
?>


★/index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
    <title>タイトル</title>
    <? include "css/css.php"; ?>
  </head>
  <body>
    <font<? echo $colorRed; ?>>文字色が赤</font><br>
    <font<? echo $fontBig; ?>>文字サイズ大きめ</font><br>
    <font<? echo $colorRed. $fontBig; ?>>文字色が赤で文字サイズが大きめ</font><br>
  </body>
  </html>


php を include しているので head 内に放り込む必要はないけど、css の感覚からこう表記してみた。これだったら、私のようにプログラミング能力が高くない人でもスタイルを一括管理できる。

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.