ＨＰ作成テクニック

■ レイアウト	tableによる中央表示	CSSでレイアウト
■ ページテクニック	ページ拡大縮小	ソースを表示	リンクをTopへ案内		ソースエディタの変更
■ その他	カレンダーを付ける		音や音楽を挿入
■ メニュー表示	frameを使う	iframeを使う	スタイルシートを使う	CSSプルダウンメニュー	レスポンシブル
(使い回しメニュー→)	JavaScriptで水平枠	JavaScriptで垂直枠	-

　【tableで中央表示】 <table>タグを使うとページの中央表示が出来ます。一行一列の表の中にページとなる内容を記述します。

　　【記述例↓】

<!DOCTYPE html>
<html lang="ja"><head>
 <meta charset="UTF-8">
 <title>中央表示</title>
</head>
<body style="background-color:silver;">
 <table border="0" style="width:600px; margin: 0 auto; padding:8px;  background-color:white;">
  <tr><td>
   <h1 style="text-align:center; margin:8px;">ページを中央表示する</h1><hr>
   　表の中に、実質的なページを作ると、ブラウザの幅が変わっても、
   ページを中央表示することが出来ます。
   <br><br>
   <table border="0" style="width:90%; margin: 0 auto;">
    <tr><td>
      <img src="y0399s.jpg" border="0"></td>
     <td  style="text-align:center;">
      写真の説明文を、このようにレイアウトできます<br>
     <br>(tableタグを使ってレイアウト)
  </td></tr></table>
 </td></tr></table>
</body></html>

【左記表示例】

　【参考サイト】
<table>

　【リンクをTopへ案内】 JavaScriptを使って、途中ページへのリンクをトップページへ案内します。

　　【記述例↓】　　toplink.html (経由1)

<!DOCTYPE html>
<html lang="ja"><head>
  <meta charset="UTF-8">
  <title>リンク制御</title>
  <script>
    preUrl = document.referrer;
    page1 = "https://kurage.ready.jp/jhp_g/tech/";  // 前のURL
    page2 = "https://kurage.ready.jp/jhp_g/hp_g.html"; // 行き先のURL
    if( preUrl.indexOf( page1, 0 ) < 0 ){ // 前サイトのURLがない時(-1の時)
      this.location.href = page2;
    }else{                    // 他のサイトからリンクされてきた
      myMsg = preUrl;
      myMsg = myMsg + " からお越し下さって有難う御座います";
    }
  </script>
</head>
<body style="background:#ffb;">
  https://kurage.ready.jp/jhp_g/tech/  ≪経由1≫からくると、<br>このページを表示、<br>
  <br>そうでないと、≪経由2≫<br>https://kurage.ready.jp/jhp_g/hp_g.html　に飛ばす
</body></html>

【実行例】　　 ≪経由1≫　 ≪経由2≫　　 . 　.

　【ページの拡大縮小】 JavaScript-css を使って、表示ページを拡大／縮小表示をします。

　　【記述例↓】　　　参考サイト

<!DOCTYPE html>
<html lang="ja"><head>
  <meta charset="UTF-8">
  <title>ページを拡大／縮小する</title>
</head>
<body style="background:#ffb;">
  <h3>ページ全体を拡大／縮小【例】</h3>
  <select onChange="document.body.style.zoom=this.options[this.selectedIndex].value">
  <option value="60%">60%
  <option value="80%">80%
  <option value="100%" selected>100%
  <option value="120%">120%
  <option value="150%">150%
  <option value="200%">200%
  <option value="300%">300%
  </select><br><br>
  上のセレクトボックスで、ページを含む指定要素全体の倍率を変更できます (本例ではこの iframeに表示分)<br>
  <img src="./img/y0399s.jpg">
</body></html>

　　【実行例】


	【ページソースの表示】　 Web 表示ページ上で右クリックし、「ソースの表示」をクリックするとページソースを見ることができます。　(右クリックで起動するソースエディタを変更する方法は、こちら。)

　【カレンダーを付ける】 JavaScriptを使ったカレンダーを表示します。

【実行例】
【参考サイト】
「国民の祝日」
祝日判定マクロ
暦例１　例２
祝祭日を取得
国立天文台の暦

　　　【記述例↓】　祝日表利用版はこちら　推奨版はこちら


【音や音楽の挿入】 <audio> (又は<object>) を使います。
	【記述例↓】 <audio src="stream2.mp3" controls></audio>
	【参考サイト】　<audio> 　<object>　　ファイル形式　 MIME 一覧　　無料音源


【動画の挿入】 <object> を使います。
	【記述例↓】 <object type="audio/mpeg" data="mov_hts-samp003.mp4" ></object>
	【参考サイト】　　<object> 　フリー動画