ブロック要素の高さを行毎にあわせるjQueryプラグインを習作する - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 既知の類似プラグインは多数あるこの課題ですが、ちょっと習作してみました。 横並びにレイアウトされたブロック要素の高さを揃えるライブラリです。 なにをしたいのか 例えば、フロートなどで横並びにした要素があって、それぞれの高さを揃えたい時があります。 こんな感じに。この処理をしてくれるライブラリを書いてみます。 書いてみた物 jQuery.lineUp 使い方 例えばこんな要素があるとして <div class="items"> <!-- 異なるコンテンツ量のブロック達 --> <div class="item">...</div> <div class="item">...</div> <div class="item">...</div> <div class="item">...</div> <div class="item"
モバイルアプリケーション開発のためのHTML/CSS/JavaScript関連技術まとめ
モバイルアプリケーションをHTML/CSS/JavaScriptなどのWeb標準技術を用いて開発するためのさまざまなツールや環境が登場しています。1つ前の記事で紹介した「jQuery Mobile」もその1つですが、それ以外のものもここでまとめて紹介しましょう。 jQuery Mobile jQuery Mobileは、JavaScriptライブラリとして知られるjQueryのプラグインです。オープンソースで提供されています。 「マークアップドリブン」をコンセプトとし、HTMLを記述していくことで、あらかじめ用意されているボタン、メニュー、ダイアログボックス、などのモバイル対応のタッチユーザーインターフェイスを備えたアプリケーションを開発できます。 クロスプラットフォームに対応し、iOS、Android、WebOS、Windows Phone、Symbianなど多数のデバイスでそのまま動作
2010年度版・とても参考になった国内のWeb制作関連エントリーまとめ - かちびと.net
少し気が早いですが、今年も残すところ あと僅かです。ここで、Web制作をする にあたって、個人的に、とても参考にな った素晴らしいエントリーをご紹介します。 基本的にまとめ記事が大好物なので、 まとめのまとめ、という形になってしまい ますがご了承願います。 まぁ、単なる個人的なメモです。今年はお世話になりました、という感謝の意を込めてリンク&トラフィックで返したいのと、自分の復習用リンク集です。来年もたぶんお世話になる記事だと思いますので、備忘録も兼ねて。順不同です。 尚、当ブログのエントリは御礼の場であるこの記事では割愛しています。後日、別記事にてまとめさせて頂きますので、宜しければ御覧ください。 デザイン 読み物系が多いです。正月とかで見直す用。 配色パターンからWebデザインを考える ウェブデザインでこれは気をつけたいの35のポイント デザインQRコードの作り方 非デザイナーのための
クールなメニューやボタンを実装するCSSチュートリアル５５:phpspot開発日誌
Complete Toolbox: 55 CSS Menu And Button Coding Tutorials クールなメニューやボタンを実装するCSSチュートリアル５５。 多数あるので、メニューやボタン実装に迷った際のショーケース的に使うことができそうです。 ナビゲーションといっても様々なアプローチがあって見ているだけでも面白いです。 関連エントリ ドロップダウンメニューのデザインネタ帳 １枚の画像でハイライトする画像メニュー作成が可能なjQueryプラグイン「imagineMenu」 セクシーなドロップダウンメニュー実装サンプル ビローンと伸びるドロップダウンメニュー実装jQueryサンプル
フォントサイズを変える「大・中・小」ボタンを実装する方法
知り合いのデザイナーさんに、「大・中・小」のボタンでフォントサイズを変更する方法ってどうやるのですか？という質問をいただきました。 CSSとJavaScript（場合によってはJSのみ）で簡単にできてしまうので、サンプルをご紹介しておきます。 フォントサイズを変える「大・中・小」ボタン実装 jQueryを使ってフォントサイズを変える「大・中・小」ボタンをサクサクっと実装してみようと思います。 まずは仕様を考えてみましょう。 仕様 ・大・中・小のボタンをクリックするとフォントサイズが変更される ・それぞれのボタンにIDをセットしておき、そのID名をもとにclassをセット ・CSSにあらかじめ各class用のフォントサイズを入れておく ・再度訪れたとき、クッキー情報があればそのサイズ、なければ中サイズを。 スタイルシートごと変更する方法もあるのですが、今回はCSSとclassでセットで対応し
画像なしで実現するCSS吹き出しツールチップ実装サンプル色々:phpspot開発日誌
Filament Group Lab Example From Page from: Image-free CSS Tooltip Pointers - A Use for Polygonal CSS? 画像なしで実現するCSS吹き出しツールチップ実装サンプルの実装チュートリアルが公開されてます。 CSSのみというわけではなくjQuery UI CSS Frameworkを使っていますが、吹き出し部分が画像でない分、左右・中央に自由に吹き出しがつけられます。 バックグラウンドがいい感じに馴染んでますね。 関連エントリ ピュアCSSで実装された吹き出しのデザイン例色々 これは驚きの、CSSだけで作れる吹き出しボックス
[JS]タイル状のパネルをダイナミックに伸縮させるスクリプト -InfoGrid
グリッドに沿って配置されたパネルをダイナミックなアニメーションで伸縮させるスクリプトをCSS-Tricksから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <div class="info-col"> <h2>Batman</h2> <a class="image batman" href="http://jprart.deviantart.com/">View Image</a> <dl> <dt>Super Power</dt> <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exe
[JS]CSSスプライトをアニメーションで変更するチュートリアル
Photoshopでの画像作成からはじまり、CSSスプライトをアニメーションで変更するボタンを実装するチュートリアルをTutorial9から紹介します。 Creative Button Animations with Sprites and JQuery デモページ デモではHTMLとCSSを使用したベーシックなCSSスプライトで実装したボタンだけでなく、XHTMLとCSSとJavaScriptを使用しフェードのアニメーションでじんわりと変更するボタンなどがあります。 エキスパート モードでは、一つの画像で複数のボタンを変更するもの、矩形ではなく円形のボタンをアニメーションで変更するものもあります。
テーブルを見やすく、使いやすくするためのアルティメットガイド
ウェブページでデータをみせるテーブルを見やすく、使いやすくするためのスタイルや機能性などUIパターンを紹介したアルティメットガイドをJanko At Warp Speedから紹介します。 Ultimate guide to table UI patterns 下記は各ポイントを意訳したものです。 テーブルの「（エクセルでいうところの）行と列」の表記は、「横列と縦列」に統一しています。 はじめに 1. 列を交互にスタイリング 2. 列をフルに 3. テーブルのセクション 4. ソート 5. フィルタリング 6. ページネーション 7. スクロール 8. 固定されたヘッダ 9. ヘッダのないテーブル 10. 拡張可能な列 11. 列のアクション 12. マルチプルな列のアクション はじめに テーブルは構造化されたデータをみせるものです。そして、その目的はデータを読みやすくし、走査しやすく、簡単
ブラウザ上でサクッとCSSデザインできちゃう超便利なjQueryプラグイン「Design in the Browser」:phpspot開発日誌
ブラウザ上でサクッとCSSデザインできちゃう超便利なjQueryプラグイン「Design in the Browser」 2010年01月28日- Use jQuery - Blog - Brosho 'Design in the Browser' jQuery Plugin ブラウザ上でサクッとCSSデザインできちゃう超便利なjQueryプラグイン「Design in the Browser」。 インスタントにCSSでデザインというと、Firefox の EditCSS とか CssMate とか サイトのCSSを見たままリアルタイムに編集するツール色々 で紹介したもの等色々ありますね。 今回紹介するのは jQuery のプラグイン形式でインクルード後、初期化すると、以下のサイクルでサイトデザインが出来ます。 (1) エレメントをクリック (2) CSSを記述 (3) 1,2 の繰り返し
jQuery＋CSSによるカルーセルパネルの作り方 (1/3)
「カルーセルパネル」は、画像などのコンテンツを並べたパネルを左右にスライドさせて切り替えるUIです。Amazonの「この商品を買った人はこんな商品も買っています」で利用されているので、名前は知らなくてもご存じの方は多いでしょう。カルーセル（Carousel：回転木馬）は、メリーゴーラウンド（merry-go-round）のことで、パネルをスライドしていくと一周して元のスライドに戻ることから「カルーセルパネル」と呼ばれています。今回はjQueryでカルーセルパネルを作成する方法を解説します。 HTML/CSSでカルーセルのベースを作成する 今回作成するカルーセルパネルのHTML／XHTML（以下、HTML）は次のようになっています。カルーセル全体を囲むdiv要素を配置し、id属性に「carouselWrap」を設定します。div要素の内側にはパネルを左方向にスライドさせる「戻る」ボタン用のp
新規サイトを構築するリソースがパッケージになった -Easy front-end framework
HTMLをはじめ、CSSやJavaScriptなどで実装するフロントエンドの主要な機能が一つのパッケージになった「Easy front-end framework」を紹介します。
ツールチップ表示に使えるかっこいいスクリプト35 – creamu
VANDELAY DESIGNで、ツールチップ表示に使えるかっこいいスクリプトがまとまっています。 かっこいいものが揃っていますね。 Prototip 2 Prototypeを使って、シンプルなものや手の込んだツールチップを作成 Coda Popup Bubbles Codaで使われているような、ふわっと浮き上がるポップアップバブル Easiest Tooltip and Image Preview サムネイルにマウスオーバーすると、拡大画像を表示 Easy Tooltip jQuery Plugin タイトル属性をデザインしてフェードイン効果を与えられる Tooltip to Forms フォーム要素がフォーカスされたときにツールチップを表示 その他もいろいろかっこいいので、ぜひ見てみてください。 35 Useful Scripts for Tooltips 昨日はいろいろといいことがあ
jQueryでロールオーバー！プリロード対応版 (1/3)
ロールオーバー効果付きメニューバーの完成画面。メニューボタンにマウスカーソルが重なると別の画像を表示する。画像がクリックできることをユーザーに視覚的に伝えられるメリットがある（画像クリックでサンプルページを表示します） ロールオーバーの基本的な仕組みを作ろう 最初に、もっとも単純な方法でロールオーバー効果を作成してみましょう。画像（img要素）の上にマウスカーソルが重なると、スクリプトで指定した別の画像に差し替えるロールオーバーです。 メニューバーのHTML／XHTML（以下、HTML）は以下のように記述しています。メニュー部分はul/li要素で作成し、li要素の内側にa要素を、その内側にimg要素を記述しています。li要素の後とその次のli要素の間を<!-- と -->でコメントアウトしているのは、CSSでli要素を横並びにしたときに発生する余分な空白（すき間）を防ぐためです。コメントを
ナビゲーションに使えそうなタブ付きリスト実装サンプル:phpspot開発日誌
ナビゲーションに使えそうなタブ付きリスト実装サンプル。 少ない枠内に多数のメニュー項目を入れ込むことができるＵＩのタブ付きリスト実装のチュートリアルになってます。 サイドバーなんかに組み込んでサイトの使い勝手を高められそうです。 インタフェースの挙動 次のようなインタフェースになってます。 別タブを押すと、アニメーションしながらリストが縦に伸縮して適当なサイズになります。 ソースコードもダウンロード可能です。 以下のエントリを参照してください。 Organic Tabs | CSS-Tricks
[JS]テキストリンクのカラーにフェード効果を与えるスクリプト -Fade colors
テキストリンクのカラーにフェード効果を与えるスクリプトをJanko At Warp Speedから紹介します。 Fade colors using jQuery demo フェード効果は不透明度でコントロールされており、リンクの数でフェードの段階が調整されています。 また、不透明度ではなくRGB値をコントロールする複雑なバージョンもあり、より微妙なカラーを使用することができます。 demo: RGB Fade colorsはjQueryのプラグインのため、実装にはjquery.jsが必要です。 このスクリプトはretweetradarで使用されている、人気が高いものほど強調され徐々にフェードさせたリンクコンテンツにインスパイアを受けて作成したものとのことです。
jQueryを使ってCSSを補強するテクニック15 – creamu
Web Developer Plusで、jQueryを使ってCSSを補強するテクニックが紹介されています。 ざっといくつかご紹介。 jQueryでカラムの高さを統一する equalHeights pluginを使って、一行でカラムの高さを同じにする 入力中のフォームをハイライトする highlighting the label along with the selected input fieldを使って、フォームのユーザビリティーを上げるテクニック 角丸 jQuery Curvy Cornersで角丸を実装する メニューの背景をアニメーションさせる メニューにマウスオーバーしたときに、一瞬でhover画像に切り替えるのではなく、ふわ〜っとアニメーションして切り替えるテクニック。例：Create an Attractive jQuery Menu with Fade In and Fade
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSとjQueryで作るカラフルなアナログ時計 – creamu
机上に写真が散らばったようなクールなLightBoxギャラリー:phpspot開発日誌
[JS]CSSスプライトにアニメーション効果を加えるスクリプト -AutoSprites