HP作成テクニック

■ レイアウト tableによる中央表示 CSSでレイアウト      
■ ページテクニック ページ拡大縮小 ソースを表示 リンクをTopへ案内   ソースエディタの変更
■ その他 カレンダーを付ける   音や音楽を挿入    
■ メニュー表示 frameを使う iframeを使う スタイルシートを使う CSSプルダウンメニュー  
(使い回しメニュー→)
JavaScriptで水平枠 JavaScriptで垂直枠 flashメニュー    
 
 【tableで中央表示】 <table>タグを使うとページの中央表示が出来ます。一行一列の表の中にページとなる内容を記述します。
    【記述例↓】
<html><head>
  <title>中央表示</title>
</head>
<body bgcolor="silver">
  <table border="0" width="600" height="100%" align="center" bgcolor="white">
    <tr><td align="left" valign="top">
        <center><font size=+3>ページを中央表示する</font></center><hr>
         表の中に、実質的なページを作ると、ブラウザの幅が変わっても、
        ページを中央表示することが出来ます。
        <br><br>
        <table border="0" align="center" width="95%">
          <tr><td align="right">
              <img src="y0399s.jpg" border="0"></td>
            <td align="center">
              写真の説明文を、このようにレイアウトできます<br>
              <br>(tableタグを使ってレイアウト)
        </td></tr></table>
  </td></tr></table>
</body></html>
                          

【左記表示例】


 【参考サイト】
<table>
 

 【リンクをTopへ案内】 JavaScriptを使って、途中ページへのリンクをトップページへ案内します。
    【記述例↓】  toplink.html (経由1)
<html><head>
  <meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS">
  <title>リンク制御</title>
  <script type="text/javascript" language="JavaScript">
    <!--
      preUrl = document.referrer;
      page1 = "http://park15.wakwak.com/~kurage/jhp_g/tech/";
      page2 = "http://park15.wakwak.com/~kurage/jhp_g/hp_g.html";
      if( preUrl.indexOf( page1, 0 ) < 0 ){
        this.location.href = page2;
      }else{
        myMsg = preUrl;
        myMsg = myMsg + " からお越し下さって有難う御座います";
      }
    //-->
  </script>
</head>
<body bgcolor=#ffffbb>
  http://park15.wakwak.com/~kurage/jhp_g/tech/ からくると、
  このページを表示、<br><br>
  そうでないと、
  http://park15.wakwak.com/~kurage/jhp_g/hp_g.html に飛ばす
</body></html>
【実行例】  経由1≫  ≪経由2≫   .  .
 

 【ページの拡大縮小】 JavaScriptを使って、表示ページを拡大/縮小表示をします。  (本機能はIE限定です)
    【記述例↓】    参考サイト
<html><head>
  <meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS">
  <title>ページを拡大/縮小する</title>
</head>
<body bgcolor=#ffffbb>
  <h2>ページ全体を拡大/縮小【例】</h2>
  <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><br><img src="y0399s.jpg">
</body></html>
                          
  【実行例】
 

 
【ページソースの表示】

  Web 表示ページ上で右クリックし、「ソースの表示」をクリックするとページソースを見ることができます。

 (右クリックで起動するソースエディタを変更する方法は、こちら。)
 
 

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

【参考サイト】
「国民の祝日」
祝日判定用マクロ
カレンダー例
    【記述例↓】
 

 【音や音楽の挿入】 <embed>や<object>を使います。 ( IE7ではtypeでMIME タイプを記述しないと動かないことがあるようです。)
    【記述例↓】
<html>
<head></head>
<body>
  <embed src="trip.mid" type="audio/x-mid" autostart="false" loop="true" width="50" height="28">
</body>
</html>

 【参考サイト】
 <embed>
  MIME タイプ
  MIME 一覧

←BGM SW
 

 【 ActiveX コントロール】 APPLETEMBED、又は OBJECT 要素で読み込まれた Microsoft ActiveX controlとは直接対話出来ません。
 下図のように「クリックするとこのコントロールをアクティブにして使用します」と表示され、クリックを要求します。
コントロール要求表示例   ←表示例

 この表示を避けるためには、例えば次の例のように、外部スクリプト ファイルからコントロールを読み込みます。 参考1  参考2  参考3
 下記の例では、document.write を記述した外部ファイル (act.js) を、本文から読み込んで、ActiveX コントロールのアクティブ化を行ない、 コントロールが対話できる状態で読み込んでいます。
    【記述例↓】   実行例
<html>
<head>
  <meta http-equiv='Content-Script-Type' content='text/javascript'>
</head>
<body>
  <script src='act.js'></script>
</body>
</html>

  【act.js】
document.write("<embed src='trip.mid' type='audio/x-mid' autostart='false' loop='true' width='50' height='28'>")