htmlタグとcss－すぐに使えるサンプルと小技集

htmlタグとcss 目次

TOP htmlタグとcss－すぐに使えるサンプルと小技集

htmlタグで文字装飾。

htmlテンプレート(配布＋)

html関連リファレンス辞典。

テーブルや表の作成法。

フレームページの作成法。

1日で楽々習得html言語。

1日で習得スタイルシート。

htmlタグ－小技集。

html関連の雑学。

■Site_TOP htmlタグとcss ■Link_Page 相互リンクサイトさま

スポンサードリンク

◆HTML&CSS◆ フレームページのサンプル

以下のソースをコピペする事でフレームページが出来ます。

デフォルトの設定のままならindex.html、f1.html、f2.html、f3.htmlのhtmlファイルにコピペすればOK。

フレームページのサンプル

htmlソース(index.htmlなどの主要ページ用)
<html>
<head>
<title>フレームページ</title>
</head>
<frameset cols="200px,*">
<frame src="f1.html" name="f1">
<frameset rows="60px,*">
<frame src="f2.html" name="f2">
<frame src="f3.html" name="f3">
</frameset>
<noframes>
<h1>
　　　　非　　　し!　　　　　_　　-──　‐- 　　､　 , -─-､　-‐─_ﾉ
 　　小対　　　 /／￣＞ ´ ￣　　　￣　　｀ヽ　 Y　 ,　 ´　　　　　）frame　え
 　　学応　　　 L_　／　　　　　　　　　　　　　　／　　　　　　　ヽ非対　 |
 　　生が　　　　/ '　　　　　　　　　　　　　　　　'　　　　　　　　　　応　 !?　マ
 　　ま許　　　 /　　　　　　　　　　　　　　　　 /　　　　　　　　　　く　　　ジ
 　　でさ　　　 l　　　　　　　　　　 ,ｨ/!　　　　/　　　/l/!,l　　　／厶,
 　　だれ　　 i 　 ,.lrH‐|'|　　　　 /‐!-Lﾊ_　　l　　　 /-!'|/l 　／｀'ﾒ､_iヽ
 　　よる　　　l　 | |_|_|_|/|　　　 / /__!__ |/!ﾄi　　　i/-- ､ﾚ!/ 　 /　,-- ﾚ､⌒Y⌒ヽ
 　　ねの　　_ゝ|/'/⌒ヽヽﾄ､|/　'/￣｀ヾ、ヽﾄ､Ｎ'/⌒ヾ　　　　　 ,ｲ￣｀ヾ,ﾉ!
 　　 l　は　　「　　l ′ 「1　　　　　　 /てヽ′|　|　|　「L!　　　　　' i'ひ}　　　ﾘ
 　　　　　　　ヽ　 | ヽ__Ｕ,　　　　　､ヽシノﾉ!　!　|ヽ_､ｿ,　　　　　ヾシ _ノ　_ﾉ
 -┐　　　　,√　　 !　　　　　　　　　　￣　　ﾘ l 　 !　￣　　　　　　　￣　　７/
 　ﾚ'⌒ヽ/　!　　　 |　　　〈　　　　　　　_人__人ﾉ_　 i　　く　　　　　　　　　 //!
 人_,､ノL_,iノ!　　/! ヽ　　 r─‐- ､　　「　　　　　Ｌ_ヽ　　 r─‐- ､　　 u　　ノ/
 　　　　　　/　 /　lﾄ､＼　ヽ, -‐┤　ﾉ　　キョ　　了＼　ヽ, -‐┤　　　　　/／
 ハ　キ　　{　 /　　　ヽ,ﾄ､ヽ/!｀ｈﾉ　　）　　モ　　　　|/!　「ヽ, `ｰ／）　　 _　‐'
 ハ　ャ　　ヽ/　　 r-､‐'　// / |-‐ く　　　 |　　　　＞ / / ｀'／／-‐､　　　　／
 ハ　ハ　　　＞／＼＼// / /ヽ_　 !　　　|　　　（　 / / ／／　　/　`ｧ-‐ '
 ハ　ハ　　　/　/!　　ヽ　　　レ'/　ﾉ　　　　　　　　＞　 ' ∠ 　-‐　￣ノヽ　　　/
 　　　　　　 {　 i　l　　　 !　　　　/　フ　　　　　　　/　　　　　-‐　/￣/〉〈＼ /!
</h1>
</noframes>
</frameset>
</html>

htmlソース(f1.html)
<html>
<head>
<title>f1</title>
</head>
<body>

目次<hr>
<ul type=square>
<li>TOP</li>
<li>こんてんつ1</li>
<li>こんてんつ2</li>
<li>こんてんつ3</li>
</ul>

</body>
</html>

htmlソース(f2.html)
<html>
<head>
<title>f2</title>
</head>
<body style="margin-top:0px;margin-left:0px;margin-right:0px;margin-bottom:0px;">

<table width=100% border=1 cellspacing=2 cellpadding=5>
<tr>
<th bgcolor="#88CC88">サイト名</th>
<td colspan="4" bgcolor="#AAAACC">サイト説明</td>
</tr>
<tr>
<th bgcolor="#AACCAA">HOME</th>
<th bgcolor="#AACCAA">LINK</th>
<th bgcolor="#AACCAA">PROFILE</th>
<th bgcolor="#AACCAA">MAIL</th>
<th bgcolor="#AACCAA">Copy Right</th>
</tr>
</table>

</body>
</html>

htmlソース(f3.html)
<html>
<head>
<title>f3</title>
</head>
<body>

　　　　frame　　し!　　　　　_　　-──　‐- 　　､　 , -─-､　-‐─_ﾉ
 　　小対　　　 /／￣＞ ´ ￣　　　￣　　｀ヽ　 Y　 ,　 ´　　　　　）frame　え
 　　学応　　　 L_　／　　　　　　　　　　　　　　／　　　　　　　ヽ　対　 |
 　　生が　　　　/ '　　　　　　　　　　　　　　　　'　　　　　　　　　　応　 !?　マ
 　　ま許　　　 /　　　　　　　　　　　　　　　　 /　　　　　　　　　　く　　　ジ
 　　でさ　　　 l　　　　　　　　　　 ,ｨ/!　　　　/　　　/l/!,l　　　／厶,
 　　だれ　　 i 　 ,.lrH‐|'|　　　　 /‐!-Lﾊ_　　l　　　 /-!'|/l 　／｀'ﾒ､_iヽ
 　　よる　　　l　 | |_|_|_|/|　　　 / /__!__ |/!ﾄi　　　i/-- ､ﾚ!/ 　 /　,-- ﾚ､⌒Y⌒ヽ
 　　ねの　　_ゝ|/'/⌒ヽヽﾄ､|/　'/￣｀ヾ、ヽﾄ､Ｎ'/⌒ヾ　　　　　 ,ｲ￣｀ヾ,ﾉ!
 　　 l　は　　「　　l ′ 「1　　　　　　 /てヽ′|　|　|　「L!　　　　　' i'ひ}　　　ﾘ
 　　　　　　　ヽ　 | ヽ__Ｕ,　　　　　､ヽシノﾉ!　!　|ヽ_､ｿ,　　　　　ヾシ _ノ　_ﾉ
 -┐　　　　,√　　 !　　　　　　　　　　￣　　ﾘ l 　 !　￣　　　　　　　￣　　７/
 　ﾚ'⌒ヽ/　!　　　 |　　　〈　　　　　　　_人__人ﾉ_　 i　　く　　　　　　　　　 //!
 人_,､ノL_,iノ!　　/! ヽ　　 r─‐- ､　　「　　　　　Ｌ_ヽ　　 r─‐- ､　　 u　　ノ/
 　　　　　　/　 /　lﾄ､＼　ヽ, -‐┤　ﾉ　　キョ　　了＼　ヽ, -‐┤　　　　　/／
 ハ　キ　　{　 /　　　ヽ,ﾄ､ヽ/!｀ｈﾉ　　）　　モ　　　　|/!　「ヽ, `ｰ／）　　 _　‐'
 ハ　ャ　　ヽ/　　 r-､‐'　// / |-‐ く　　　 |　　　　＞ / / ｀'／／-‐､　　　　／
 ハ　ハ　　　＞／＼＼// / /ヽ_　 !　　　|　　　（　 / / ／／　　/　`ｧ-‐ '
 ハ　ハ　　　/　/!　　ヽ　　　レ'/　ﾉ　　　　　　　　＞　 ' ∠ 　-‐　￣ノヽ　　　/
 　　　　　　 {　 i　l　　　 !　　　　/　フ　　　　　　　/　　　　　-‐　/￣/〉〈＼ /!

</body>
</html>

iframeのサンプル

htmlソース(f1.html)のソースの下に
<iframe src="ffff.html" name="ffff" width="160" height="300">iframe</iframe>
というソースコードを追加してください。

htmlソース(ffff.html)
<html>
<head>
<title>ffff</title>
</head>
<body bgcolor="#AACCAA">

iframeページ。

</body>
</html>

フレームページの作成法。

スポンサードリンク

Mail htmlタグ,テンプレート,スタイルシート(CSS),色見本,テーブル,メール,xml ■About Site 管理人,著作権,URL情報