WEBデザインに役立つカンタンJavascript

2008年6月23日 00:33
個別ページ |
コメント |
トラックバック

HTML×CSSは、電車の中で毎日読んでいたら、だいぶ習得することができたのに、プログラミングはなかなかどうして、頭の中に入ってこないのね。

っつうことで、HTMLはある程度わかる人にちょっと便利なJavascriptライブラリをメモる。

heightLine.js
minmax.js
alphafilter.js
smartRollover.js

の４つ。
サイト制作時に「クソー！」、IE6のバカ！って時にも役立ちます。

heightLine.js

CSSレイアウトをしたとき。
メインカラムとサイドカラムの高さを揃えたいんだけど、基本的には、ボックス内のテキスト分までしか伸びてくれません。

背景が単一の場合には全く問題ないですが、
色が付いているときなんかは、サイドカラム片方だけ途中で切れちゃったりして、「クソー！なんでやねんっ！」って思うこと、多々あります。

そんなときに「heightLine.js」の登場です。

高さを揃えたいブロック要素にheightLineのクラス要素をかけてあげるだけで、あら不思議！切れていた背景が同じ高さまで伸びちゃいます。

ブラウザで読み込むときに、無理くり伸ばしてるんだな...って感じたりはしますが、デザイン上支障のあった部分は簡単に解決してくれました。素晴らしいですね、コレ。

設定方法は、head内にてJSファイルを読み込んで、

<script type="text/javascript" src="heightLine.js"></script>

指定したいブロック要素にクラス指定をするだけです。

<div id="content" class="heightLine">
メインカラム
</div>

<div id="navigation" class="heightLine">
サイドカラム
</div>

詳しい解説、ファイルのダウンロードは以下よりどうぞ。
ブロックレベル要素の高さを揃えるheightLine.js[to-R]

minmax.js

高さついでにもうひとつ。
背景って単一カラーの場合だったら、単純にリピートすればいいけれど、画像を背景にしたいときって、「ここまでは最低表示してほしいのに...」ってこと、あります。でも、背景のために該当の要素の高さを指定してしまうのは、今後仮にテキストが増えたり、さらに画像なんかを表示したいなんてことになったら、ちょっと困ります。自由にレイアウトが効かないし、高さ指定自体を固定のデザイン以外ではあまり使いたくない。

そんなときに「minmax.js」の登場です。
CSSには、最低これだけはほしい「幅」と「高さ」を指定できる
min-width、min-height
max-width、max-height
っていうスタイルがあらかじめ用意されているのですが、
コレ、IE6（以前？)だと効かないものらしいです。

「なんでやねんっ！」って感じですが、
これも最低高さ(幅)や最高高さ(幅)を指定したいdiv要素にminmaxクラスを指定してあげるだけ。ソースコードを書くとしたら以下のような感じ。

これで、画像背景もキレイに出るし、万が一テキストが増えても、それはそれで高さが自動的に伸びてくれるので問題なしです。
これも便利ですね。

設定方法は、head内にてJSファイルを読み込んで、

<script type="text/javascript" src="minmax.js"></script>

minmaxに対して、高さ(幅)を指定してあげて、

.minmax
             {
             min-width: 600px;
             min-height: 700px;
             }

指定したいブロック要素にクラス指定をするだけです。

<div class="minmax">
このブロック要素の高さを決めちゃいたい！
</div>

詳しい解説、ファイルのダウンロードは以下よりどうぞ(英語です)。
※JSファイルは、ページ下部の「module」からダウンロード、「test page」はサンプルです。 doxdesk.com: software: minmax.js

alphafilter.js

続きまして、デザインに役立つalphafilter.js。
IE6は透過PNGファイルはサポートしておりません。よって背景の上に透過ファイルを指定するときは、透過GIFなんかで代用します。でも、透過GIFってギザギザになって、汚くてちょっと格好悪い。

そんなときに「alphafilter.js」。
透過させたい画像を透過PNGで代用します。ただ、このままだと透過せず、背景が水色っぽくなって、とてもじゃないけど使えない。これも前者同様に透過PNGにalphafilterのクラス要素を指定してあげるだけ。そうするとあら不思議！キレイに透過してくれちゃいました。 heightLine.js同様にブラウザで読み込むときに、頑張って透過に対応してくれる様は見えますが、大丈夫！なんて素敵なライブラリでしょう。

設定方法は、head内にてJSファイルを読み込んで、

<script type="text/javascript" src="alphafilter.js"></script>

指定したい画像にクラス指定をするだけです。

<img src="img/sample.png" alt="アルファフィルタ" class="alphafilter" />

詳しい解説、ファイルのダウンロードは以下よりどうぞ。
アルファ画像を扱うalphafilter.jsライブラリ[to-R]

smartRollover.js

最後に紹介するのはsmartRollover.js。
これは紹介されていたとき、感動しました！管理人は、HTMLを書くときは全部左寄せ＆手打ちで書くのですが、 Dreamweaverなんかで作ると階層を作ってくれるのはいいのですが、改行とかが(個人的には)汚くでちゃうと感じちゃうんで、あまり使わないんです。

でも、ロールオーバーとかを使うときは、もちろんJavascriptはかけないので、 Dreamweaverを使います。でも、ソースがいっぱい増えて嫌でした。しかも、ロールオーバーを指定する画像にいろいろJSコードも付随して、「SEO的にもソースが増えすぎてどうなんじゃろ！？」って思っておりました。

前置きが長くなりましたが、
これを「_on」「_off」だけで代用できるのがSmartrollover.jsです。

ロールオーバーさせたい画像に「_on」「_off」を付け加えてあげるだけ。

そしたら、勝手にロールオーバーしてくれました！これだとソースも増えないし、簡単だし、便利でございます。

設定方法は、head内にてJSファイルを読み込んで、

<script src="smartRollover.js" type="text/javascript"></script>

ロールオーバーさせたい画像を2種類用意します。。

通常時　sample_off.gif
ロールオーバー時　sample_on.gif

あとは画像をリンクさせるだけ。

<img src="img/sample_off.gif" alt="スマートロールオーバー" />

詳しい解説、ファイルのダウンロードは以下よりどうぞ。ロールオーバー｜CSS HappyLife

以上、僕でも出来るJavascriptライブラリのピックアップです。

ご覧のようにJavascriptは書けない、読めない、わからない、なので、「あのブラウザには対応していない」とか「あまりこの使い方は良くない」などあるのかもしれませんが、個人のホームページなんかで使うのなら、デザインの幅も広がりますし、難しいCSSハックとか使うよりも楽チンだなぁって思います。

トラックバック(0)

このブログ記事に対するトラックバックURL:
http://km33.net/mt/mt-tb.cgi/184

コメントする

お気軽にコメントをどうぞ！

～SEMからWEBマーケティング、果てはプログラムまでを極めたい～