タグ

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

  • footerをウィンドウ下部に固定する『footerFixed.js』

    footerをウィンドウ下部に固定する『footerFixed.js』 footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。 フッターをコンテンツの内容量にかかわらずwindow下部に表示させるためのjsライブラリです。 サンプル 設置方法は head要素なのでfooterFixed.jsを読み込みます。 <script type="text/javascript" src="./footerFixed.js"></script> ウィンドウ下部に固定したい要素にid属性「footer」を付けます。 これでその要素をウインドウの下部に表示させることが可能です。 (ウインドウの下部というのがわかりにくいと思うのですが、内容量がウィンドウサイズを超える場合は通常通り、内容量がウィンドウサイズより小さい場合はウィンドウの下部に配置という意味です

    footerをウィンドウ下部に固定する『footerFixed.js』

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

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

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

  • Re:href=

    Re:href="#" onclick の悪習 ネタ元：某日記：href="#" onclick の悪習 <a href="#" onclick="...">検索</a> なんて書き方やめようぜ！というお話 a要素のhref属性に値が入ってるとonclick属性の内容を実行後にhref属性の値を参照しようとする。 #なんかが入ってるとページの一番上部にページ内遷移をする。(※1) 某日記さんの代替案ですけどspanで代替するもの <span style="cursor: pointer" onclick="...">検索</span> 私だとこんな書き方 <a href="javascript:void(0)" onclick="...">検索</a> onclickイベントハンドラを実行しようとしてるなら、こんな書き方もある <a href="javascript:（onclickの内容

    Re:href=

  • ブロックレベル要素の高さを揃えるheightLine.js[to-R]

    ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja

    ブロックレベル要素の高さを揃えるheightLine.js[to-R]

  • CSSでロールオーバーもどき

    CSSでロールオーバーもどき ロールオーバーの際に画像の輝度を上げるやり方がありますけど、CSSで簡単にできます。 XHTMLソース <a href="http://blog.webcreativepark.net"><img src="./tor.gif" alt="to-R"/></a> CSSソース a:hover img{ opacity:0.8; filter: alpha(opacity=80); } サンプル ロールオーバー時にimg要素のopacityプロパティを使い不透明度を下げます。 IEはopacityプロパティに対応していない為、filterを使い不透明度を下げます。 簡単なんで、忙しいときに重宝します。 関連エントリー CSSで実現するスマートなロールオーバー 画像置換 cssで画像をプリロードする方法（改 一番簡単な画像置換の方法 画像置換でメニューを作る 画像

    CSSでロールオーバーもどき
  • 1

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.