第1回「PHPとHTMLでヘッダーファイル作成と呼び出し方」

全体像 サンプル

こんにちは、

いやー5月もなかばに入ったんですが、5月病でずっとボーっとしてました。なんかこのまま死んでいくんだろうなぁとか考えてました。

今回は、ヘッダーファイルを作ります。「header.php」というファイルを作り、どのページからもその同じヘッダーを使えるようにします。

 

同じサイトなのに、ヘッダーがページ毎に別々だったら、なんか変ですよね。今回はそこをやっていきます。

 

目次

1.「header.php」の作成

2.「header.php」の呼び出し方

 

1.「header.php」の作成

下記のコードをコピペして「header.php」と名前を付け保存してください。

<?php

session_start();

//===========================================================================
// ■ ヘッダーの表示内容記述 header.php
//===========================================================================
?>
<table class="header">
<tr>
<td class="text-align-right">
<?php
////////////////////////////////////////////////////////
// □:ログインしていたらマイページへのリンクを出力
////////////////////////////////////////////////////////
if (isset($_SESSION["NAME"])){
 echo "こんにちは".$_SESSION["NAME"]."さん";
 echo "&nbsp;&nbsp;<a class='header href='./logout.php'>ログアウト</a>";
}else{
 echo "<a class='header href='./login.php'>ログイン</a>";
}
?>
</td>
</tr>
</table>

サーバーにアップして確認すると

左はじに「ログイン」という文字が表示されていると思います。

別の記事で書きますが、もしログイン機能をつけたいサイトであれば、上のようにニックネームを表示できるようにしています。

"<a href='./login.php'>ログイン</a>"

この中身のファイル名はリンク先をしめしています。お好きなファイル名にリンクさせたり、またはメニュー数を増やしてみてはいかがでしょうか。

 

2.「header.php」の呼び出し方

例えば「index.php」から呼び出す場合、下記のコードを「index.php」に追記します。

<!-- ヘッダー部分ここから -->
<?php include("./header.php"); ?>
<!-- ヘッダー部分ここまで -->

追記する場所は

<html>タグ

<head>タグ

</head>タグ

<body>タグ

 

※ここに追記

 

</body>タグ

</html>タグ

 

bodyタグの中で一番上についします。ヘッダーは上に表示するものなので、

 

CSSスタイルシートに下記をコピペしてください

/*************bodyのcss********************/
body {
	/* ページの端から端まで使用できるようにする 下記2行 */
	margin:0;
	padding:0;
}

/*************tbのcss*******************

/* 文字を右寄せ */
.text-align-right{
	text-align: right;
}
/* 文字を中央寄せ */
.text-align-center{
	text-align: center;
}
/* 文字を左寄せ */
.text-align-left{
	text-align: left;
}

/*************<a class='header' hre~~~>のリンクの色css********************/

a.header:link { color: #f0f8ff; }/*未訪問のリンク 文字の色は白に変更*/
a.header:visited { color: #f0f8ff; }/*訪問済みのリンク 文字の色は白に変更*/
a.header:hover { color: #f0f8ff; }/*ポイント時のリンク 文字の色は白に変更*/
a.header:active { color: #f0f8ff; }/*選択中のリンク 文字の色は白に変更*/

/*************ヘッダーのcss********************/
table.header{
	width: 100%;
	height: 20px;
	/* ヘッダーの色は黒 */
	background-color: #000000;
	/* 文字の大きさ */
	font-size: 18px;
	/* 文字の色は白 */
	color:#f0f8ff;

 /* 下記2行でヘッダーを上部に固定 */
 position: fixed;
 top:0;
}

 

スタイルシートも、お好みで色や大きさなど、色々、お好みで変更してみてください。/*  */  ←この中に説明文かが書かれているのでご参考にどうぞ。

 

上記を追記したページを確認すると

簡単なヘッダーが、表示されているのがわかります。

 

今回の記事を書くにあたって参考にしたサイト

css lecture

デザイナーさんのサイトですかね。オシャレなデザインのサイトです。是非、見てみてください。

 

今回のブログは以上です。お疲れ様でした!

,

Leave a comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です