トップページ -> コンピュータ実習 -> JavaScript による Web プログラミング -> css を用いたヘッダー,フッターの例
[サイトマップへ], [サイト内検索へ],

css を用いたヘッダー,フッターの例

サイト構成 連絡先,業績など コンピュータ実習 データの扱い コンピュータ設定 教材(公開) サポートページ

css を使って,Web ページの中にッダーとフッターを置きます.

◆ 動作画面の例

◆ HTML ファイルの例


<!DOCTYPE html public "-//w3c//dtd html 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>

        <meta http-equiv="Content-Type" content="text/html; initial-scale=1.0; charset=Windows-31J" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="MSThemeCompatible" CONTENT="yes" />

        <title>
            ヘッダー、フッターの例
        </title>
      
        <style>
          #body {
            position: absolute;
            top: 8em; <!-- = #header{ height: 8em } //-->          
            left: 0;
            background-color: #ffffff;
            width: 100%;
          }

          #header {
            position: fixed;
            top: 0;
            left: 0;
            background-color: #ffffff;
            width: 100%;
            height: 8em;
          }

          #header .container { 
            height: 8em; 
          }

          #footer {
            position: fixed;
            bottom: 0;
            left: 0;
            background-color: #ffffff;
            width: 100%;
            height: 12em;
          }

          #footer .container { 
            height: 8em; 
          }
          #footer .info { 
            background-color: #d0d0d0;
            height: 4em; 
          }

          .box12 {
          width: 100%;
          height: 12em; 
          }
        </style>
    </head>

    <body>

      <div id="body">
	<div class="container"> 
	  <p>top</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>b</p> 
	  <p>bottom</p> 

	  <p> <div class="box12"> </div>  </p>
	</div>
      </div>

      <div id="header">
	<div class="container"> 
	  <h2>報告番号:001</h2> 

          <p> 今の日時:
            <script type="text/javascript">
              <!--
		  dd = new Date(); 
		  var y    = dd.getFullYear(); // 年 
		  var m    = dd.getMonth() + 1; // 月 
		  var d    = dd.getDate(); // 日 
		  var week = dd.getDay(); // 曜日 
		  var hour = dd.getHours(); // 時 
		  var min  = dd.getMinutes(); // 分 
		  var sec  = dd.getSeconds(); // 秒 
		  var P = new Array( "日", "月", "火", "水", "木", "金", "土" );
		  document.write(y + "年" + m + "月" + d + "日 (" + P[week] + ") " +hour + "時" + min + "分" + sec + "秒");
		  // -->
            </script>
          </p>
          <hr/>
	</div>
      </div>

      <div id="footer">
	<div class="container"> 
	  <hr/>
	  hoge hoge
	</div>
	<div class="info"> 
	  <p>
	    問い合わせ先: ほげほげ
	  </p>     
	</div>
      </div>
    </body>
</html>