2010年9月14日火曜日

JavaScriptによるCSSの切替

今週頭から当サイトの新デザインをアップロードすると先週申し上げました。
そのつもりで鋭意進めており、今も作成が進行しているところです。
が、アップロードはもう少しお待ちください。
淡々と進めて(進んで)はいますので。

とりあえず今の進捗です。
仰せつかっているWing Brainのデザインと合わせて、TOPページのHTML、CSS記述を修正しました。

前回作成したTOPページは、ロールオーバーも含めて、全てJavaScriptで記述しており、また背景画像をウィンドウサイズに合わせて任意の大きさに拡大縮小するものでした。
これを見直し、既に作成した目次ページと同様、ロールオーバーはCSSのみにより記述し、画面(またはウィンドウ)サイズによって背景画像や文字類の大きさのパターンをJavaScriptで記述することとしました。

画面(またはウィンドウ)サイズにより条件を振り分けるコードは前回書きました。
今回はこの条件による振り分け後の処理部分を加筆修正し、読み込む外部CSSファイルの指定を画面(またはウィンドウ)サイズにより動的に変えることで、上述の機能を実現することにしました。
ちなみに、そのような機能を実現するJavaScriptコードのサンプルと解説を示しているサイトを見つけましたので、こちらを参考にさせていただきます。:
http://www.dspt.net/seo/001/003.html

このように外部CSSとしてしまえば、読み込む背景・文字部分の画像ファイルの名前、およびそれら画像ファイルの断片の配置や文字類、クリック可能部分(アンカー)の配置なども、一括してその外部CSSファイルの中で指定してしまうことができます。
そうすると、HTMLファイル本体は、純粋なHTML部分(文字情報)とJavaScriptコードのみを記述すればよく(何なら、JavaScriptコードも外部ファイル化すればよく)、見やすくシンプルな構成にできます。管理や修正も楽になります。

ということで、この方法で行きたいと思います。
今晩中にJavaScriptコードの記述まで仕上げ、明日はいよいよアップロードしてみたいと思います。
…と言いたいところですが、さっきGoogleサイトで新規にサイト開設の入力操作をしてみたら、なぜかずっと待機(砂時計)状態になったまま固まってしまいました。こちらが解決次第、アップロードします。
引き続き進捗を報告してゆきます。

最後に、極めて蛇足ながら、当ブログも、この記事をもって、投稿100件目を達成しました。自己満足度120%ですが、、これからも毎日ペースで投稿はしてゆきます。

0 件のコメント:

コメントを投稿