CodeIgniter ViewとCSSの思考

どう書くべきなのかを悩みつつ、viewファイルの作り方とCSSについて悩んでみました。
もくもく会なるものを知り、たまには自宅を飛び出して・・・ということで浅草国際通りのデニーズにていろいろ考え中。
いきなりNEKOGET MYFACEをCodeigniterで書くのは大変だった！ということで簡単に日記っぽいアプリをコーディングしてみました。どう書くべき？を悩みながらなので遅々としているわけですが、なんとか書けそうかなぁ？まで到達。

PC用のviewの組み立てについて

基本ファイル views/common/*
  • views/common/base.php
  • views/common/header.php
  • views/common/footer.php

controllers/hoge.phpで記述されるviewは必ず次のような書き方になる。

<?
$data['header'] = $this->load->view('common/header',$data,TRUE);
$data['footer']  = $this->load->view('common/footer',$data,TRUE);
$this->load->view('common/base',$data);
?>

当初考えたbase.phpの中身

・・・省略
<body>
    <?=$header;?>
    <?=$box;?>
    <?=$footer;?>
</body>
・・・省略

考え直したbase.phpの中身

・・・省略
<body>
<?=$header;?>
<div id="box">
    <? if(isset($boxmain)){ ?>
        <div id="boxmain"><?=$boxmain; ?></div>
    <? } ?>
        <? if(isset($boxsub)){ ?>
        <div id="boxsub"><?=$boxsub; ?></div>
     <? } ?>
 </div>
<?=$footer;?>
</body>
・・・省略

２カラムのレイアウトにしてみました。
id=”boxmain” はメインのコンテンツ
id=”boxsub” はメニューリンク等、サブコンテンツとなります。

CSS的にはfloatの設定をすれば、boxsubを右側に表示をさせることも左側に表示をさせることもできるので、文書としては先にメイン、次にサブ内容を表示させます。

先日参加したアクセシビリティセミナーでの教訓として、メインとなる文書は最初の方にあった方がいいということで、このような構成です。３カラムにするだけの情報量が無いことと、私自身が３カラムはあまり好きではないため、２カラムで作成。

id名にleft,right等をつけないのは、CSSの書き方によってid名が嘘になる為。

CSSの構造化
  • htmlタグに対する共通設定
  • フォントの設定
  • headerの設定
  • boxの設定
  • footerの設定
  • h1,h2,h3,h4,h5,h6に対する設定

(課題:これだけでは足りないはずなので、ここは後でさらに考える)

SKINテーマを切り替え可能にするフォルダ構成
  • /skin/テーマ名/images/*(画像ファイル）
  • /skin/テーマ名/css/*.css

テーマ名をconfigで設定することで、スキンテーマを切り替え可能にします。
cssファイルから呼び出される画像ファイルは、cssファイルから見た相対パスで取得できるため、テーマ名が切り替わることで、適用されるCSSファイルが変更され、そのCSSファイルから見た画像ファイルが利用できます。
また、スキンテーマを作成する際のモックファイルを準備しやすくなります。

モックファイルのセット
  • /index.html
  • /skin/テーマ名/css/*.css
  • /skin/テーマ名/images/画像ファイル

CSSファイルを１枚にするか？ 複数にするか？

これはすごく悩む訳で・・・・
CSSのclassの設定を class=”class1 class2″ といった設定ではなく、できるだけxhtmlの構造を生かしてのCSSにしたいと思います。
#追記：勉強用に書いているものは単純なつくりなので、とりあえずは1枚で対応してみます。

  • #header ul .glovalnavi{…}
  • #header li {…}
  • #header li a {…}
  • #header li a:hover{…}

(つづく）
#下書きも書かずに考えながら書いてるので、随時更新ですw
#そろそろバッテリー切れだ(残0:18)　　2008.08.03 01:01
#codeがわかりやすくなるようにプラグインを追加　http://www.chameleonic.org/plugin/php-hilightstring
#プラグインにあわせて、ちょっとだけ修正　2008.08.03 2:10