第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 " <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