JavaScriptで作るホームページのテクニック

みやけ工房のホームページの作り方全コンテンツの一覧

スライドショータイプの見本

スライドショーの写真切替タイプ別サンプル集。スライドショーをお探しの方は最初にご覧ください。

スクリプトメニュータイプの見本

スクリプトメニューのタイプ別サンプル集。メニューをお探しの方は最初にご覧ください。

HTMLと簡単なスクリプト [HTML一夜漬けガイド]

ＨＴＭＬやスタイルシートの基礎事項と簡単なスクリプトの使い方について

スライドショーとWebテンプレート [写真付きHPの作り方]

サンプルを書き換えずにそのまま使えるスライドショーとホームページやギャラリーのテンプレート

ホームページ制作の小技集 [JavaScript・DOMサンプル集]

ボタンやメニューからページ全体までのJavaScriptを使ったホームページ制作の小技集

JavaScriptスライドショー [書いて試せるスライドショー講座]

スライドショーやギャラリーページのJavaScriptの基礎と応用サンプル

ひとつのページに複数の独立したスライドショーを配置する

既存のページに複数のスライドショーやギャラリーを貼り付け、独立して動作させる

DirectX Transition Slide Show

DirectX Transitionを利用したスライドショーやギャラリーの抜粋

コピーするだけで作れるスライドショー

スクリプトソースをコピーするだけで、普通のホームページがスライドショーやギャラリーに

ホームページのテンプレート集

ホームページやギャラリーのテンプレートと、ホームページ部品のテンプレートの抜粋

頻繁に使うスタイルシートと書き方

使用頻度の高いスタイルシート一覧と書き方の解説

JavaScriptでスタイルを変更する

スタイルシートをJavaScriptとＤＯＭを使って変更する方法

簡易ホームページエディター

編集画面にＨＴＭＬやスクリプトソースを書いて、ボタンをクリックするとＷｅｂページが表示される

簡易ＨＴＭＬエディター

編集画面にＨＴＭＬタグだけを書いて、ボタンをクリックするとＷｅｂページが表示される

ホームページの背景色見本帳

色ボタンのクリックで２５６の背景色の確認

スライドショーの作り方

スライドショーに関したサンプルの抜粋

ＨＴＭＬタグ簡易リファレンス

使用頻度の高いＨＴＭＬタグの解説と使用方法

　ＨＴＭＬは本来テキストファイルですから、「メモ帳」（Windowsの場合）などのテキストエディターで作り、htmlまたはhtmという拡張子を付けて（文字コードはＡＮＳＩで）保存します。当サイトのサンプルを利用してホームページを作る時は、サンプルソースを「メモ帳」にコピーし、随意に編集してお使いください。

　スライドショースクリプトの最初の部分はデータベースです。タイトル、スライドショーの切り替え間隔、写真ファイル名、コメントを自由に書き直してお使いください。

var d = "タイトル";
var hayasa = 切り替え時間（ミリ秒単位）;
var pn = 0;
var cn = 0;
photo = new Array();
com = new Array();
  photo[pn++] = "写真ファイル名";com[cn++] = "コメント";
  photo[pn++] = "写真ファイル名";com[cn++] = "コメント";
  photo[pn++] = "写真ファイル名";com[cn++] = "コメント";
  photo[pn++] = "写真ファイル名";com[cn++] = "コメント";

	---　以下写真の枚数分記述する　---

　スライドショーの切り替え間隔はミリ秒単位（１秒は１０００ミリ秒）の数値です。例えば、初期値を12000にする時は<SELECT>メニューも初期値を１２秒間隔にするために<OPTION>にSELECTEDを記入します。

<SELECT OnChange="hayasahenkou(this[this.selectedIndex].value)">
<OPTION value=5>５秒間隔
<OPTION value=7>７秒間隔
<OPTION value=9>９秒間隔
<OPTION value=12 SELECTED>１２秒間隔
<OPTION value=15>１５秒間隔
<OPTION value=20>２０秒間隔
</SELECT>

　写真を縮小して表示しているスライドショーでは、以下の部分を任意の大きさに変更してお使いください。

<IMG style="〜width:表示サイズ;〜">