ウェブページのサイドバーに生じる空きスペースの活用方法
ページのデザイン時に悩むのが、2カラムレイアウトなどでサイドバーにどのくらいのコンテンツを配置するのか、というのがあります。 理想的なのは、メインとなるコンテンツと同じくらいの高さになるのが無駄もなくいいかもしれません。しかし、メインのコンテンツ量が決まったものではなく、しかも長い場合はサイドバーに未使用のスペースが多く生じてしまいます。 [ad#ad-2] この無駄になってしまう空きスペースの解決方法の一つとして、スペースの量に合わせてダイナミックにサイドバーのコンテンツを配置する方法を紹介します。
jQueryで魅せる動きのテクニック「10 jQuery Transition Effects: Moving Elements with Style」
TOP > WebService > jQueryで魅せる動きのテクニック「10 jQuery Transition Effects: Moving Elements with Style」 先日「最新の使えるjQueryプラグイン集「25 Amazing and Fresh jQuery Plugins」」と言う記事で、最新の機能のjQueryプラグインをまとめたエントリーを紹介致しましたが、今日紹介するのはjQueryで動きが特徴的な魅せる動きを集めたエントリー「10 jQuery Transition Effects: Moving Elements with Style | DevSnippets」を紹介したいと思います。 Fluid Navigation – How to create an informative menu-bar with jQuery & CSS ス
フォームで使えるjQuery25 – creamu
フォーム周りでjQueryを使いたい。 そんなときにおすすめなのが、『25 jQuery Tutorials for Creating and Working with Forms』。フォームで使えるjQuery集です。 かっこいいものが揃っていますね。いくつかご紹介します。 Creating a Slide-in jQuery Contact Form クリックするとスライドインして現れるコンタクトフォーム Build an Incredible Login Form with jQuery クリックすると、ぐいんと勢いよく現れるフォーム Using Form Labels as Text Field Values ラベルタグの内容をテキストフィールドの値にして透かしテキストにしたフォーム Create a Progress Bar with JavaScript フォームの進捗状況をプ
HTML5 のセクションアウトラインを生成してみよう！ - IT戦記
昨日 HTML5 のセクションアウトラインを取得する JavaScript - IT戦記 という記事で、以下の JavaScript ファイルを公開しました Outliner.js で 公開したのはいいのですが、 @amachang 使い方がわからんです…。見てるページで試せるように、Bookmarkletになっていると嬉しいです。 http://twitter.com/os0x/status/3972339847 …肝心の使い方を書くのを忘れていました＞＜ ＞＜ というわけで簡単に使い方を解説したいと思うます。 手順は 2 ステップ 1. まず outliner.js を読み込む <!DOCTYPE html> <html> <head> <title>hoge<title> <script type="text/javascript" src="http://amachang.saku
超クールなJavaScriptプラグイン40 – creamu
nettuts+で、超クールなJavaScriptプラグインがまとまっています。 いくつかご紹介しますね。 » JQuery Validate jQueryによるクライアントサイドのバリデート » PrettyCheckboxes – jQuery FancyFormと似たかわいいチェックボックスを作るjQueryライブラリ » Thickbox 画像だけでなくテキスト等も読み込めるlightbox » FancyBox 超クールなFancybox。画像をすーっと拡大してくれる。デザインがMacライク » Slideshow 2! for MooTools とてもクールなMooToolsによるスライドショー » SmoothGallery こちらも超クールなスライドショー。MooTools v1.11を使用 » DynamicDrive – Carousel Slideshow 3Dに魅せ
デザインの邪魔をしないシンプルで小粋なjQueryエフェクト集「21 Simple and Useful jQuery Tutorials」
TOP > WebDesign > デザインの邪魔をしないシンプルで小粋なjQueryエフェクト集「21 Simple and Useful jQuery Tutorials」 非常に高機能で軽量なjavascriptライブラリとして様々な機能を提供してくれるjQuery。様々なシーンで利用されていますが、今回紹介するのはデザインの邪魔をしないシンプルで小粋なjQueryエフェクト集「21 Simple and Useful jQuery Tutorials You Might Have Missed」です。 Vertical Scroll Menu ｜ Demo ナビゲーションメニューからギャラリーなどジャンル別に全部で21個のエフェクトが紹介されていますが、今回は其の中からいくつかピックアップして紹介したいと思います。 詳しくは以下 ■Four Corners Sliding
jQueryでチェックボックスをすごい形にカッコよくしちゃう方法:phpspot開発日誌
jQueryでチェックボックスをすごい形にカッコよくしちゃう方法が紹介されていました。 具体的なデザインは以下。もうチェックボックスの原型がないという、面白くて分かりやすいＵＩに調整されています。 マークアップ上も、次のように綺麗になっています。 実際のタグは、不可視にしちゃって、jqueryによって、on/off を切り替えればいいわけですから、まさに何でもありで、参考にして他にも面白く、使いやすいデザインはいくらでも作れるかもしれません。 jQueryによるクロスブラウザ対応が出来るので、昔のように神経質になる必要もないですね。 詳細は以下のエントリから参照。 Pretty checkboxes with jQuery | Aaron Weyenberg
フッターとかの区切り『｜』のサンプル1種
ふと、昔のサンプルを見て、今そんな組み方しないよ。とか思ってしまったので、最近もっぱらコレっていうのを書き書き。 コレに限らず、昔のエントリーを見てると、自分で無いな～使えねー！って突っ込みたくなるエントリーが多いっす・・・うぅ。 念じたら全部最近の書き方になおらないかな。 ・・・ 残念ながらなおらないと思うので、昔のエントリーを見る場合は、ちょっと気を付けたって下さい。 何気に大掛かりな計画は有るけれど、計画がでか過ぎて中々どうにもこうにも。 というかブログ書いてる暇有るなら、「お前アレやれよアレ。」ってお怒りの声が聞こえてきそうなので、アレに専念する為にまた大人しくしてるっぽいです。 最近フッターで区切りが有る場合は、:first-child疑似クラスを使って対応するケースが殆どです。 実際のサンプルも用意しました。 サンプルサイトを見る XHTMLはこんな感じ。 <div id="f
タブで切り替わるインターフェースの決定版 – creamu
In The WoodsのCoda Slider and More With jQuery Toolsという記事で、jQuery Toolsで実装したCodaのスライダーのようなインターフェースが紹介されています。 デモは以下から。 » View the Example 超クールなので、タブメニューのインターフェースとしてかなり参考になるかと。 シンプルにフェードイン&アウト、ツールチップつき、Codaのように左右にスライドといったパターンがあります。 ぜひ見てみてください。 » Coda Slider and More With jQuery Tools iPhoneのイヤホンが壊れたのでApple Storeで交換の予約をしてきたぞ。早く新しいのほしいなーーー。
セクシーなドロップダウンメニュー実装サンプル:phpspot開発日誌
Sexy Drop Down Menu w/ jQuery & CSS | Noupe セクシーなドロップダウンメニュー実装サンプル。 次のような、セクシーかどうかはさておき、クールなメニューのサンプルが公開されています。 CSSで綺麗にレイアウトして、jQueryで実装したものです。 マウスオーバーで光る高級感がナイス 矢印↓ボタンを押した時にちゃんと凹むのもいい感じ。 タグ構造も結構綺麗に定義できてレガシーなブラウザ（ＩＥ６）にも対応しているっぽいのでなかなかオススメです。 関連エントリ チュートリアルでここまでやる？というプロレベルのWEBレイアウト作成チュートリアル jQueryクライアントとPHPサーバ間をJSONで結ぶチュートリアル
デザインに彩りを与えるCSS・jQueryソリューション21 – creamu
SmashingAppsで、デザインに彩りを与えるCSS・jQueryソリューションが紹介されています。 ざっといくつかご紹介。 » Fancy Thumbnail Hover Effect w/ jQuery 画像にマウスオーバーするとスムーズに拡大してくれるjQuery » Create a jQuery Graph Plugin 棒グラフを生成できる » Animated Menus Using jQuery マウスオーバーすると、ふわーっとアニメーションするメニュー » Improve form usability with auto messages フォームにフォーカスすると、メッセージがフェードイン&アウトする » Control.Tabs サムネイルにマウスオーバーすると、ささっと画像を切り替えてくれる すごくいい感じのが揃っていますね。 その他のリストは以下からどうぞ。
デザイナー・コーダー必見！使えるform関連jQueryプラグインの数々 | バシャログ。
こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに！かつ操作性を向上！できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック（バリデーション）が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日本語用は別途作成し、使用することが可能です。 jQuery
[JS]複数のレイヤーをずらして動かし立体感を与えるスクリプト -mParallax
ユーザーのマウス操作にあわせて、複数のレイヤーをずらして動かし、パララックス（視差）効果を与えるスクリプト「mParallax」を紹介します。
MJL ― MITSUE-LINKS JavaScript Library | 制作／開発 | ミツエーリンクス
概要 MJL (MITSUE-LINKS JavaScript Library)は、ミツエーリンクスで標準利用されるJavaScriptライブラリです。 MJLは弊社内における業務効率を改善するために、統一された設計思想、利便性の向上を念頭においた上で設計・開発されました。 MJLは他のJavaScriptライブラリ群とは異なる設計思想により、独特の特徴を持ちながらも他のライブラリと補完しあえるものを目指しました。 MJLはコピーレフトライセンスであるGNU GPLに基づく自由ソフトウェア（フリーソフトウェア）です。弊社は GNU GPLに則り、本ページにてMJLの全ソースコードを公開します。 ライセンス MJLはGNU GPL Version 3（参考邦訳）のもとに提供されます。 詳細はMJL本体ファイル内のライセンス告知をご覧ください。 ダウンロード MJL本体（圧縮版） mjl.js
IE6にPNG画像のアルファチャンネルを効かせる方法のまとめ | Blog hamashun.com
最近はアルファチャンネルを含むPNG画像を利用したサイトが増えてきたように感じます。 2008年9月号のWeb Designing誌でも特集が組まれたりと、関心も高まっているようです。 ただ、そこで問題となるのはIE6のアルファチャンネル問題。 何らかの手段でこれを解決する必要があります。 少し前の仕事でこの問題を解決する必要があり、いくつかのライブラリを試してみたので、それをまとめてみます。 なお、img要素ではなく、CSSの背景画像で使用する場合として検証しました。 img要素にだけ適用したい場合には、もっとシンプルな方法があるかもしれません。 概ね共通する事 標準準拠のCSSのみでは不可能 IEの独自拡張の、filterプロパティを使う必要があります。 CSS内に記述する方法やhtcファイルを使う方法、JavaScriptを使う方法でも、結果的にはこのfilterプロパティのAlph
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Site Under Maintenance
小林聡美.jp
マウスオーバーをデザインする | DesignWalker
IDEA * IDEA
http://www.designwalker.com/2009/03/form-design-2.html
