PHP で Web アプリを複数リリースするための雛形となる HTML, CSS の作り方をご紹介します。
目次
HTML5
HTML バージョン5 で作成しますので、html タグおよび head、body などを定義します。
<!DOCTYPE html>
<html lang='ja'>
<head>
</head>
<body>
</body>
</html>タイトル
タイトルは <title> タグで定義しますが、アプリによってタイトルは変更することになりますので、それらは別途 “_header.php” を定義し その中で定数としてまとめて定義し 本体ファイルからインクルードすることにします。
<?
//定数初期化
define("WEBSITE_TITLE", "サンプル");
?>
<? include "_header.php"; ?>
<!DOCTYPE html>
<html lang='ja'>
<head>
<title><?=WEBSITE_TITLE?></title>
</head>
<body>
</body>
</html>
CSS
リセット CSS のファイル名を（仮に）”_reset.css” とします。
複数 Web アプリで共通使用する CSS ファイル名を “_style.css” と定義し、PC 用 CSS は “_style_pc.css“、スマホ用 CSS は “_style_sp.css” と定義します。
また、アプリ独自の CSS は <head> タグ内の <style> タグに記入していくことにします。
<? include "_header.php"; ?>
<!DOCTYPE html>
<html lang='ja'>
<head>
<title><?=WEBSITE_TITLE?></title>
<link href='_reset.css' rel='stylesheet'><!-- リセット CSS -->
<link href='_style.css' rel='stylesheet'><!-- Web アプリ共通 CSS -->
<link href='_style_pc.css' rel='stylesheet'><!-- Web アプリ共通 PC 用 CSS -->
<link href='_style_sp.css' rel='stylesheet'><!-- Web アプリ共通 SP 用 CSS -->
<style>
<!-- アプリ独自の CSS を記入する -->
</style>
</head>
<body>
</body>
</html>jQuery
jQuery を使用しますので <head> タグ内に <script> タグで参照します。また、当社では ライブラリファイルは “lib” フォルダに保存することにしております。
<? include "_header.php"; ?>
<!DOCTYPE html>
<html lang='ja'>
<head>
<title><?=WEBSITE_TITLE?></title>
<link href='_reset.css' rel='stylesheet'><!-- リセット CSS -->
<link href='_style.css' rel='stylesheet'><!-- Web アプリ共通 CSS -->
<link href='_style_pc.css' rel='stylesheet'><!-- Web アプリ共通 PC 用 CSS -->
<link href='_style_sp.css' rel='stylesheet'><!-- Web アプリ共通 SP 用 CSS -->
<script src='lib/jquery-?.?.?.min.js'></script><!-- jQuery ライブラリ -->
<style>
<!-- アプリ独自の CSS を記入する -->
</style>
</head>
<body>
</body>
</html>ロゴ
次に Web アプリのロゴを配置します。当社の Web システムでは画像フォルダーは “images/” に配置するようにしていますので <body> タグの中身はこのようになります（<main> も書いておきます）。
<body>
<header>
<img src='images/logo.png' alt="<?=WEBSITE_TITLE?>">
</header>
<main>
</main>
</body>※ロゴ画像の配置は “_style.css” などに、Web アプリにあった位置に配置するようにコーディングします。
フッター
<footer> には © を書いて著作権者を PHP の定数 WEBSITE_COPYRIGHT で定義して書き込みます。
CSS
【注意】
※PHP タグは short_open_tag=on としてショートタグを使用しています。
※”_header.php”, “_style.css”, “_style_pc.css”, “_style_sp.css” の先頭にアンダースコア “_” を付けている理由は別の記事を作って説明いたします。
※ライブラリファイルを “lib” フォルダに保存する理由は別の記事を作って説明いたします。
