CSSファイルでデザイン

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

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

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

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

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

01: <!DOCTYPE html>
02: <html lang="ja">
03: <head>
04:     <meta charset="<?= $charset ?>">
05:     <base href="<?= $pageUrlFull ?>">
06:     <title><?= $title ?></title>
07:     <link rel="stylesheet" href="<?= $homeDir ?>/css_default/default.css">
08:     <?= $css ?>
09: 
10:     <?= $header ?>
11: 
12: </head>
13: <body>
14: <?= $contents ?>
15: 
16: </body>
17: </html>

CSSファイルを追加できる

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

ルートディレクトリ　─┬─　index.php
　　　　　　　　　　　│
　　　　　　　　　　　├─　top.php
　　　　　　　　　　　│
　　　　　　　　　　　├─　layout　───　default.php
　　　　　　　　　　　│
　　　　　　　　　　　├─　css_default　───　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" href="/folder01/css/base.css"> (2)
<link rel="stylesheet" href="/folder01/css/fonts.css"> (4)
<link rel="stylesheet" href="/folder01/css/reset.css"> (3)

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

« 前へ 目次 次へ »