jQuery：リンクのクリック領域をブロック全体にする方法
jQueryのプラグインで「BigTarget.js」というのがあるが、 このプラグインのように、リンクのクリックできる領域を ブロック全体にすることを、自作できないかなーと考えたてみた。 プラグインの簡易版みたいなソースになってしまったが、 シンプルに使えそうなので紹介しておきます。 サンプル 今回は例として、ブロック要素ではないですが、 リンクを含むリストを代用として使ってみます。 ■HTMLソース <ul> <li><a href="#">全体がリンク</a></li> <li><a href="#">全体がリンク</a></li> <li><a href="#">全体がリンク</a></li> </ul> <li>のすぐ内側に<a>がある場合の例です。 ■Script $('li a').each(function(){ var Href = $(this).attr('href'
http://www.inforz.net/image/231.html
For full functionality of this site it is necessary to enable JavaScript. Here are the instructions how to enable JavaScript in your web browser.
Ajax » その他のJSライブラリ » 透過PNGをIE6に対応させる方法いろいろ | PHP & JavaScript Room
ページのhead要素内でalphafilter.jsを読み込み、アルファ画像（透過PNG)のimg要素のclass属性に「alphafilter」を指定するだけで、アルファ画像を透過することができるJSライブラリです。 アルファ画像を背景画像にしている場合も透過可能です！背景画像を指定している要素のclass属性に「alphafilter」を指定すればOK。 <head> <script type="text/javascript" defer="defer" src="alphafilter.js"></script> </head> <body> <p><img src="./sample.png" class="alphafilter" alt="" /></p> <p class="alphafilter">テキスト</p> </body> 設置イメージ alp
floatで寄せてるブロック要素の高さをそろえるjsライブラリ「heightLine.js」
クルマの買い替えでホンダのストリームを購入したら、それまで両天秤で悩んでいたオデッセイがほんとにどうでもよくなったフジカワです。人間って便利に出来てるなぁ。 購入したストリームは安易に「スー」と命名。ちなみに二代目の「スー」です。初代は昔オーストラリアで買ったHOLDEN社のcommodore（乗ってたモデルはこれ）。名前の由来は当時のクラスメイトにスイス人のスーというかわいい子がいたからですいません。 35万キロ走ったのを2,000AUSドルで購入し、半年で3万キロ上乗せて1,000AUSドルで売りました。しかし今だに売却金は受け取れていません。今思い出しました（笑）。 みんなが欲しいと思っていたに違いない。 さてやっと本題。いつもくだらない前置きですいません。僕的はこれが本題みたいなところもありまして。 これはto-Rさんのエントリ ブロックレベル要素の高さを揃えるheightLine
MdN Design｜総合情報サイト
第5回「パワフルなCSS/JavaScriptテクニック45」 2010年01月25日 翻訳元サイト：Smashing Magazine http://www.smashingmagazine.com/ 原文：45 Powerful CSS/JavaScript-Techniques http://www.smashingmagazine.com/2010/01/12/45-powerful-css-javascript-techniques/ 著者：Smashing Editorial 翻訳：中野恵美子 ※本記事は「Smashing Magazine」様より許可を得て翻訳、掲載しています CSSやJavaScriptはデザイナーやディベロッパーにとって、極めてパワフルなツールだ。しかし、使いこなすためのアイデアを得るのはなかなか難しい。ただ、デザイナーやディベロッパーはほとんど毎日、新し
アルファ画像を扱うalphafilter.jsライブラリ[to-R]
アルファ画像を扱うalphafilter.jsライブラリ IE6でアルファ画像(透過png)が使えないことにより、コーディングの作業量が大幅に増します。 そこで、IE6で透過pngを扱うjsライブラリを作ってみました。 設定は簡単、head要素内に条件付きコメントを利用してalphafilter.jsで読み込むだけ。 読み込みを高速化させるためdefer属性をの記述を忘れずに行ってください。 <!--[if lte IE 6 ]><script type="text/javascript" defer="defer" src="./alphafilter.js"></script><![endif]--> 透過にしたい画像にclass属性でalphafilterと入れるだけで、なんとIE6でも透過画像の使用が可能になります。 <img src="./sample.png" class="a
![アルファ画像を扱うalphafilter.jsライブラリ[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
ブログ上にソースを記述する際、美しく表示する方法 | 楽してプロっぽいデザイン | Forty-N-FiveBlog
最近多くのweb系のブログで見られるようになった上記のようなソースを綺麗に表示してくれるフォーマット。その導入方法をご紹介します。これまで、ブログでソースを紹介しようにも＜＞を特殊文字で表したり、どこからどこまでがソースなのか分かりにくい部分もありましたが、これを導入することで、美しくユーザビリティにも配慮したソースを紹介することができます。うーんまさにプロっぽい。 導入する方法 まずgoogle codeから導入に必要なソースをダウンロードします 一般的に「dp.SyntaxHighlighter」と読ばれているようで、http://code.google.com/p/syntaxhighlighterからダウンロードできます。 ファイルの中身を確認 ダウンロードしたファイルには「css」「Scripts」「Uncompressed」フォルダが入っています。（Uncompressedフォ
アニメーションするドロップダウンメニュー作成ＪＳ「Sliding JavaScript Dropdown Menu」:phpspot開発日誌
アニメーションするドロップダウンメニュー作成ＪＳ「Sliding JavaScript Dropdown Menu」 2008年04月30日- Sliding JavaScript Dropdown Menu - Web Development Blog This lightweight drop down menu script (~1.8kb) allows you to easily add smooth transitioning dropdowns to your website. This can be used for navigation, dropdown lists, info panels, etc.アニメーションするドロップダウンメニュー作成ＪＳ「Sliding JavaScript Dropdown Menu」 デモページはこちら メニューの中身は単なるul li
画像置換を使わないロールオーバー : web dimension maker
最近、背景画像を活用する、いわゆる｢画像置換｣を止めようという流れにあります。 そこで問題になってくるのが、ロールオーバーをCSSで行うか、Javascriptで行うかということです。（背景画像の位置をずらすやり方ができなくなるからです。） 今回はこの問題においていくつかある解決策の中で、僕が個人的に｢使える｣と思うものを実践したいと思います。 参考にさせていただくのは、STOPN 'LISTEN さんと月刊web creators 5月号です。前者はJavascriptを使う方法です。後者はCSSを使う方法です。 Javascriptを使用する方法 個人的には、この方法がもっとも簡単だと思います。 step1. Image Rollover Code からrollover.jsをコピーし、HTMLに読み込ませる。 step2. imgタグにclass="imgover"を追加する。 st
階層ナビゲーション実装ライブラリ集:phpspot開発日誌
Multilevel Drop Down Navigation Menus: Examples and Tutorials Navigation menus are the most important element one should pay attention when designing a website. 階層ナビゲーション実装ライブラリ集をまとめたエントリが公開されていたので気になったものをいくつか紹介。 JavaScriptなどを活用して、マウスホバー/クリック時に開閉するおなじみのＵＩがいっぱいです。 Drop Down Tabs (5 styles) Professional Dropdown FastFind Menu- Mootools Unlimited Drop Menu Creating an Outlook Navigation Bar 全部見る デザイン
CSS擬似クラスを使うべき理由 | エンタープライズ | マイコミジャーナル
A List Apart - For People Who Make Websites HTMLとCSSは規格通りに使うとすれば縦横無尽にさまざまな記述ができる。しかし規格上サポートされているからといって、馬鹿正直にそうした機能を使うのは避けたい。シンプルな記述であとから読んでも理解しやすい、他人が読んでも理解しやすいHTMLやCSSを書けるようになることが理想だ。しかし誰しも最初は素人だ。エキスパートがまとめたドキュメントを参考にして、そうしたテクニックであり勘どころを学んでしまいたい。 フロントエンドデベロッパであるAlex Bischoff氏は5日(米国時間)、A List ApartにおいてKeeping Your Elements' Kids in Line with Offspringという名のもと、CSSやHTMLの記述方法について細かい技巧をまとめて発表した。同ドキュメント
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」を付けます。 これでその要素をウインドウの下部に表示させることが可能です。 (ウインドウの下部というのがわかりにくいと思うのですが、内容量がウィンドウサイズを超える場合は通常通り、内容量がウィンドウサイズより小さい場合はウィンドウの下部に配置という意味です
Devthought - Guillermo Rauch’s Blog » CSS+Javascript power. Fancy menu
Update: the code that empowers this menu has been upgraded to the latest MooTools version, and even improved! Now works with vertical, horizontal menus, with more flexible morphing! Let me introduce you to Fancy Menu: Home Plant a tree Travel Ride an elephant When it comes to creating the navigation part of your Website, the first thing you might think of is an unordered list that you style
404 - Page Not Found
404: Page Not Found The thing you were looking for is no longer here, or never was
Automatic colored rows - Example for BiteSize Standards
Are you a content creator looking to take your first steps in website design? You’re precisely where you need to be. HTML stands for HyperText Markup Language. Visualise HTML as the structural backbone of any website. A foundation that organises all the text, graphics, videos and overall layout. It operates behind the scenes, instructing web browsers how to render content for viewers. HTML is used
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる - DesignWalker
WEB制作者のための32個のブックマークまとめ（part2）*ホームページを作る人のネタ帳
社å´å£«è©¦é¨å¡¾ 社å´å£«è©¦é¨å¦æ ¡ 社å´å£«è©¦é¨å¯¾ç 社å´å£«è©¦é¨åå¼·æ³ ç¤¾å´å£«è©¦é¨åèæ¸ at usrb.in
gotAPI.com