プログラミング基礎知識

Web アプリを複数リリースするための雛形 HTML の作り方

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> には &copy; を書いて著作権者を PHP の定数 WEBSITE_COPYRIGHT で定義して書き込みます。

CSS

【注意】
※PHP タグは short_open_tag=on としてショートタグを使用しています。
※”_header.php”, “_style.css”, “_style_pc.css”, “_style_sp.css” の先頭にアンダースコア “_” を付けている理由は別の記事を作って説明いたします。
※ライブラリファイルを “lib” フォルダに保存する理由は別の記事を作って説明いたします。

プログラミング相談受付中

自営エンジニア歴 20年以上の 当ブログ作者が、プログラミングに関するオンライン相談(zoom 等)を受付中です。言語は HTML CSS JavaScript jQuery PHP MySQL VBScript など…

詳細・お問い合わせはこちら