ブックマーク / blog.webcreativepark.net (5)

  • IEでposition:fixedを再現するFixed positioning

    IEでposition:fixedを再現するFixed positioning Fixed positioningはIEで固定配置つまり、position:fixedが利用可能になるjsライブラリです。 IEの6以下のバージョンにはposition:fixedが正常に動作しないというバグがありますが、それを解決するのがこのFixed positioningです。 設置方法 head要素内などで、ダウンロードしたfixed.jsを読み込みます。 <script type="text/javascript" src="fixed.js"></script> これだけでposition:fixedが正常に動作するようになります。 サンプル 関連エントリー テーブルをソートできるようにするjsライブラリ-table sorting 画像に鏡面効果を与えるreflection.js 半角カナを全角カ

    IEでposition:fixedを再現するFixed positioning
    ryoota
    ryoota 2008/05/09
    IE
  • 画像置換に関する考え方

    画像置換に関する考え方 WEB標準からみるに最近では、画像置換に関して、『alt属性が必要な画像はimg要素で記述』『alt属性必要でない画像は画像置換を使う』という考えが主流になりつつあるようです。 どういうことかというと、『text-indent:-9999px』の記述は避けるべきだろうとの考えからだと思います。 なぜ、このような考え方にいたったのでしょうか? 画像置換の利点・欠点など複数の視点から画像置換について考察していきたいと思います。 なぜ画像置換という技術が普及したのか? 画像置換が重宝されているのは JavaScriptを使わずにロールオーバーを実装することが可能な為であります。 これによりJavaScriptがOFFの環境でもロールオーバーを体感することが可能になりました。 画像置換の欠点は? CSSでテキストを非表示にして背景画像を表示している為、CSSがONで画像の表

    画像置換に関する考え方
  • CSSで実現するスマートなロールオーバー

    CSSで実現するスマートなロールオーバー 暇があればコーディングコンテストの作品を眺めているのですが、ほんと勉強になります。 長谷川賞を受信したComplexさんが行っていたロールーオーバーの手法が、JavasScriptも画像置換も使わずにと素敵だったので紹介します。 サンプルはボクの方でアレンジしていますので、オリジナルも合わせて参考にお願いします。 まずサンプルのXHTMLソース <ul> <li class="ajaBtn"><a href="/ajax/"><img src="ajax_a.gif" alt="ajax" /></a></li> <li class="amaBtn"><a href="/amazon/"><img src="amazon_a.gif" alt="amazon" /></a></li> <li class="cssBtn"><a href="/css

    CSSで実現するスマートなロールオーバー
  • WEB製作者の為のSEOチートシート[to-R]SEOmozで配布されているSEOチートシートが素敵ですので日本語にしてみました

    WEB製作者の為のSEOチートシート SEOmozで配布されているSEOチートシートが素敵ですので日語にしてみました。 重要なHTML要素 title要素にキーワードを含みましょう。 h1,h2,h3要素にキーワードを含みましょう。 b要素、strong要素でキーワードを包みましょう。 img要素のalt属性、ファイル名にキーワードを含みましょう。 a要素のtitle属性、アンカーテキストにはキーワードを含ませましょう。 a要素のnofollowを上手に使いましょう。 インデクシングに関する限界 ページのファイルサイズは150KB以下にしましょう。 ページ内のリンクは100個以内にしましょう。 title要素は70文字(半角)以内にしましょう。 meta要素のdescriptionは155文字(半角)以内にしましょう。 URLの含まれるパラメーターは2個以内にしましょう。 ディレクトリの

    WEB製作者の為のSEOチートシート[to-R]SEOmozで配布されているSEOチートシートが素敵ですので日本語にしてみました
  • ユーザーがページのどこをクリックしたか解析するツール[to-R]

    ユーザーがページのどこをクリックしたか解析するツール ユーザーがどのようにサイトを巡回しているかはアクセス解析なのでわかりますが、ページのどこをクリックしたかも知りたくないでしょうか? 今回は、ページのどこがクリックされたかを解析するツールを紹介します。 Crazy EggはwebページにJavaScriptのコードを一行追加するだけでwebページのどこがクリックされているかを解析できるおもしろいツールです。 ちなみにto-Rを解析した所、このような結果になりました。 最初のエントリーの『続きを読む』にクリックが集中してますね。 CSSのカテゴリーページも結構人気っぽいです。 お約束として『パーマリンク』を用意しているのですが全くクリックされていませんので必要なさそうですね。 などアクセス解析やデザインを見ているだけではなかなか見えないwebサイトの性質が見えてきます。 セットアップ まず

    ユーザーがページのどこをクリックしたか解析するツール[to-R]
  • 1