XML/XSL/DHTML/CSS/JAVA　Java、JavaScript、DHTMLｻﾝﾌﾟﾙ　　　作成：hogehoge　2010/11/17 12:02
任意のﾃｷｽﾄ 　　見出し31　へ   見出し32　へ   見出し33　へ　…　…… ……　…… ……　……　　
任意のﾃｷｽﾄ 　　…… ……　…… ……　…… ……　…… ……　…… ……　……
xml/xsl/DHTML/css/Java
ﾗﾝﾀﾞﾑﾒｯｾｰｼﾞ2 - HTA4

　21　ここに、ﾀｲﾄﾙなどを記述するじゃ…*。　　CSSﾘﾌｧﾚﾝｽ - ここに説明文を記述します。

　

　22　ここに、ｻﾌﾞﾀｲﾄﾙなどを記述しますだよ。 DataBind - ここに説明文を記述します。

　

　

　

　31　　　ここに、見出しなどを記述しますだよ〜*。　　このページのトップへ       

任意のﾃｷｽﾄ ……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… 　

……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… ……　……　

……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… ……　……　

……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… ……　……　

……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… ……　……　

……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… ……　……　

　

　

　

　32　　　　ここに、見出しなどを記述しますだよ〜*。　　このページのトップへ       

任意のﾃｷｽﾄ ……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… 　

……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… ……　……　

……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… ……　……　

……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… ……　……　

……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… ……　……　

……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… ……　……　

　

　

　

　33　　　　ここに、見出しなどを記述しますだよ〜*。　　このページのトップへ       

任意のﾃｷｽﾄ ……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… 　

……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… ……　……　

……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… ……　……　

……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… ……　……　

……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… ……　……　

……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… ……　……　

　

　

　

　

　

© 2002 hogehoge　 All rights reserved.

　

　

　

ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　文字ｻｲｽﾞ固定css_div01.htm

ﾍﾟｰｼﾞ全体とﾀｲﾄﾙや見出しの、文字ｻｲｽﾞ、ﾌｫﾝﾄの指定。　　　ﾌﾞﾗｳｻﾞの、[表示]-[文字ｻｲｽﾞ]-[最大] で変更してもｻｲｽﾞを一定に保つ。　　　　　　CSS。　　　　 ﾍﾟｰｼﾞ全体や、ﾀｲﾄﾙ、見出しの文字ｻｲｽﾞなどのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　　　Internet Explorer4.x〜 対応。　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。　　　関連・詳細情報 ：CSS-Measurement and Location Sample、CSS-Measuring Element Dimension and Location

ﾃﾞﾓは、　【Internet Explorer】-[表示]-[文字ｻｲｽﾞ]-[最大] などで。

　

< ご使用方法 >

・　ﾛｰｶﾙ（=PC）への保存は、css_div01.htm、〔任意 ： uparrow.gif、download2.gif〕　を右ｸﾘｯｸ、[対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……、などで。　　　　※: 【Internet Explorer】 - [ﾌｧｲﾙ] - [名前を付けて保存]−[ﾌｧｲﾙの種類] ”Webﾍﾟｰｼﾞ、完全” ……、などで変わってしまったﾌｧｲﾙ名や、*.html 中のﾊﾟｽは要修正。

・　このCSSの実装方法は、css_div01.htm をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、ﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄなどのHTML挿入/編集ﾒﾆｭｰなどを使って、新しいﾍﾟｰｼﾞ 1 や hogehoge.html（=任意の挿入先ﾌｧｲﾙ名） の、<head>　〜</head>の任意の行間に (*1) を、さらに <body>　〜</body>の任意の行間に (*2) をﾍﾟｰｽﾄします。

･　編集方法は、hogehoge.html を WordPad や SmipleText などのﾃｷｽﾄｴﾃﾞｨﾀｰ、あるいは ”FrontPage Express” などのﾎｰﾑﾍﾟｰｼﾞ制作ｿﾌﾄのHTMLﾀｸﾞ挿入/編集ﾒﾆｭｰ で開き編集します。　　　　下記の（例） (*1) と、 (*2) を参考に太字部分の編集を任意に行います。 　　classは取捨選択使用可。※: ﾃｷｽﾄｴﾃﾞｨﾀｰによる編集は、HP制作ｿﾌﾄとの互換性の問題を生じません（HP制作ｿﾌﾄ間は少し生じる）。

・　作動ﾃｽﾄは、ﾛｰｶﾙ（PC）に保存し、 Internet Explorer 4.x〜 などで開いて。　　　　更新の確認は、ieやｻｰﾊﾞｰからのｷｬｯｼｭﾃﾞｰﾀｰ更新を、目的のﾍﾟｰｼﾞを表示し ieで [F5]ｷｰ を押し最新ﾃﾞｰﾀ読み込みで行います（≠再ｱｸｾｽ）。

･　ｱｯﾌﾟﾛｰﾄﾞや作動ﾃｽﾄは、hogehoge.html と同じ階層〔ﾎﾙﾀﾞｰ/ﾃﾞｨﾚｸﾄﾘｰ〕に、使用する画像〔uparrow.gif、download2.gif〕なども転送/配置し実施。　　※：別ﾃﾞｨﾚｸﾄﾘｰに配置時は、*.html 中のﾊﾟｽは要修正。　　　FTPなどで変わったﾌｧｲﾙ名は要修正。　　　　ｽｸﾘﾌﾟﾄ構文中への改行混入は非作動原因。

･　関連情報 ： 色記号6、2、ｽﾀｲﾙｼｰﾄﾘﾌｧﾚﾝｽ、ﾎｰﾑﾍﾟｰｼﾞ開設入門が便利！。　　　Web& Internet Samples、Web Development、XML、DHTMLとは？、ColorTable、HTMLの色指定、色見本。

　

(*1) ：　css_div01.htm （例）　　　　　　　　　挿入先の 　<head> 〜 </head>の、〜部分にﾍﾟｰｽﾄします。

HTMLの編集方法　  (*1) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。
〔この列ﾍﾟｰｽﾄ不要〕

ｼﾌﾄJIS使用（削除不可）

ｉｅなどに表示するｱｲｺﾝﾌｧｲﾙ名（削除可）

<style type 〜 </style>は ｽﾀｲﾙｼｰﾄ・CSS

ﾏｳｽｵｰﾊﾞｰ時のﾃｷｽﾄ　 背景色　下線表示

　

非ﾏｳｽｵｰﾊﾞｰ時の下線非表示（逆も可）

以下、classは取捨選択使用可。

ﾍﾟｰｼﾞ全体のﾌｫﾝﾄ指定

　

body　部の指定

headline　　〃

　

instructions　　〃

group　　〃

button　　〃

arrow　　〃

midasi1　　〃

midasi2　　〃

midasi3　　〃

ﾘﾝｸを新しいWinで開くを標準（削除可）※：target=　いろいろ

同じﾌﾚｰﾑ　target="_self"
ﾍﾟｰｼﾞ全体　　target="_top"
親ﾌﾚｰﾑ　 target="_parent"

お気に入り、ﾀｽｸﾊﾞｰに表示するﾍﾟｰｼﾞ名（≠ﾌｧｲﾙ名）

　

<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">

<link REL="SHORTCUT ICON" href="favicon.ico">

<style type="text/css"><!-- A:hover {

COLOR: #8000e2; BACKGROUND-COLOR: #f3edee; TEXT-DECORATION: underline

}

A {

TEXT-DECORATION: none

}

font {

font-family: "ＭＳＰゴシック", "ＭＳゴシック"; font-size: 12px; line-height:13px;

}

body{ font-family: "ＭＳＰゴシック", "ＭＳゴシック"; font-size: 12px; line-height:13px;}

.headline { background-color:#B3ABBF; color: #E9FF54; font-family:MSP Gothic,MS Gothic; font-size:16pt; text-align:center; padding-top:0.5em; padding-bottom:0.5em; }

.instructions { font-style:italic; text-align:right; color:gray; margin-left:.5em; }

.group { font-family:Arial Unicode MS,Arial,Terminal; font-size:10pt; font-weight:bold ;margin-top:.5em; margin-left:.5em; margin-bottom:0.5em; }

.button { font-family:MSP Gothic,MS Gothic; font-size:10pt; font-weight:bold; text-align:right; color:gray; cursor:hand; }

.arrow { font-family:Webdings; }

.midasi1 { background-color:#877B7F; font-family:MSP Gothic,MS Gothic; font-size:12pt; font-weight:bold; margin:0px; color:#CBAEEB; text-align:left; padding-top:9px; padding-bottom:4px; margin-left:4pt ;}

.midasi2 { background-color:#99907B; font-family:MSP Gothic,MS Gothic; font-size:12pt; font-weight:bold; margin:0px; color:#FDF6F9; text-align:left; padding-top:6px; padding-bottom:4px; margin-left:4pt ;}

.midasi3 { background-color:#E8E6F2; font-family:MSP Gothic,MS Gothic; font-size:11pt; font-weight:bold; margin:0px; color:#5C2974; text-align:left; padding-top:3px; padding-bottom:3px;}

-->

</style>

<base target="_blank">

<title>サンプルページ　　文字サイズ固定</title>

　

(*2) ：　css_div01.htm （例）　　　　　　　　挿入先の 　<body> 〜 </body>　の、〜 部分にﾍﾟｰｽﾄします。

HTMLの編集方法　  (*2)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。
〔この列ﾍﾟｰｽﾄ不要〕

※：<body>　部の編集　背景　ﾘﾝｸ　表示済みﾘﾝｸﾝｸ　ｱｸﾃｨﾌﾞﾘﾝｸの各色（任意値）

ﾃｷｽﾄ　吹き出し　URL

　

　

　

　

　

 		　

<body bgcolor="#F8F5F5" link="#54006C" vlink="#62000D" alink="#00FFFF">

　

<DIV CLASS="headline"><b> &nbsp;XML/XSL/DHTML/CSS/JAVA</b>　<span style="font-weight: 400"><font SIZE="2"><a title="最新版の保存:右ｸﾘｯｸ → 対象をﾌｧｲﾙに保存で。" href="http://xml-xsl.sakura.ne.jp/oritatami3c.html">Java、JavaScript、DHTMLｻﾝﾌﾟﾙ</a>　<!--webbot bot="HTMLMarkup" startspan --><img border="0" src="download2.gif" width="14" height="16" onclick="execCommand('SaveAs');" title="ｸﾘｯｸ → このﾌｧｲﾙに名前を付けて保存できます。"><!--webbot bot="HTMLMarkup" endspan i-checksum="39469" -->　　<font color="#CCCCCC">作成：hogehoge</font><font color="#CCDDDD">　<!--webbot bot="Timestamp" S-Type="REGENERATED" S-Format="%Y/%m/%d %H:%M" startspan -->2002/08/09 15:44<!--webbot bot="Timestamp" endspan i-checksum="25996" --></font></font></span></DIV> </DIV>

<DIV CLASS="instructions">

任意のﾃｷｽﾄ 　　<a target="_self" href="#i1">見出し31　へ</a>&nbsp;&nbsp;

<a target="_self" href="#i2">見出し32　へ</a>&nbsp;&nbsp;

<a target="_self" href="#i3">見出し33　へ</a>　…　…… ……　…… ……　……　　

</DIV>

<DIV CLASS="instructions">

任意のﾃｷｽﾄ 　　…… ……　…… ……　…… ……　…… ……　…… ……　……

</DIV>

<DIV CLASS="group">xml/xsl/DHTML/css/Java

<DIV CLASS="button" ID="xml/xsl/DHTML/css/Java">

<a href="http://xml-xsl.sakura.ne.jp/random_message2.hta" target="_blank" title="HTML Applications (HTA)実験">ﾗﾝﾀﾞﾑﾒｯｾｰｼﾞ2 - HTA</a><SPAN CLASS="arrow">4</SPAN>

</DIV>

</DIV>

<p>

<DIV CLASS="midasi1">

<font color="#970CFE">　</font>21　ここに、ﾀｲﾄﾙなどを記述するじゃ…*。　　<a href="http://xml-xsl.sakura.ne.jp/css.htm" target="_blank" title="ｽﾀｲﾙｼｰﾄのﾀｸﾞのﾘﾌｧﾚﾝｽ-機能索引"><font face="ＭＳ Ｐゴシック" size="2">CSSﾘﾌｧﾚﾝｽ</font></a><font face="ＭＳ Ｐゴシック">

　<font color="#FFFFFF"><span style="font-weight: 400"> - ここに説明文を記述します。</span></font></font></DIV>

<DIV CLASS="midasi2">

　22　ここに、ｻﾌﾞﾀｲﾄﾙなどを記述しますだよ。 <font face="ＭＳ Ｐゴシック" size="2">

<a target="_blank" title="ｽﾀｲﾙｼｰﾄのﾀｸﾞのﾘﾌｧﾚﾝｽ-機能索引" href="http://xml-xsl.sakura.ne.jp/data_bind.htm">

DataBind</a></font><font face="ＭＳ Ｐゴシック">

　<font color="#FFFFFF"><span style="font-weight: 400"> - ここに説明文を記述します。</span></font></font></DIV>

<p>　</p>

<table border="1" cellspacing="0" width="100%" bordercolorlight="#FFFFFF" bordercolordark="#C7BECD" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0">

<tr>

<td width="100%" bgcolor="#FFFFFF">

<DIV CLASS="midasi3">

<a name="i1"></a><span style="background-color: #E8E6F2"><strong>

<font size="2">　<font color="#76499A">31　　　ここに、見出しなどを記述しますだよ〜*。</font></font>　　</strong></span><a href="#top" target="_self"><img src="./uparrow.gif" border="0" alt="このページのトップへ" width="100" height="11">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>

</DIV>

</td>

</tr>

</table>

<p>任意のﾃｷｽﾄ ……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… 　</p>

<p> ……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… ……　……　</p>

<p> ……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… ……　……　</p>

<p> ……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… ……　……　</p>

<p> ……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… ……　……　</p>

<p> ……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… ……　……　</p>

<p>　</p>

<table border="1" cellspacing="0" width="100%" bordercolorlight="#FFFFFF" bordercolordark="#C7BECD" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0">

<tr>

<td width="100%" bgcolor="#FFFFFF">

<DIV CLASS="midasi3">

<a name="i2"></a><span style="background-color: #E8E6F2"><strong>

<font size="3">　<font color="#76499A">32　　　　ここに、見出しなどを記述しますだよ〜*。</font></font>　　</strong></span><a href="#top" target="_self"><img src="./uparrow.gif" border="0" alt="このページのトップへ" width="100" height="11">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>

</DIV>

</td>

</tr>

</table>

<p>任意のﾃｷｽﾄ ……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… 　</p>

<p> ……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… ……　……　</p>

<p> ……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… ……　……　</p>

<p> ……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… ……　……　</p>

<p> ……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… ……　……　</p>

<p> ……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… ……　……　</p>

<p>　</p>

<table border="1" cellspacing="0" width="100%" bordercolorlight="#FFFFFF" bordercolordark="#C7BECD" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0">

<tr>

<td width="100%" bgcolor="#FFFFFF">

<DIV CLASS="midasi3">

<a name="i3"></a><span style="background-color: #E8E6F2"><strong>

<font size="3">　<font color="#76499A">33　　　　ここに、見出しなどを記述しますだよ〜*。</font></font>　　</strong></span><a href="#top" target="_self"><img src="./uparrow.gif" border="0" alt="このページのトップへ" width="100" height="11">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>

</DIV>

</td>

</tr>

</table>

<p>任意のﾃｷｽﾄ ……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… 　</p>

<p> ……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… ……　……　</p>

<p> ……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… ……　……　</p>

<p> ……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… ……　……　</p>

<p> ……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… ……　……　</p>

<p> ……　……　 ……　…… ……　…… ……　…… ……　…… ……　…… ……　……　</p>

<p>　</p>

<P><HR color="#000000" size="0"><font color="black" face="MS UI Gothic" size="2">&copy;<a href="http://www./……/xxx.html" target="_top"> 2002 hogehoge All rights reserved.</a></font><font face="MS UI Gothic">

</font>

　

< 補足 >　　　　適時参照あれ！。

・　Wordpad　によるHTMLｿｰｽ（ﾀｸﾞ）を見ながらの直接編集方法。