散文や、CDｺﾚｸｼｮﾝ、窓から来る猛 =(・。・)=　日記、ｵﾝﾗｲﾝｿﾌﾄﾘﾝｸ集。 『燦たる夕陽を浴びてとぼとぼ還る。理性もまた奔走する一種の情熱である。』　

　Twitter
You Tubeで世界の♫、Jazz ♫やWorld ♫、Classical ♫ & Musician と出逢い、 ”♫ Play List” を作成・発信！。

　Java JavaScript DHTML XML CSS ﾌﾚｰﾑｻﾝﾌﾟﾙ･応用方法
ﾎｰﾑﾍﾟｰｼﾞの多彩な表現を支援する、ｶｯﾄ&ﾍﾟｰｽﾄですぐ使える最新のJava・JavaScript・DHTML・CSSｻﾝﾌﾟﾙ多数　

　世界のｵﾝﾗｲﾝｿﾌﾄ、ﾊﾟｯﾁ、FixPac
　　Win、Mac、Linux、ﾍﾞﾝﾀﾞｰ、ｶﾃｺﾞﾘｰ、あ〜Ｚ、から閲覧する最新ｿﾌﾄ、ｿｰｽ、ﾂｰﾙ、ﾃﾞﾊﾞｲｽﾄﾞﾗｲﾊﾞｰ、FixPac、ﾊﾟｯﾁ情報　

　ｽﾀｲﾙｼｰﾄﾘﾌｧﾚﾝｽ
CSSﾘﾌｧﾚﾝｽ、応用方法、ｻﾝﾌﾟﾙ（例）　

Windowsｵﾝﾗｲﾝｿﾌﾄﾀﾞｳﾝﾛｰﾄﾞ
　Microsoft、ｼﾞｬｽﾄｼｽﾃﾑ、Linux、Sun、Java、IBM、NEC、OS/2　

　ｼｮｰﾄｶｯﾄｷｰ
Windows、ie、Outlook、Office、Notes、一太郎　

　ﾌﾚｰﾑ
全種類のﾌﾚｰﾑｻﾝﾌﾟﾙ、+JavaScript、応用方法、ﾋﾝﾄ　

　RGB5
色ﾊﾟﾚｯﾄで色を作成、HTML記述用16進色ｺｰﾄﾞの獲得"　

　ﾏﾙﾁ検索2a
検索ｴﾝｼﾞﾝを次々に切り換え、食材・ｱｰﾁｽﾄ名からﾚｼﾋﾟやCDｼｮｯﾌﾟなどを検索。

　携帯電話最新情報
ｷｬﾘｱｰ、方式、形名、市販価格、機能・性能、拡大写真、販売開始日、関連・詳細情報ﾊｲﾊﾟｰﾘﾝｸ。　項目昇/降順ｿｰﾄ

　ﾃﾞｲﾀﾍﾞｰｽ15
ﾃｸﾉﾛｼﾞｰや、ｶﾃｺﾞﾘｰ、ｻｲﾄ名の一部、洗練度などで、複数または単一絞り込み抽出。

　ｶﾚﾝﾀﾞｰ13
〜2013年の祝日、任意日の予定・ｺﾒﾝﾄ設定可、痕跡色（ﾃｷｽﾄﾌｧｲﾙに記述。）。

　ｶﾚﾝﾀﾞｰ2015年度
　ｶﾚﾝﾀﾞｰいろいろ - 日程表用（ｽﾌﾟﾚｯﾄﾞｼｰﾄ）、時計、潮汐表　


ねこつん

窓からの友達、=(・。.・)=　　=(゜。.゜)=　　=(^。^)=　　(^ ^)　（゜∇゜）

　縦書き4a
jQuery、DHTML,CSS。　ﾙﾋﾞ、強制改ﾍﾟｰｼﾞ。

　水平ｽｸﾛｰﾙ
jQuery、横にｽｸﾛｰﾙするDIVにｺﾝﾃﾝﾂ（ﾃｷｽﾄ、Movie）を記述。

　ﾒｯｾｰｼﾞｽｸﾛｰﾙ 24
　小□のﾒｯｾｰｼﾞや画像（HTML）を、（<）（>）ﾎﾞﾀﾝで、垂直・水平ｽｸﾛｰﾙ。

　ﾗﾝﾀﾞﾑﾒｯｾｰｼﾞ6
小説家、哲学者の箴言、一言半句、ことわざの英訳など。　

　YouTube　♫ｸﾗｼｯｸ Playlist
☆□You Tube　ｸﾗｼｯｸの連続演奏（作曲家・ｱｰﾁｽﾄ）。

　YouTube　♫Jazz・Pops Playlist
☆□You Tube ｼﾞｬｽﾞ・ﾜｰﾙﾄﾞﾐｭｰｼﾞｯｸの連続演奏。（作曲家・ｱｰﾁｽﾄ）

　ﾆｭｰｽ ｲﾝﾃﾞｯｸｽ
AJAX Feed API、ﾌﾟﾙﾀﾞｳﾝﾒﾆｭｰで選択したﾌｨｰﾄﾞを表示。

　左ﾒﾆｭｰ 7
左端にﾌﾛｰﾃｨﾝｸﾞするｱｲｺﾝ（非画像）をｸﾘｯｸ！、ﾏｳｽｵｰﾊﾞｰ展開ﾒﾆｭｰ。

　左ﾒﾆｭｰ 8a
左端にﾌﾛｰﾃｨﾝｸﾞするｱｲｺﾝをｸﾘｯｸ！、”折り畳みﾒﾆｭｰ”を搭載したﾌﾟｯｼｭﾒﾆｭｰを表示。

　ﾂﾘｰﾒﾆｭｰ 15Ffr
DHTML、ﾌﾚｰﾑ構造の Explorer 風のﾂﾘｰﾒﾆｭｰ。　多層・多段階層をｼﾝﾌﾟﾙに編集！できる。　all対応。　

　ﾏｳｽｶｰｿﾙ1
ｶｰｿﾙに纏わり付き乱舞する画像（ｳｯﾄﾞｽﾄｯｸ）　

　WebRadioWebﾗｼﾞｵ
小Win - 3個のﾌﾟﾙﾀﾞｳﾝﾒﾆｭｰ、Jazz・ﾜｰﾙﾄﾞ・ｸﾗｼｯｸ・ﾎﾟｯﾌﾟｽ・ﾛｯｸ"　

　表5
ﾏｳｽｵｰﾊﾞｰﾎﾞﾀﾝ - ♪連続演奏、WindowsMediaPlayer、Jazz、Classics　

　ﾏｳｽｵｰﾊﾞｰ26
ﾊｲﾊﾟｰﾘﾝｸのｸﾘｯｸでﾒﾆｭｰ・ｻｲﾄ選択、ｻｳﾝﾄﾞ・ﾑｰﾋﾞｰ・ｽﾄｰﾘｰﾑｺﾝﾃﾝﾂを連続演奏 - WindowsMediaPlayerﾊﾟﾈﾙ制御　

　ｹﾞｰﾑ
ｹﾞｰﾑ・ﾊﾟｽﾞﾙのﾀﾞｳﾝﾛｰﾄﾞ - 世界のｹﾞｰﾑｻｰﾁｴﾝｼﾞﾝ･ﾘﾝｸ集で、ﾆｭｰｽ、ｵﾝﾗｲﾝｿﾌﾄをｹﾞｯﾄ！　

　ｽﾗｲﾄﾞｼｮｰ50
ﾌｪｲﾄﾞｱｳﾄ効果で大画像切り替え。　

　Google Maps8
Maps API、Street View、お気に入りｷﾞｬﾗﾘｰ集、ﾘｽﾄから選択。

　ﾎﾃﾙ検索28
Webﾍﾟｰｼﾞにﾎﾃﾙ検索 ﾌｫｰﾑ付きGoogle Mapを実装する。　主な国から選べる。

　地下鉄路線33
Webﾍﾟｰｼﾞに”世界の地下鉄路線”Transit laye 付きGoogle Mapを実装する。

　Google Maps3d
Maps API、ﾙｰﾄ案内、ｱﾄﾞﾚｽ入力・ﾏｯﾌﾟのｸﾘｯｸ指定、移動手段選択、ﾌﾟﾘｾｯﾄ可。　標高ﾏｯﾌﾟ付き。

　Google Maps17
Maps API、各国の場所 、国旗をﾘｽﾄから辿る、国旗をXMLﾌｧｲﾙに記述。

　Google Maps18
Maps API、XML、ｽﾀｰﾊﾞｯｸｽの店舗 、ｸﾘｯｸで情報、場所検索をﾀｲﾌﾟｲﾝで！。

　Google Earth10
Earth API、地上・上空散歩、発進場所の設定、ｶﾒﾗ ｺﾝﾄﾛｰﾙ。

　Google Earth8
Earth API、世界的名建造物の上空俯瞰、CG+実画像。


散文や、CDｺﾚｸｼｮﾝ、窓から来る猛 =(・。・)=　日記、ｵﾝﾗｲﾝｿﾌﾄﾘﾝｸ集。 『燦たる夕陽を浴びてとぼとぼ還る。理性もまた奔走する一種の情熱である。』　

　Twitter
You Tubeで世界の♫、Jazz ♫やWorld ♫、Classical ♫ & Musician と出逢い、 ”♫ Play List” を作成・発信！。

　Java JavaScript DHTML XML CSS ﾌﾚｰﾑｻﾝﾌﾟﾙ･応用方法
ﾎｰﾑﾍﾟｰｼﾞの多彩な表現を支援する、ｶｯﾄ&ﾍﾟｰｽﾄですぐ使える最新のJava・JavaScript・DHTML・CSSｻﾝﾌﾟﾙ多数　

　世界のｵﾝﾗｲﾝｿﾌﾄ、ﾊﾟｯﾁ、FixPac
　　Win、Mac、Linux、ﾍﾞﾝﾀﾞｰ、ｶﾃｺﾞﾘｰ、あ〜Ｚ、から閲覧する最新ｿﾌﾄ、ｿｰｽ、ﾂｰﾙ、ﾃﾞﾊﾞｲｽﾄﾞﾗｲﾊﾞｰ、FixPac、ﾊﾟｯﾁ情報　

　ｽﾀｲﾙｼｰﾄﾘﾌｧﾚﾝｽ
CSSﾘﾌｧﾚﾝｽ、応用方法、ｻﾝﾌﾟﾙ（例）　

Windowsｵﾝﾗｲﾝｿﾌﾄﾀﾞｳﾝﾛｰﾄﾞ
　Microsoft、ｼﾞｬｽﾄｼｽﾃﾑ、Linux、Sun、Java、IBM、NEC、OS/2　

　ｼｮｰﾄｶｯﾄｷｰ
Windows、ie、Outlook、Office、Notes、一太郎　

　ﾌﾚｰﾑ
全種類のﾌﾚｰﾑｻﾝﾌﾟﾙ、+JavaScript、応用方法、ﾋﾝﾄ　

　RGB5
色ﾊﾟﾚｯﾄで色を作成、HTML記述用16進色ｺｰﾄﾞの獲得"　

　ﾏﾙﾁ検索2a
検索ｴﾝｼﾞﾝを次々に切り換え、食材・ｱｰﾁｽﾄ名からﾚｼﾋﾟやCDｼｮｯﾌﾟなどを検索。

　携帯電話最新情報
ｷｬﾘｱｰ、方式、形名、市販価格、機能・性能、拡大写真、販売開始日、関連・詳細情報ﾊｲﾊﾟｰﾘﾝｸ。　項目昇/降順ｿｰﾄ

　ﾃﾞｲﾀﾍﾞｰｽ15
ﾃｸﾉﾛｼﾞｰや、ｶﾃｺﾞﾘｰ、ｻｲﾄ名の一部、洗練度などで、複数または単一絞り込み抽出。

　ｶﾚﾝﾀﾞｰ13
〜2013年の祝日、任意日の予定・ｺﾒﾝﾄ設定可、痕跡色（ﾃｷｽﾄﾌｧｲﾙに記述。）。

　ｶﾚﾝﾀﾞｰ2015年度
　ｶﾚﾝﾀﾞｰいろいろ - 日程表用（ｽﾌﾟﾚｯﾄﾞｼｰﾄ）、時計、潮汐表　


ねこつん

窓からの友達、=(・。.・)=　　=(゜。.゜)=　　=(^。^)=　　(^ ^)　（゜∇゜）

　縦書き4a
jQuery、DHTML,CSS。　ﾙﾋﾞ、強制改ﾍﾟｰｼﾞ。

　水平ｽｸﾛｰﾙ
jQuery、横にｽｸﾛｰﾙするDIVにｺﾝﾃﾝﾂ（ﾃｷｽﾄ、Movie）を記述。

　ﾒｯｾｰｼﾞｽｸﾛｰﾙ 24
　小□のﾒｯｾｰｼﾞや画像（HTML）を、（<）（>）ﾎﾞﾀﾝで、垂直・水平ｽｸﾛｰﾙ。

　ﾗﾝﾀﾞﾑﾒｯｾｰｼﾞ6
小説家、哲学者の箴言、一言半句、ことわざの英訳など。　

　YouTube　♫ｸﾗｼｯｸ Playlist
☆□You Tube　ｸﾗｼｯｸの連続演奏（作曲家・ｱｰﾁｽﾄ）。

　YouTube　♫Jazz・Pops Playlist
☆□You Tube ｼﾞｬｽﾞ・ﾜｰﾙﾄﾞﾐｭｰｼﾞｯｸの連続演奏。（作曲家・ｱｰﾁｽﾄ）

　ﾆｭｰｽ ｲﾝﾃﾞｯｸｽ
AJAX Feed API、ﾌﾟﾙﾀﾞｳﾝﾒﾆｭｰで選択したﾌｨｰﾄﾞを表示。

　左ﾒﾆｭｰ 7
左端にﾌﾛｰﾃｨﾝｸﾞするｱｲｺﾝ（非画像）をｸﾘｯｸ！、ﾏｳｽｵｰﾊﾞｰ展開ﾒﾆｭｰ。

　左ﾒﾆｭｰ 8a
左端にﾌﾛｰﾃｨﾝｸﾞするｱｲｺﾝをｸﾘｯｸ！、”折り畳みﾒﾆｭｰ”を搭載したﾌﾟｯｼｭﾒﾆｭｰを表示。

　ﾂﾘｰﾒﾆｭｰ 15Ffr
DHTML、ﾌﾚｰﾑ構造の Explorer 風のﾂﾘｰﾒﾆｭｰ。　多層・多段階層をｼﾝﾌﾟﾙに編集！できる。　all対応。　

　ﾏｳｽｶｰｿﾙ1
ｶｰｿﾙに纏わり付き乱舞する画像（ｳｯﾄﾞｽﾄｯｸ）　

　WebRadioWebﾗｼﾞｵ
小Win - 3個のﾌﾟﾙﾀﾞｳﾝﾒﾆｭｰ、Jazz・ﾜｰﾙﾄﾞ・ｸﾗｼｯｸ・ﾎﾟｯﾌﾟｽ・ﾛｯｸ"　

　表5
ﾏｳｽｵｰﾊﾞｰﾎﾞﾀﾝ - ♪連続演奏、WindowsMediaPlayer、Jazz、Classics　

　ﾏｳｽｵｰﾊﾞｰ26
ﾊｲﾊﾟｰﾘﾝｸのｸﾘｯｸでﾒﾆｭｰ・ｻｲﾄ選択、ｻｳﾝﾄﾞ・ﾑｰﾋﾞｰ・ｽﾄｰﾘｰﾑｺﾝﾃﾝﾂを連続演奏 - WindowsMediaPlayerﾊﾟﾈﾙ制御　

　ｹﾞｰﾑ
ｹﾞｰﾑ・ﾊﾟｽﾞﾙのﾀﾞｳﾝﾛｰﾄﾞ - 世界のｹﾞｰﾑｻｰﾁｴﾝｼﾞﾝ･ﾘﾝｸ集で、ﾆｭｰｽ、ｵﾝﾗｲﾝｿﾌﾄをｹﾞｯﾄ！　

　ｽﾗｲﾄﾞｼｮｰ50
ﾌｪｲﾄﾞｱｳﾄ効果で大画像切り替え。　

　Google Maps8
Maps API、Street View、お気に入りｷﾞｬﾗﾘｰ集、ﾘｽﾄから選択。

　ﾎﾃﾙ検索28
Webﾍﾟｰｼﾞにﾎﾃﾙ検索 ﾌｫｰﾑ付きGoogle Mapを実装する。　主な国から選べる。

　地下鉄路線33
Webﾍﾟｰｼﾞに”世界の地下鉄路線”Transit laye 付きGoogle Mapを実装する。

　Google Maps3d
Maps API、ﾙｰﾄ案内、ｱﾄﾞﾚｽ入力・ﾏｯﾌﾟのｸﾘｯｸ指定、移動手段選択、ﾌﾟﾘｾｯﾄ可。　標高ﾏｯﾌﾟ付き。

　Google Maps17
Maps API、各国の場所 、国旗をﾘｽﾄから辿る、国旗をXMLﾌｧｲﾙに記述。

　Google Maps18
Maps API、XML、ｽﾀｰﾊﾞｯｸｽの店舗 、ｸﾘｯｸで情報、場所検索をﾀｲﾌﾟｲﾝで！。

　Google Earth10
Earth API、地上・上空散歩、発進場所の設定、ｶﾒﾗ ｺﾝﾄﾛｰﾙ。

　Google Earth8
Earth API、世界的名建造物の上空俯瞰、CG+実画像。

　

　

　

ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　ﾒｯｾｰｼﾞｽｸﾛｰﾙ24　　message_sr24.htm

小□のﾒｯｾｰｼﾞや画像（HTML）を、（<）（>）ﾎﾞﾀﾝで、垂直・水平ｽｸﾛｰﾙ。　　　対象ｺﾝﾃﾝﾂは、<p>　</p>　ﾀｸﾞ区切り。　　　　　　jQuery、DHTML。　　　　　　対象ｺﾝﾃﾝﾂやｿｸﾄﾞなどのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　　　all 対応。　　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。

ﾃﾞﾓは、（<）（>）ﾎﾞﾀﾝで。

　

< ご使用方法 >

　・　ﾛｰｶﾙ（=PC）への保存は、message_sr24/をｸﾘｯｸ開いたﾎﾙﾀﾞｰで、message_sr24.htm、impetus.js、scrollable.js（速度など）、scrollable.css（表示ｻｲｽﾞなど）、*.gif　を右ｸﾘｯｸ、[対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……、などで。　　　　※:  変わってしまった、ﾌｧｲﾙ名や、*.html 中のﾊﾟｽは要修正。

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

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

　・　作動ﾃｽﾄは、ﾛｰｶﾙ（PC）に保存し、 Internet Explorer 10.x〜 などで開いて。　　　　 更新の確認は、[F5]ｷｰ を押し、最新ﾃﾞｰﾀ読み込み、で。　　　　あるいは、Internet Explorerを全て閉じ、再起動を行い、閲覧履歴の削除後や、【Internet Explorer】- [ﾂｰﾙ] - [ｲﾝﾀｰﾈｯﾄ ｵﾌﾟｼｮﾝ] - [閲覧の履歴] - [削除] などでも。

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

　･　関連情報 ： 色記号5、〃6、ｽﾀｲﾙｼｰﾄﾘﾌｧﾚﾝｽ、ﾎｰﾑﾍﾟｰｼﾞ開設入門。　　　Web Development、Web開発、IE10 互換性ｸｯｸﾌﾞｯｸ、〃開発者向けｶﾞｲﾄﾞ、IE API ﾘﾌｧﾚﾝｽ、IE 開発 > HTMLとCSS、開発ﾂｰﾙでｻｲﾄを修正、ｽｸﾘﾌﾟﾄ ﾃﾞﾊﾞｯｸﾞの概要、HTMLとCSSのｻﾎﾟｰﾄ、CSSの改良点、XML、〃ﾘﾌｧﾚﾝｽ、DHTML。

　

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

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

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

互換表示

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

<style type= 〜  </style>は（削除可）
(*1)〜(*3)表ﾀｲﾄﾙ背景
body 文字色　背景色　下線
ﾊｲﾊﾟｰﾘﾝｸ 〃
表示済みの〃
ﾏｳｽｵｰﾊﾞｰ時の〃
ｸﾘｯｸ中の〃
ﾌｫﾝﾄ

ﾘﾝｸを新しいWinで開くを標準（削除可）※：target=　いろいろ
同じﾌﾚｰﾑ=_self、ﾍﾟｰｼﾞ全体=_top、親ﾌﾚｰﾑ=_parent

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

jQuery

 　

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

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

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

<style type="text/css"><!--
.xxx0 { background: #F9F8F9 url('wttec.gif'); }
.xxx1 { background-color:#E3E0DC; }
.xxx2 { background-color:#FFF; }
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="_blank">

<title>サンプルページ　　メッセ−ジスクロール24</title>

<!--　☆ -----------　↓ この間をコピー＆ペーストします。 ------------　-->
<link rel="stylesheet" type="text/css" href="scrollable.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="impetus.js"></script>
<script type="text/javascript" src="scrollable.js">
/***********************************************
* Scrollable Content 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>

<script>
var scrollv, scrollh // register two global vars for two scrollable instances
jQuery(function(e){ // on DOM load

scrollv = new scrollable({
wrapperid: "scrollable-v"
})

scrollh = new scrollable({
wrapperid: "scrollable-h",
orient: 'horizontal'
})
})
</script>
<!--　☆ -----------　↑ この間をコピー＆ペーストします。 ------------　-->
　

　

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

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

垂直・水平のどちらか一方を削除して使用。

　

　

　

垂直ｽｸﾛｰﾙｺﾝﾃﾝﾂ（HTML）

以下、同様。

　

　

　

　

　

　

　

　

ｺﾝﾃﾝﾂ内余白（上下・左右）

　

　

水平ｽｸﾛｰﾙｺﾝﾃﾝﾂ（HTML）

以下、同様。


<body>

<!--　★　-----------　↓ この間をコピー＆ペーストします。 ------------　-->
<!--webbot bot="HTMLMarkup" startspan -->

<div id="scrollable-v" class="scrollable">
<div class="belt">

<!--INSERT CONTENT HERE INSIDE BELT DIV-->
<p>　<a href='http://　……　database4.htm'><img title='ｷｬﾘｱｰ・方式・市販価格・主な性能・発売日、関連ﾘﾝｸなど。　列ｿｰﾄ・入れ替え。' src='http://　……　mobile1.gif' border='0'> 携帯電話最新情報</a>　ｷｬﾘｱｰ、方式、形名、市販価格、機能・性能、拡大写真、販売開始日、関連・詳細情報ﾊｲﾊﾟｰﾘﾝｸ。　項目昇/降順ｿｰﾄ</p>

<p>　<a href='http://　……　calendar13.htm'><img src='http://　……　calendari.gif' border='0'> ｶﾚﾝﾀﾞｰ13</a>　〜2013年の祝日、任意日の予定・ｺﾒﾝﾄ設定可、痕跡色（ﾃｷｽﾄﾌｧｲﾙに記述。）。</p>

====  この間､説明を省略｡  ====


<p>　<a target='_blank' href='http://　……　list220g.html'><img title='世界のｹﾞｰﾑｻｰﾁｴﾝｼﾞﾝ･ﾘﾝｸ集で、ﾆｭｰｽ、ｵﾝﾗｲﾝｿﾌﾄをｹﾞｯﾄ！' src='http://　……　game_cnt.jpg' border='0'></font></a> 　ｹﾞｰﾑ・ﾊﾟｽﾞﾙのﾀﾞｳﾝﾛｰﾄﾞ - 世界のｹﾞｰﾑｻｰﾁｴﾝｼﾞﾝ･ﾘﾝｸ集で、ﾆｭｰｽ、ｵﾝﾗｲﾝｿﾌﾄをｹﾞｯﾄ！　</p>

<p>　<a target='_blank' href='　……　slideshow_16a.htm'><img title='ｽﾗｲﾄﾞｼｮｰ、ﾌｪｲﾄﾞｱｳﾄ効果で大画像を切り替える。　周期可変。画像URL任意。' src='http://　……　sea8.jpg' border='0'></font></a> 　ｽﾗｲﾄﾞｼｮｰ、ﾌｪｲﾄﾞｱｳﾄ効果で大画像切り替え。　</p>

<!--END INSERTION -->

</div>
</div>

<p style="width:250px; text-align:right"><img src="roundup.png" onMouseover="scrollv.scrollContent('up')" onMouseout="scrollv.stopScroll()" /> <img src="rounddown.png" onMouseover="scrollv.scrollContent('down')" onMouseout="scrollv.stopScroll()" /></p>



<div id="scrollable-h" class="scrollable">
<div class="belt horizontal" style="padding:8px 8px;">

<!--INSERT CONTENT HERE INSIDE BELT DIV-->

<article class="columns">

<p>　<a href='http://　……　database4.htm'><img title='ｷｬﾘｱｰ・方式・市販価格・主な性能・発売日、関連ﾘﾝｸなど。　列ｿｰﾄ・入れ替え。' src='http://　……　mobile1.gif' border='0'> 携帯電話最新情報</a>　ｷｬﾘｱｰ、方式、形名、市販価格、機能・性能、拡大写真、販売開始日、関連・詳細情報ﾊｲﾊﾟｰﾘﾝｸ。　項目昇/降順ｿｰﾄ</p>

<p><a href='http://　……　calendar13.htm'><img src='http://　……　calendari.gif' border='0'> ｶﾚﾝﾀﾞｰ13</a>　〜2013年の祝日、任意日の予定・ｺﾒﾝﾄ設定可、痕跡色（ﾃｷｽﾄﾌｧｲﾙに記述。）。</p>

====  この間､説明を省略｡  ====


<p>　<a target='_blank' href='http://　……　list220g.html'><img title='世界のｹﾞｰﾑｻｰﾁｴﾝｼﾞﾝ･ﾘﾝｸ集で、ﾆｭｰｽ、ｵﾝﾗｲﾝｿﾌﾄをｹﾞｯﾄ！' src='http://　……　game_cnt.jpg' border='0'></a> 　ｹﾞｰﾑ・ﾊﾟｽﾞﾙのﾀﾞｳﾝﾛｰﾄﾞ - 世界のｹﾞｰﾑｻｰﾁｴﾝｼﾞﾝ･ﾘﾝｸ集で、ﾆｭｰｽ、ｵﾝﾗｲﾝｿﾌﾄをｹﾞｯﾄ！　</p>

<p>　<a target='_blank' href='　……　slideshow_16a.htm'><img title='ｽﾗｲﾄﾞｼｮｰ、ﾌｪｲﾄﾞｱｳﾄ効果で大画像を切り替える。　周期可変。画像URL任意。' src='http://　……　sea8.jpg' border='0'></a> 　ｽﾗｲﾄﾞｼｮｰ、ﾌｪｲﾄﾞｱｳﾄ効果で大画像切り替え。　</p>

</article>

<!--END INSERTION -->

</div>
</div>

<p style="width:250px; text-align:right"><img src="roundleft.png" onMouseover="scrollh.scrollContent('left')" onMouseout="scrollh.stopScroll()" /> <img src="roundright.png" onMouseover="scrollh.scrollContent('right')" onMouseout="scrollh.stopScroll()" /></p>
<!--webbot bot="HTMLMarkup" endspan -->
<!--　★　-----------　↑ この間をコピー＆ペーストします。 ------------　-->

====  この間､説明を省略｡  ====

　

(*3) ：　scrollable.css （例）　　　　　　　　　ﾃｷｽﾄｴﾃﾞｨﾀｰで開き、編集しhogehoge.htmlと同ﾃﾞｨﾚｸﾄﾘｰに転送・配置します。　

　 　*.css、*.js の編集方法　  (*3)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓の太字部分を編集し使用。
　 〔この列ﾍﾟｰｽﾄ不要〕


ｽｸﾛｰﾙｺﾝﾃﾝﾂ表示幅
ｽｸﾛｰﾙｺﾝﾃﾝﾂ表示高さ
罫線

　

　

　

　

　

　

　

　

素塀ｽｸﾛｰﾙｺﾝﾃﾝﾂ全長（<p>　</p>　ﾀｸﾞ区切りｺﾝﾃﾝﾂ下余白に関係）
ｽｸﾛｰﾙｺﾝﾃﾝﾂ表示幅

 　

.scrollable{
width: 250px; /* default width of scrollable content in px or percentage */
height: 200px; /* default height of scrollable content */
border: 1px solid black;
overflow: hidden; /* keep this */
position: relative; /* keep this */
}

.scrollable .belt{ /* default style of inner scrollable DIV */
width: 100%;
position:absolute;
left: 0;
top: 0;
padding: 0 5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.scrollable .belt.horizontal{ /* default horizontal specific style of inner scrollable DIV */
width: auto; /* set to auto or an explicit px value large enough to accomodate entire horizontal content */
height: 100%;
/* white-space: nowrap; */ /* prevent wrapping inside DIV. Uncomment if embedding images or regular text content inside horizontal belt diV */
}

article.columns{ /* demo CSS to create columns of content inside horizontal scrollable */
width: 2800px; /* See http://www.javascriptkit.com/dhtmltutors/css3columns.shtml */
-moz-column-width: 220px;
-webkit-column-width: 220px;
column-width: 220px;
}

article.columns > p:first-of-type{
margin-top: 0;
}

　

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

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