こんばんはねこです。
いましがた101話分の粗筋を背景の画面上にプログラムし終わったところです。
はー！疲れた。
コピペばっかりでしたけど。
上手に見えるといいんですがねぃ・・・。

プログラミングの詳細な説明はできませんが、簡単にどんな機能を使ってこんな感じにしたのかを、
どんな頑張りをねこが頑張って頑張ったのかを、追記で発表したいと思いますので気になる人はどうぞ。

あとあと、ついに銀すぷ２始めました。
何度も言いますが総悟が出張ってくる予定です。予定の段階からかなり出張っていてます。
最近改めて気づいたのですが、ねこはやっぱり沖田さんが他のキャラクターより好きなのかもしれません。
「いまさらッ」と、心の中で突っ込みを入れてくださった方、ツッコミどうもありがとうございます。

それでは、ねこでした！

[1回]

今のところの進行状況←クリックで飛びます。

左側メニューフレームに背景をつけて、右側ページにスクロール装飾かけてみました。
スクロール装飾って今まで無視してきたけれど、超簡単に設定できるのね！
これからやっていこうっと。今までの分にかけるのは・・・・うーん・・・めんどっちぃなぁ。。

ええと、
で、この不思議現象の秘密ですね。
HTMLいじったことのある人はこのような固定ボックスを作るのがもっと簡単にできるのに、って思う人もいるかもしれませんが、ねこはかなり頑張りました。

まず、画面上に位置を固定する（スクロールしても動かない）方法として、
「position:fixed」というプログラミング方法があります。
これはスタイルシートという、ページの設定を司る部分に記入して使います。
ねこも、この方法を使って作れば簡単にできるだろうと、考えていました。
でも、何度やってもできない？なんで？なんで？なんでだああああ！
と思って調べたところ、InternetExplorerでは対応していないとのこと。

な、なんだって？！
ここでいったんどん底にたたきつけられます。
約束（?）が違うじゃないか。この方法で出来ると信じていたのに。

なので、違う方法を考えます。
つまり、「position:fixed」はつかえないということだな。うーんそれなら・・・
と、次に思いついた方法は、なんとか「fixed」を使わずに行ける方法です。
つまり、「fixed」が使えないということは、スクロールしたら終わりということです。
ならば、スクロールしなければ、何とか背景のイラストの画面の上に文字を持っていけるということです。

ということで、「position:absolute」というプログラムを使いました。
これはスクロールしたらずれますが、文字や画像を画面の好きな位置に持っていける機能です。
ただ、本来あるべき位置から"ずらす"機能のため、スクロールすればずれてしまいます。
その代わりに、「インフレーム」でページの中にスクロールできるフレームを作って、お話のタイトル部分だけスクロールできるようにしました。
これならスクロールするのはタイトル部分だけなので、その外側のあらすじ部分はスクロールしなくても行ける！というわけです。
勝った！と思いました。

しかし、問題が起こります。

これではいざ、「タイトルの上にオンカーソルしたときにテキストを変化させる」の指示を記入しようとしたとき、
別のフレーム(インフレーム)から別のフレーム（元のフレーム）に指示を出すことになります。
ええと、「インフレーム」機能はフレームといっしょで、インフレームの中に別のファイルを表示する、という機能なので、「元ページ」と「インフレームに表示するページ」の二つのファイルがあるわけですよ。
で、私があてをつけていたオンカーソルでテキスト変化のプログラムは、同一ファイル内でしか指示できないんですね。

ぐむむ、負けてたまるか、と、別フレームから別フレームに指示を出す方法をネットで探しまくります。
一個だけ出てきたんですが、javaの演算式がさっぱりぱりぱり・・・・・
その見本では画像を変化させていたのですが、
何とか読み解いてテキストに応用したかったのですが、演算式とか・・・えっ、なにそれｗ
手元のhtml&css&javascript辞典を見てもさっぱり。
いやjavaって今までコピペしかやったことなかったから・・・・。

そして一時間後。

わかんねえええよっっっ！！！

この時点で涙目です。もう俺たちに、救いの神はいないのか。
あれだ、インフレームは没だ。
何とか同一ページ内で収めねばならない。何としてもだ。チクショウ！
そこで、CSSでボックスを作れる、ということに気付きました。
というのも、「IEでpositionfixedのまねごとをする方法」的なサイトを読んでいてこれだ、と思ったのですが、
・・・よくよく考えてみればhtmlやスタイルシートに慣れてる人ならば一目で気づきそうな方法だったので、なんだか恥ずかしいですが・・・。

htmlだけではプログラムしきれない細かいページ設定を指定できるものに、CSS(スタイルシート)というものがあります。
これを使うと、画面内に「ボックス」という、範囲、というか、空間、というか、領域、というか・・とにかく箱が作れるんです。
一番最初はこれでボックスを作って、それをスクロール無反応に設定した背景の上に「position:fixed」で固定させる、という方法をとるつもりでした。
あれ、でも・・・・
インフレーム・・・みたいなものもボックスで行けるんじゃ・・・?!
ということで完成したのが今の形態です。


簡単に説明すると、このページ（右側だけ）のなかには二つのボックスが存在します。
お話のタイトルたちが書かれたボックスと、あらすじ表記エリアのボックスです。

あらすじ表記エリアボックスは、「position:absolute」を使って、下からOOピクセル、右からXXピクセルの位置に表示するように設定します。
上から～じゃなく下から～にすることで、たとえウインドウのサイズを変えたとしてもちゃんとイラストのTVの中に表示されてくれます。
背景は(gif重ねるのも試したんだけどうまくいかなかったので編集して一枚にした)background-position: right bottomで右下揃えに表示する設定を組んでおけば、右下から見たTV画面の位置はウインドウサイズを変えても変わりません。
お話のタイトルたちが書かれたボックスは高さを低めに、常に一番手前にという設定をしました。

これでインフレームを使わずにインフレームっぽいかんじにできたというわけです。
インフレームは更新履歴で使ってる機能なんですが、考えれば考えるほど、「ボックス」で同じページにするのが面倒くさいからインフレームという『わざと別ファイルを読み込む』機能があるのに、なぜそこに気付かなかったし、って思います。
でも、ここまでのながーい道のりを経て、そこに気付くことが出来たねこです。


なんだかHP講座というよりは、本当に作成日記というか苦悩の道のりの報告みたいになってしまってすみません。
ねこは今日も必死に生きてます。
今日(昨日)研究室さぼっちゃったので、来週の中間発表(本番)が不安で仕方ないねこでした。



ちらっとコメ返信。
＊すみれさん
応援ありがとうございます！書きましたよ101話分ｗ
でも、1~10まではひとまとめにしちゃったので、91話分です。キリッ。


それでは、ねこでしたー！