ｻﾝﾌﾟﾙ 1

　ﾊﾟﾈﾙ 1　 | 　ﾊﾟﾈﾙ 2　 | 　ﾊﾟﾈﾙ 2　 | 　ﾊﾟﾈﾙ 4　 | 　ﾊﾟﾈﾙ 5　 | 　ﾊﾟﾈﾙ 6　 | 　ﾊﾟﾈﾙ 7　 | 　ﾊﾟﾈﾙ 8　


ｻﾝﾌﾟﾙ 2

　

　

　

ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　水平ｽｸﾛｰﾙ2　　h-scroll2.htm

HTML（画像やﾃｷｽﾄ、ﾊｲﾊﾟｰﾘﾝｸ）を記述ﾊﾟﾈﾙ（DIV）を、横方向に折り畳み・表示。　　　　　　DHTML。　　　　　　ｻｲｽﾞ、配色、画像、ﾃｷｽﾄなどのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　　　all 対応。　　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。

　

< ご使用方法 >

　・　ﾛｰｶﾙ（=PC）への保存は、h-scroll2/をｸﾘｯｸ開いたﾎﾙﾀﾞｰで、h-scroll2.htm、*.js、*.cssを右ｸﾘｯｸ、[対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……、などで。

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

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

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

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

　･　関連情報 ： 色記号6、2、ｽﾀｲﾙｼｰﾄﾘﾌｧﾚﾝｽ、ﾎｰﾑﾍﾟｰｼﾞ開設入門が便利！。　　　Web Development、Web開発、MSDN IE8 HTMLとCSS。

　

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

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

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

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

<style type 〜 </style>は（削除可）
(*1)〜(*3)表ﾀｲﾄﾙ背景

body 文字色　背景色　下線
ﾊｲﾊﾟｰﾘﾝｸ 〃
表示済みの〃
ﾏｳｽｵｰﾊﾞｰ時の〃
ｸﾘｯｸ中の〃
ﾌｫﾝﾄ

　

※：target=　いろいろ（本例は無記述）
同じﾌﾚｰﾑ=_self、ﾍﾟｰｼﾞ全体=_top、親ﾌﾚｰﾑ=_parent
お気に入り、ﾀｽｸﾊﾞｰに表示するﾍﾟｰｼﾞ名（≠ﾌｧｲﾙ名）

　

　

　

　

　

　

　


　

ｻﾝﾌﾟﾙ1　外余白（上右下左）

　

ｻﾝﾌﾟﾙ1　内余白（上右下左）
背景色

　

　

ｻﾝﾌﾟﾙ2　外余白（上右下左）
枠幅（罫線）　色

　

内余白（上右下左）
背景色

　

　

　


ｻﾝﾌﾟﾙ1　
折り畳みﾊﾟﾈﾙ幅　表示ﾊﾟﾈﾙ幅　〃]高さ

　

ｻﾝﾌﾟﾙ2
折り畳みﾊﾟﾈﾙ幅　表示ﾊﾟﾈﾙ幅　〃]高さ

ﾞ

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

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

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

<style type="text/css"><!--
.xxx0 { background: #F9F8F9 url('wttec.gif'); }
.xxx1 { background-color:#E3E0DC; }
.xxx2 { background-color:#FFFFFF; }
body { color:#000000; background: #F9F8F9 url('wttec.gif'); text-decoration:none; }
a:link { color:#3C0055; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#270037; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#1F002E; background-color:#D2F3F4; text-decoration:underline; }
a:active { color:#1F002E; background-color:#F5FFD2; text-decoration:underline; }
font {
font-size:12px;
line-height:13px;
}
body,tr,td,form{ font-family:MS PGothic,MS Gothic,Verdana; font-size: 12px}
</style>

<base target="">
<title>サンプルページ　　水平スクロール2</title>

<!--　☆ -----------　↓ この間をコピー＆ペーストします。 ------------　-->
<!--Make sure your page contains a valid doctype at the very top-->
<link rel="stylesheet" type="text/css" href="004578120.css" />
<script type="text/javascript" src="004578121.js"></script>
<script type="text/javascript" src="004578120.js">
/***********************************************
* Horizontal Accordion script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>

<style type="text/css">
/*CSS for example Accordion #hc1*/

#hc1 li{
margin:0 0px 0 0; /*Spacing between each LI container*/
}

#hc1 li .hpanel{
padding: 5px; /*Padding inside each content*/
background: #EDEBE8;
}

/*CSS for example Accordion #hc2*/

#hc2 li{
margin:0 0 0 0; /*Spacing between each LI container*/
border: 12px solid #EDEBE8;
}

#hc2 li .hpanel{
padding: 5px; /*Padding inside each content*/
background: #F7F6F5;
cursor: hand;
cursor: pointer;
}
</style>

<script type="text/javascript">
haccordion.setup({
accordionid: 'hc1', //main accordion div id
paneldimensions: {peekw:'50px', fullw:'400px', h:'158px'},
selectedli: [0, true], //[selectedli_index, persiststate_bool]
collapsecurrent: false //<- No comma following very last setting!
})

haccordion.setup({
accordionid: 'hc2', //main accordion div id
paneldimensions: {peekw:'30px', fullw:'450px', h:'150px'},
selectedli: [-1, true], //[selectedli_index, persiststate_bool]
collapsecurrent: true //<- No comma following very last setting!
})

</script>
<!--　☆ -----------　↑ この間をコピー＆ペーストします。 ------------　-->
　

　

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

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

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

ｻﾝﾌﾟﾙ1,2一方を削除して使用可。

ｻﾝﾌﾟﾙ1

　

画像URL(例)　画像表示ｻｲｽﾞ　吹き出し　ﾃｷｽﾄ(例)

　

　

　

　

　

吹き出し　ﾊﾟﾈﾙﾀｲﾄﾙ

　

ｻﾝﾌﾟﾙ2

　

吹き出し
ﾃｷｽﾄ(例)　

　

　

ﾃｷｽﾄ(例)
画像URL(例)

　

　

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

</head>

<body bgcolor="#F9F8F9" link="#54006C" vlink="#270037" alink="#00FFFF">
<!--　★　-----------　↓ この間をコピー＆ペーストします。 ------------　-->
<p>ｻﾝﾌﾟﾙ 1</p>
<div id="hc1" class="haccordion">
<ul>
<li>
<div class="hpanel">
<img src="http://……/…….jpg" style="float:left; padding-right:8px; width:200px; height:148px" / title="ﾏｳｽｵｰﾊﾞｰでﾊﾟﾈﾙを開き・表示します。">1.　φ（．．　）　　ここに、ｺﾒﾝﾄなどのﾃｷｽﾄや、HTML（画像など）を、記述 できるのさ。
</div>
</li>
　

====　　この間、説明を省略。　　====

<li>
<div class="hpanel">
<img src="http://……/…….jpg" style="float:left; padding-right:8px; width:200px; height:148px" />8.　φ（．．　）　　ここに、ｺﾒﾝﾄなどのﾃｷｽﾄや、HTML（画像など）を、記述できるのさ。
</div>
</li>
</ul>
</div>
<p style="clear:left"><a href="javascript:haccordion.expandli('hc1', 0)" title="ｸﾘｯｸでﾊﾟﾈﾙを選択・ｵｰﾌﾟﾝします！。">　ﾊﾟﾈﾙ 1　</a> | <a href="javascript:haccordion.expandli('hc1', 1)">　ﾊﾟﾈﾙ 2　</a> | <a href="javascript:haccordion.expandli('hc1', 2)">　ﾊﾟﾈﾙ 2　</a> | <a href="javascript:haccordion.expandli('hc1', 3)">　ﾊﾟﾈﾙ 4　</a> | <a href="javascript:haccordion.expandli('hc1', 4)">　ﾊﾟﾈﾙ 5　</a> | <a href="javascript:haccordion.expandli('hc1', 5)">　ﾊﾟﾈﾙ 6　</a> | <a href="javascript:haccordion.expandli('hc1', 6)">　ﾊﾟﾈﾙ 7　</a> | <a href="javascript:haccordion.expandli('hc1', 7)">　ﾊﾟﾈﾙ 8　</a></p>
<br />

<p>ｻﾝﾌﾟﾙ 2</p>
<div id="hc2" class="haccordion">
<ul>
<li style="border-right-width:0">
<div class="hpanel" style="padding:10px; width:550px" title="ﾏｳｽｵｰﾊﾞｰでﾊﾟﾈﾙを開き・表示します。">
1.　　φ（．．　）　　ここに、ｺﾒﾝﾄなどのﾃｷｽﾄや、HTML（画像など）を、記述できるのさ。 ΘΘΠΠ〜
</div>
　

====　　この間、説明を省略。　　====

<li>
<div class="hpanel" style="padding:10px; width:550px">
7.　　φ（．．　）　　ここに、ｺﾒﾝﾄなどのﾃｷｽﾄや、HTML（画像など）を、記述できるのさ。 ＝（ΦωΦ）＝
<img align="right" border="0" src="http://……/…….jpg" title="ﾒｯｾｰｼﾞ">
</div>
</li>
</ul>
</div>
<!--　★　-----------　↑ この間をコピー＆ペーストします。 ------------　-->

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

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