CSSファイルでデザイン

レイアウトファイルとCSSファイルでウェブページのデザインをする。

レイアウトファイルとCSSファイルはセットになるので、レイアウトファイルにCSSのタグを書き込む。

このとき、CSSファイルを設置するディレクトリ名に css という名前は使えない。
css という名前は、ディレクトリ単位のCSSファイルで使用するため。

ルートに設置するか、ディレクトリを作って設置する場合は、css という名前で始まらないとうまく動かないため、css_def 等の名前にする。

例．ルートに css_default というディレクトリを作ってCSSファイルを配置した場合（6行目）

01 <html>
02 <head>
03 <meta http-equiv="Content-Type" content="text/html; charset=<?php echo $charset;?>">
04 <base href="<?php echo $pageUrlFull;?>">
05 <title><?php echo $title;?></title>
06 <link rel="stylesheet" type="text/css" href="<?php echo $homeDir;?>/css_default/default.css" />
07 <?php echo $css;?>
08 <?php echo $header;?>
09 </head>
10 <body>
11 <?php echo $contents;?>
12 </body>
13 </html>

CSSファイルを追加できる

以下のようなファイル構造の場合、

ルートディレクトリ　─┬─　index.php
　　　　　　　　　　　│
　　　　　　　　　　　├─　top.php
　　　　　　　　　　　│
　　　　　　　　　　　├─　layout　───　default.php
　　　　　　　　　　　│
　　　　　　　　　　　├─　css_df　───　default.css (1)
　　　　　　　　　　　│
　　　　　　　　　　　└─　folder01　─┬─　test01.html
　　　　　　　　　　　　　　　　　　　　│
　　　　　　　　　　　　　　　　　　　　├─　layout　───　default.php
　　　　　　　　　　　　　　　　　　　　│
　　　　　　　　　　　　　　　　　　　　└─　css 　─┬─　base.css (2)
　　　　　　　　　　　　　　　　　　　　　　　　　　　│
　　　　　　　　　　　　　　　　　　　　　　　　　　　├─　reset.css (3)
　　　　　　　　　　　　　　　　　　　　　　　　　　　│
　　　　　　　　　　　　　　　　　　　　　　　　　　　└─　fonts.css (4)

test01.html をリクエストした場合、レイアウトファイルの CSSタグは以下のようになる

<link rel="stylesheet" type="text/css" href="/css_df/default.css" /> (1)
<link rel="stylesheet" type="text/css" href="/folder01/css/base.css" /> (2)
<link rel="stylesheet" type="text/css" href="/folder01/css/fonts.css" /> (4)
<link rel="stylesheet" type="text/css" href="/folder01/css/reset.css" /> (3)

カレントディレクトリに css ディレクトリがあれば、その中の css ファイルを自動的に読み込む。親のディレクトリは探さない、カレントディレクトリのみ。

« 前へ 目次 次へ »