スクロールしたらサイドバー固定するコピペ用スクリプト【jQuery利用】
2015/03/12 (更新日: 2016/08/14) スクロールしたらサイドバー固定するコピペ用スクリプト【jQuery利用】 JavaScript PROGRAMMING 今どきのフロントエンドエンジニアはサイドバーを固定したいと思います。ブログとかでもよく使われている手法ですよね。 デモ：» スクロールでサイドバー固定するデモ それでググっていたら以下のスクリプトにたどり着きました。 » ライブドアみたいにスクロールしたらサイドバーの広告を固定する – ぼくはまちちゃん！(Hatena) たしかに動くのですが「コード長すぎじゃないか！」と思ったので、もっとスッキリしたコードを配布します。jQueryを利用するので、しっかり読み込んでおいてください。 サイドバー固定のJavaScriptテンプレート // PC用のサイドバー固定 (function(){ $(function(){
【配色 - デザイン ★★★★★】 - Color Scheme Designer 3
Paletton, the color scheme designer In love with colors, since 2002. Paletton application Colorpedia About Paletton About Paletton Paletton.com is a designer color tool designed for creating color combinations that work together well. It uses classical color theory with ancient artistic RYB color wheel to design color palettes of one to four hues, each of five different shades. Various preview sty
Dynamic Drive DHTML Scripts- Featured Image Zoomer
FF2+ IE6+ Opr9+ Featured Image Zoomer (now w/Multi-Zoom) v2.1 Description: This script lets you view a magnified portion of any image upon moving your mouse over it. A magnifying area appears alongside the image displaying the magnified image on demand. The user can toggle the zoom level by using the mousewheel. It's great to use on product images, photos, or other images with lots of details you
ユーザビリティ活用例？悪用例？～ とても広告には見えないAdsenseのデザイン集 - Feel Like A Fallinstar
「これがAdsense？」と思ってしまうほどウェブサイトに馴染んでしまっている広告ユニットを紹介します。 単純に、背景に馴染ませるものから、見出しをつけたものまで色んなデザイン上の工夫が満載です。 それでは、まずはいきなり本命です。 日経BPオンライン http://www.nikkeibp.co.jp/style/biz/topics/c-gov/080415_6th/ 図はマウスオーバーしたときのものです。 Adsenseは、一定以上のPVになるとカスタマイズの自由が利くようになるのですが、それを最大限に利用しています。 マウスオーバーで領域全体が反転するのに加え、領域全体がリンクになっているのも実にせこい巧み。 ちなみに、同じページにある直売の広告ユニットはもっと強烈。 ここまでやってしまっていいのか？と思うほど、もはや広告かどうか全く分かりません・・・・ はてなダイアリー（キーワー
HTML5を使ってWordPressをiPadに最適化するプラグインOnswipeを試した→結果：なかなか(・∀・)ｲｲ!!
iPadでアクセスしたときに、WordPress をiPad向けに最適化してくれるプラグイン Onswipeを試してみましたが、思いの外 良かったのでご紹介。ページ推移もフリ ックで出来る雑誌風レイアウトに自動で 変換してくれますよ。 OnswipeはHTML5を使って、WordPressを自動で雑誌風のレイアウトにしてくれるプラグインです。WordPress.comでも既に導入されており、プラグインとしても配布されています。 人気のFlipboardライクなインターフェースにしてくれると聞いて試してみましたが、なかなか良かったので備忘録がてらご紹介します。 使い方はすごく簡単で、基本的には有効化してフォントや色を選ぶだけです。試しにWPデザインギャラリーでテスト。 Before 可変式のグリッドレイアウトなので何もしなくても一応はちゃんと表示されていました。 After ご覧のようにマガ
Dribbble - Show and tell for designers
Get inspired by the work of millions of top-rated designers & agencies around the world.
Under Construction
Please be wary if some broker is offering this domain for sale.
Ajaxload - Ajax loading gif generator
Indicator type : Background color : # Transparent background Foreground color : # Create easily your own ajax loader icon : Select the type of indicator you want Enter the background code color you want (tick "Transparent background" if you don't want one Enter the foreground code color you want Press "Generate it"
RIKCAT - The Art of Rik Catlow
Rik Catlow, aka rikcat an Artist, Designer, and Illustrator living in Austin, TX Notable illustration clients include, Element Brands, Burton Snowboards, Scholastic Books, 20th Century Fox, and the Grammy award winning band The Mavericks. Sign up for my Mailing List to receive infrequent update about new paintings and products. Rik Catlow. All rights reserved.
CSSグラデーションのちょっとしたテクニック #2
前回のエントリのような応用するための基本というものではなく、CSSグラデーションはこういう使い方もできるよ的なもので３つ。普通のグラデーションの作り方はcss gradients in Firefox 3.6とかで。#3はない。 以下プレビュー画像のリンク先がデモ・ページになっているのでそちらも参照のこと。もちろん対応ブラウザのFirefox 3.6とSafari 4やChrome 4以降でないと動作デモは確認できない。 Vista風のテカってるボタン ありがちだけど作れたらなかなか便利そうなので挑戦してみたら、意外に簡単だった。実はdoubleなborderが重要で、これが無いとちょっと間抜けな感じになる。コード的には難しいことはなく、上半分にrgb(138, 138, 138)からrgb(102, 102, 102)、下半分にrgb(36, 36, 36)からrgb(0, 0, 0)と
CSSとHTMLをリアルタイムに書き換えてプレビューできる「rendr」 - GIGAZINE
「CSS」タブをクリックして、中のコードを書き換えると、リロードせずにそのままリアルタイムにページ全体を再レンダリングしてくれます。「Markup」タブをクリックすればHTMLコード自体を書き換え可能。元に戻すには「clear markup and css」をクリック。 Firefoxの拡張である「greaseMonkey」バージョンもあるので、自分のサイトで同じようなことができるようになり、CSSデザインの試行錯誤が楽になります。 詳細は以下から。 rendr http://gregtaff.com/rendar2.html greaseMonkey版はキャッシュが有効な場合に、ローカルキャッシュのHTMLファイルを直接書き換えてリアルタイムプレビューするというモノになっています。 インストールするにはgreaseMonkeyをインストールした状態で上記ページの「greaseMonkey
整然とライン上で表示されるCSSフレームワーク·Baseline MOONGIFT
大学ノートには横線が引かれている。これを使って文字を書けば、斜めになったり一部だけ文字の大きさが変わって読みづらくなったりしない。整然と並んで書かれていれば後で読み返す時にもきっと分かりやすいはずだ。ある一定の基準に沿っていると安心感があり、情報を受け入れやすくなるのだ。 グリッド コンテンツを重視したWebサイトではそのような読みやすさの観点も考える必要がある。そのためのフレームワークがBaselineだ。 今回紹介するオープンソース・ソフトウェアはBaseline、グリッドに沿ったCSSフレームワークだ。 Baselineはまるで大学ノート、と思わせるような横線が引かれた背景画像にぴったりと合わせて文字が書かれている。カラムも1〜4カラムで調整でき、幅も3カラム分使ったり、2カラムずつで等分することもできる。統一された、均質的なデザインが組めるのが特徴だ。 フォーム テキストの表示の他
FreeCSSTemplates.org is now FCT.co
FreeCSSTemplates.org has been rebranded to FCT. Therefore, our new domain will be FCT.co while our previous domain FreeCSSTemplates.org will always be kept redirected here. What happened to FreeCSSTemplates.org? As the domain FreeCSSTemplates.org was dedicated to just “Free CSS Templates“, we decided to expand our brand name by keeping the domain name short but with more topics to cover. That mean
Crystal Clear - Wikimedia Commons
Original Icons from the Crystal Clear[dead link] icon set (archived page as of 10 October 2012 at Internet Archive) by Everaldo Coelho. This set is a previous version of the Crystal Project icon set. The icons are licensed under the GNU Lesser General Public License (LGPL). These icons can be downloaded in a single package at Open Icon Library. You can also view these icons sorted by type. All ima
Helio | Collect UX metrics to measure design impact and user research
Market Research Get in front of business decisions with surveys that fulfill in minutes.
ImageChef イメージクリエーター
新規メンバー登録は こちらから このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PNG Icons & Icon Packs Download | IconsPedia
http://blog.3ot.net/
wigflip - toys and tools for the web
Free Icons Web - Free Icons,Free Icons Download,Free window icons,Free xp icons,Free computer icon