ＨＰ作成テクニック
| ■ レイアウト | tableによる中央表示 | CSSでレイアウト | |||
| ■ ページテクニック | ページ拡大縮小 | ソースを表示 | リンクをTopへ案内 | ソースエディタの変更 | |
| ■ その他 | カレンダーを付ける | 音や音楽を挿入 | |||
| ■ メニュー表示 | frameを使う | iframeを使う | スタイルシートを使う | CSSプルダウンメニュー | レスポンシブル |
|
|
JavaScriptで水平枠 | JavaScriptで垂直枠 | 共用化メニュー | 共用化レスポンシブル2 |
【記述例↓】
<!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>
【記述例↓】 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_g2/tech/"; // 前のURL
page2 = "https://kurage.ready.jp/jhp_g2/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_g2/tech/ ≪経由1≫からくると、<br>このページを表示、<br>
<br>そうでないと、≪経由2≫<br>https://kurage.ready.jp/jhp_g2/hp_g.html に飛ばす
</body></html>
【記述例↓】
参考サイト
<!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>
【実行例】
