リファレンス

ieFixed HTC - min-width max-widthをIE6で利用する

InternetExplorer 6.xでmin-width、max-heightをCSSプロパティで指定しても適用されません。過去に紹介したCSSとJavaScriptを利用して対応する方法を、今回はさらに使いやすい方法に変更してみます。続きを読む...

Alpha Transparency PNG - VMLでアルファチャンネルを含むPNG表示

InternetExplorerでアルファチャンネルを含むPNGを表示する場合、AlphaImageLoaderを利用すれば簡単なことですが、VMLを利用した表示方法を紹介します。VMLはInternetExplorerでのみ利用できます。VMLを利用する前に、幾つか既存のドキュメントを修正しておく必要があります。続きを読む...

Scroll RSS Icon - スクロールに連動するRSSアイコンの作り方

RSSフィードを訴求することで、リピートユーザーの確保につながります。ブラウザでもRSSリンクの認識をしてくれますが、さらにコンテンツにアイコンなどを設置すると効果的です。RSSアイコンをブラウザのスクロールに連動するようにして、訴求効果を高めてみます。続きを読む...

Breadcrumb CSS - Appleに習うパンくずデザインCSS

Apple.comのようにパンくずも少し手を加えるだけで、使いやすいものになります、Appleのパンくずの区切りには半透明の透過PNGが使われている為、InternetExplorerへの対応はAlphaImageLoaderをCSSで指定しています。続きを読む...

Array.remove - JavaScriptで指定した値を配列から削除処理

JavaScriptには配列中の特定の値を削除する処理が用意されていない。Array.shiftを利用した場合、先頭要素しか削除できないので何かと不便。JavaScriptからstyle.classNameなどを操作する場合を想定して、特定の値を配列中から削除できるArray.remove処理を実装してみる。続きを読む...

Array.merge - JavaScriptで2つの配列をマージ処理

JavaScriptには配列のマージ処理が用意されていない。Array.concatを利用した場合、指定した２つの配列に同じ値が存在してもそのまま連結される。JavaScriptからstyle.classNameなどを操作する場合を想定して、Array.merge処理を実装してみる。続きを読む...

scrollTop scrollLeft - ブラウザのスクロール状態を取得する

JavaScriptでscrollTop scrollLeftでスクロール量を取得する際に、コンテンツの<!DOCTYPEの記述状態によって、スクロール量を取得する呼び出し方法が若干異なってくる。汎用性のあるコードで処理用のFunctionを作成しておけば、必要な場面で簡単に利用できる。

DOCTYPE あり - document.body.scrollTop
DOCTYPE なし - document.documentElement.scrollTop続きを読む...

CSSとJavaScriptでmin-width max-width を実装する

CSSでmin-width max-width をそれぞれ行うことで、コンテナの最小幅・最大幅の指定ができる。リキッドレイアウトを採用していても、これらの指定を行うことでデザインが崩れない幅の有効範囲を持たせることができる。

しかし、min-width　min-width　のプロパティに対応していないInternet Explorer 6.xなどへは別途JavaScriptで対応する必要がある。
実際の記述例は以下のようになる。

スタイルシートの記述続きを読む...