JavaScriptについて

現在、ホームページビルダー14を使って、ホームページを作成しているのですが、そのうちの一つのページにJavaScriptを使いたいと考えています。

JavaScriptを使いたい箇所は、縦書きに書いた長い文章をインラインフレーム内表示し、かつ、そのインラインフレームのスクロールを横方向（水平）にスクロールさせるページです。
このページで最も使いたいのは『ホイールを使った時に、横方向（水平）するスクロール』です。

ここへ質問させて頂く前に、自分の方で調べてみたんですが、既に存在しないページというエラーメッセージが表示され、詳しく調べることが出来ませんでした。
あったとしても、縦書き用のスクリプトをダウンロードし、一旦表示させたいページとスクリプトのファイルと一緒にアップロードすると、縦書きはおろか上下スクロールすら出来ない状態でした。

どこが間違っているのかまるで見当がつかず、お手上げの現状です。

おそらく、インラインフレームのあるページに縦書きで書いた長い文章を表示させた状態のものをアップロードしなかったせいなのか、スクリプト自体が間違っているのではないかと……

そこで、お聞きしたいことは……
１：ホームページビルダーでは、スクリプトの動作確認が出来ればいいのですが、これは無理ですか？
２：まず初めに、JavaScriptを使う為の環境を整えた方がいいのでしょうか？
　　→整えるには、どのような事をすればいいのでしょうか。
３：むしろ、ダウンロードしたファイルは使わずに、自分で作った方が勉強になりますか？
４：分かりやすいJavaScript入門のオススメサイトがあれば、是非教えてください。

これまで購入したJava関連の書籍は、扱える前提での書き方だったので、正直心が折れてます。
そして、これを機にJavaのプログラミングを勉強し始めました。（これもまたちんぷんかんぷん……）

ややこしい説明で申し訳ありませんが、アドバイスを頂きたいです。

No.1 ベストアンサー 回答者： Ogre7077 回答日時： 2015/03/02 19:33

1.

どうも実際にブラウザに表示させるしか方法がないようです
http://mamesibaj.web.fc2.com/hp/HP_HPB19_315000. …
2.
スクリプトはブラウザのみで完結するので、特に環境というものはありません。
あるとすれば、プログラマー向けのテキストエディタを用意する程度でしょうか
http://sourceforge.jp/projects/notepad-plus/
3.
無論自分で作るのが一番ですが、この手はブラウザ互換性とか日本語処理とかUXとか、かなり高度な情報処理の知識が必要となるので並大抵ではありません、
先達のライブラリを利用するのが現実的でしょう
http://qiita.com/HieroglypH/items/37e384905bec03 …
4.
少々難しいですが、JavaScript を作った会社の入門ガイドなので、とっても正確です。
https://developer.mozilla.org/ja/docs/Web/JavaSc …

おまけ
ごく最近のPC用ブラウザ限定で、縦書き文書をホイールで横スクロールさせる簡単なサンプル

HEAD 内に以下のスクリプト等を挿入
<style>
article.tate {
writing-mode:vertical-rl; -o-writing-mode:vertical-rl; -moz-writing-mode:vertical-rl; -webkit-writing-mode:vertical-rl;
display:block; width:100%; height:50%;
overflow:auto;
}
</style>
<script>(function(){
function A(a,i){return Array.prototype.slice.call(a,i?i:0)}
function S(sel){return A(document.querySelectorAll(sel))}
window.addEventListener('DOMContentLoaded', function(ev){
S('article.tate').forEach(function(s){s.addEventListener('wheel', function(ev){
ev.preventDefault();
var elem = ev.currentTarget, amount = ev.deltaY, mode = ev.deltaMode;
elem.scrollLeft -= (mode == 0? amount: 64*amount);
}, false)});
}, false);
})()</script>

BODY 内に縦書きするながーい文章を挿入
<article class="tate">
<p>祇園精舎の鐘の声、諸行無常の響きあり...
<p>遠くの異朝をとぶらえば...
<p>近く本朝をうかがふに... (以下延々と)
</article>

この回答へのお礼

紹介してくださったリンクは、どれも参考になりました。
そして、サンプルもありがとうございます。

３で答えてくださった『ブラウザ互換性』ですが、実際いろいろ自分で試してみましたが、何がなんだかわからなくなってしまい心が折れてしまいました。先達のライブラリを利用して、自分のイメージに近い形にした方が無難なのだと実感しました。

Javaを始めてまだ日は浅いですが、やっていてとても楽しいです。

お礼日時：2015/03/03 20:42