サブウインドウ

＊サブウインドウ
　　　（注）ソースをコピペする場合は、＜＞を半角<>に変えてコピへしてください。
　　　　　　ソース内の＜＞は全角で書かれています。

*ソース* ＜a href="subwindow.htm" onClick="window.open('サブウインドウのURI','サブウインドウの名前');return false;"＞文字＜/a＞ ;return false;・・・これを加えてね。（理由は省きます）

 

 

---

　サブウインドウびURLが【test.html】で、サブウインドウが【test】とすると・・・

---

 

＜a href="subwindow.htm" onClick="window.open('test.html','test');return false;"＞文字＜/a＞

上のソースに、サブウインドウの大きさ・スクロールバーの有無・リサイズの有無を指定。
width=550,height=280,scrollbars=1,resizable=1を追加して。
　　　　　　　↓
下のソースで、550×280で、スクロールバーが有り、リサイズ可能なsubwindowが開きます。

＜a href="subwindow.htm" onClick="window.open('test.html','test','width=550,height=280,scrollbars=1,resizable=1');return false;"＞【ここをクリック】＜/a＞

 

 

scrollbars=０または1	スクロール	０は無し・１は有り
resizable=０または1	リサイズ
toolbar=0または１	ツールバー
menubar=0または１	メニューバー

 

 

サブウインドウの出現位置が指定できます。left=10,top=50を追加。
下のソースで、画面左から10px、上から50pxの位置にsubwindowが開きます。

＜a href="subwindow.htm" onClick="window.open('test.html','test','width=550,height=280,scrollbars=1,resizable=1,left=10,top=50');return false;"＞【ここをクリック】＜/a＞

 

サブウインドウに【ウインドウを閉じる】ボタンをつける。
下のソースは、【ウインドウを閉じる】をつけ、scrollbars=0,resizable=0にしています。

＜INPUT TYPE="button" VALUE="このウインドウを閉じる" onClick="window.close()"＞

 

インラインフレーム ifame/html文法

*インラインフレーム ifame*
　　ページの中を、フレームで区切ります。

【iframeタグ】を使います。

フレームのサイズは【100×190】 境界線の色は【0000ff】、境界線・スクロールは【auto】

 

 

 

 （注）下のソースの＜＞は全角で書いています。
　　　　ソースをコピペする場合は＜＞を<>半角に書き換えてコピペしてください。

＜frame src="http://www.geocit・・・・・.html" name="test" frameborder="auto" bordercolor="0000ff" scrolling="auto" marginwidth="0" marginheight="0" width="100" height="190" align="left"＞ ＜font face="MSPゴシック"＞＜span style="font-size:9pt;"＞ごめんなさい。フレーム対応のプラウザでご覧ください。 ＜/span＞＜/font＞ ＜/iframe＞

インラインフレームにするには、【iframeタグ】を使います♪
【iframeタグ】は

＜iframe src="・・・・・.html＞～ ＜/iframe＞

【インラインフレームの指定】--インラインフレームのサイズなどを指定してゆきます。

【サイズの指定】width="100" height="190"

width="	横のサイズ	〈例〉width="100"
height="	縦のサイズ	〈例〉height="190"

〈例）
＜iframe src="http://www.geocit・・・・・.html"
width="100" height="190"＞
＜/iframe＞

【フレームの境界線を指定】frameborder="auto"（上を参照にしてね）
【境界線の色を指定】bordercolor="0000ff"
【フレーム内のスクロールの有無】scrolling="auto"

frameborder="	境界線の有無	auto,yes,no,1,0（0は境界線ナシ、1はアリ）	frameborder="auto"
bordercolor="	境界線の色		bordercolor="0000ff"
scrolling="	スクロールの有無	auto,yes,no	scrolling="auto"

 

【フレームの枠と内容との間隔を指定】marginwidth="0" marginheight="0"（ピクセルです）

【インラインフレームの文字の位置を指定】align="left"
top、middle、bottm、left、rightで指示してね。

top        上の方に文字が書き込まれる    middle     真ん中に文字が書き込まれる    bottom   下の方に文字が書き込まれる    left         右側に複数行の文字が書き込まれる    right       左側に複数行の文字が書き込まれる このpageは【align="left"】と指定してるので、右側に複数行の文字が表示されますね。

＜iframe src="http://www.geocit・・・・・.html" name="test"
　　インラインフレーム内のurl（http://www.geocit・・・・・.html）を指定して下さい。
　　それに、名前を付けてください。
　　ここではtestと付けました。name="test"

ifame対応のプラウザでない場合は、インラインフレームは表示されません。
そのために、ひと言、注意書きが必要です。
＜font face="MSPゴシック"＞＜span style="font-size:9pt;"＞ごめんなさい。フレーム対応のプラウザでご覧ください。
＜/span＞＜/font＞
注意書きの部分です。

BGM/HTML文法

BGMを付ける方法♪

注意すること
１．著作権を守ってね。著作権で保護されてる作品は使わない。
２．突然曲が鳴り始めると驚く場合があります。お仕事中や深夜など・・・。BGMにはには注意書きを入れておくと親切です。
３．音楽の停止ボタンは隠さない方が親切です。

ファイルはmid形式のファイルを使ってね。

　　　　　（注）＜＞は全角で書かれています。
　　　　　　　　コピペする場合は、すべての＜＞を<>半角で書き換えてください。

＊ソース＊＜body＞～＜/body＞間に書き込んで。 ＜embed src="mid形式のファイル名" type="audio/midi"width="100" height="20" ＞

　　　
　autostart="false"（自動再生しない）にしました。【autostart="false"】は下の表を参照して。

　　　　　（注）＜＞は全角で書かれています。
　　　　　　　　コピペする場合は、すべての＜＞を<>半角で書き換えてください。

＜embed src="petit_chien_arr.mid" type="audio/midi" width="100" height="20" autostart="false"＞

 

属性	指示	属性値	例
src（ソース）	ソース	URIまたはURL	embed src="Nocturne.mid（または、URL)"
type	midならば→	【audio/midi】	type="audio/midi"
width	パネル横のサイズ		width="100"
height	パネルの縦のサイズ		heigh="20"
autostart	自動再生するか否か	true（自動再生）	autostart="true"
		false（自動再生しない）	auto="false"
repeat	繰り返し再生するか否か	true（繰り返す）	repeat="true"
		false（繰り返さない）	repeat="false"
		回数	repeat="2"
loop	繰り返し再生するか否か	(repeatと同じ）	loop="true"
panel	パネルの色の指定	0・・白っぽく表示	panel="0"
		1・・黒っぽく表示	panel="1"

＊repeat属性とloop属性は、同じ指示ですが、違う環境の人の為に２通りの書き方をしてください。

背景画background/HTML文法

背景画　background　
background-position
背景画を固定し、画像の位置を示します。

【スタイルシート】～内に貼ってください。
　　　　　（注）現在＜＞は全角で入力されています。
　　　　　　　　コピペする場合、すべての＜＞を<>半角に書き換えてください。

＜style type="text/css"＞ ＜!-- body { background-attachment: fixed; background-image: url(http://www.geocit・・・・・・・jpg); background-repeat: no-repeat; background-position: right top; } --＞ ＜/style＞

background-position:
位置を指定する方法にはいくつかあります。　　(注）指定するキーワード間は半角を開ける。 

横の位置をleft,center,rightで指定
縦の位置をtop,center,bottomで指定	〈例〉右上に指定	background-position: right top
%で指定	〈例〉左から30%上から50%に指定	und-position: 30% 50%

横の位置をleft,center,rightで指定
横の位置をleft,center,rig

background-attachment:
画面をスクロールする時に、画像を固定するか、スクロールと伴に移動させるかを指示します。

fixed	背景画像を固定	background-attachmen: fixed
scroll	スクロールと伴に移動	background-attachmen

 

background-image:
背景に画像を指定します。

url
none	画像ファイルなし	background-image: url(http://・・・・

 

background-repeat:
画像のリピートを指示します。

repeat	背景画像を繰り返し表示	background-repeat: repeat
repeat-x	背景画像を横方向のみ繰り返し表示	background-repeat: repeat-x
repeat-y	背景画像を縦方向のみ繰り返し表示	background-repeat: repeat-y
no-repeat	リピートしない	background-repeat: no-repeat

 

属性/HTML文法

要素内に属性が書かれる。書き方は【属性=属性値】
【例】font要素内の属性　　　　　　　　　　　　　　　　　　　　　　　　　＊要素とは～・・< >～この間を要素という。

属性	意味	属性値	例	関連タグ
color	文字色の指定	16進法（または色名）	color=#0000ff	[font]
size	文字の大きさの指定	単位はptなど用いる	size=12	[font]
face	文字の種類の指定	MS Pゴシックなど	face=MS	[font]

 

有無・・属性値0は無し
　　　　属性値1は有り

属性	意味	属性値	例	関連タグ
frameborder	ボーダーの有無	0 1で指示	frameborder=0	[frame]
bordercolor	ボーダーの色	16進法（色名）	bordercolor=#0000ff	[frame]
width	横幅	単位はptなど	width=10
height	高さ	単位はptなど	height=10
background-imege	背景のイメージの指定	url、none	background-imege:url	[body][table][td]
background-position	背景の位置指定	top、center、bottom	:left top	[body][table][td]
background-attachment	イメージの固定	fixed、scroll	:fixed	[body][table][td]
background-repeat	イメージ繰り返し	no-repeat repeat	:no-repeat	[body][table][td]

 

background-imege   背景イメージの指定

属性	指示	例	関連タグ
url	イメージのurl	ackground-image: url(http://・・・・・)	[body][table][td][tr]
none	背景イメージ無し

 

background-position   背景イメージの位置指定

属性値	指示	例	関連タグ
left,center,right	横の位置を指定	background-position:	[body][table][td][tr]
top,center,bottom	縦の位置を指定	（横位置がleftで、縦位置がbottom→左下）

 

background-attachment   背景イメージの固定するか否か

属性値	指示	例	関連タグ
fixed	固定	background-attachment:fixed	[body][table][td][tr]
scroll	イメージをスクロール	background-attachment:scroll

 

background-repeat   背景イメージを繰り返すか否か

属性値	指示	例	関連タグ
no-repeat	リピートしない	background-repeat:no-repeat	[body][table][td][tr]
repeat	イメージを繰り返す	background-repeat:repeat
repeat-x	横方向だけ繰り返す	background-repeat:repeat-x
repeat-y	縦方向だけ繰り返す	background-repeat:repeat-y

 

タグ/HTML文法

 

---

　タグとは？

---

＜head＞などをタグと呼ぶ。 

例	＜a＞・＜/a＞
	＜b＞・＜/b＞

　　＊タグには、開始タグと修了タグがある
　　　　・・・開始タグ
　　　　・・・修了タグ
　　＊修了タグのないものもある・・・

---

　要素とは、

---

開始タグから修了タグの間を要素という。

 

例	＜a＞～＜/a＞←この間を要素と言う

 　　＊～←html要素の中には　
　　　　head要素～
　　　　body要素～が入っている。

 

ブロック要素	プラウザ表示に改行が入るもの
インライン要素	改行が入らないもの

 

---

　属性

---

タグの中で、色やサイズを、属性で指定する。

 

例	color=white　（属性名color=属性値white）
	size=10pt　　（属性名size=属性値10pt）