CSS に1行加えるだけで ラベルまわりがとってもわかりやすくなる。 「そんなん当たり前」という人もいるかもしれないけど Gmail やら Twitter やらのログイン画面を見たら 実装されてなかったので一応。 label というのはフォームの部品とセットで使うやつで、 ある部品とその項目名を結びつけるやつね。 ↓このようなチェックボックスがあるとき 次回から自動的にログイン ↓こんなふうにラベルを指定しておくと <input type="checkbox" id="rememberme"> <label for="rememberme">次回から自動的にログイン</label> テキスト部分とチェックボックスが関連づけられるので テキストをクリックした時も チェックボックスにチェックが入るようになりますね。 ここをクリックでチェック入れられるよ 小さいチェックボックスにマウスカーソルを
Latest topics > Firefox 3のロケーションバーにフォーカスを移したときに必ず日本語入力を無効にする方法 宣伝。日経LinuxにてLinuxの基礎？を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能！ « Firefox 3 Download Day Main 拡張機能で独自プロトコルを実装しようとしてFirefox 2とFirefox 3での動作の違いに躓いた » Firefox 3のロケーションバーにフォーカスを移したときに必ず日本語入力を無効にする方法 - Jun 18, 2008 既出だと思うけど。userChrome.cssに以下の内容を書けば、ロケーションバーにフォーカスしてURIを入力しようとして日本語入力になっててムキー！！！となる事態を防げる。 #urlbar
業務システムを構築する際に、一覧表を表示するという処理は多い。そしてそのデータを並べ替えたり、チェックボックスを入れたりしたいというニーズも多く発生する。場合によってはカラムを並べ替えたり、一括更新したいなんて言われることもある。 ソートも並べ替えもページネーションも全部こみこみ それを一つ一つ実装していては非常に工数がかかってしまう。そこで使いたいのがこのSigma Gridだ。 Sigma Gridはテーブルの表示とソート、データ編集などを可能にする超豪華ライブラリだ。LGPLライセンスの下に公開されているオープンソース・ソフトウェアだ。 Sigma Gridはデータの表示に際してJSONでデータを渡す必要がある。そのため既存のシステムにそのまま組み込むのは難しいかもしれない。だがその変更してもあまりあるメリットを享受できるに違いない。 画像表示とクリックアクションの例 まずカラムごと
第 3 回目は「見栄えの良いページャー」です。 シンプルなコーディングで見栄えの良いページャーを実現します。 XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li class="prev"><a href="hoge">« PREV</a></li> <li><a href="hoge">1</a></li> <li><em>2</em></li> <li><a href="hoge">3</a></li> <li><a href="hoge">4</a></li> <li><a href="hoge">5</a></li> <li class="next"><a href="hoge">NEXT »</a></li> </ul> サンプル1： とてもシンプルなページャー とてもシンプルなページャーのサンプルです。 «
![[使えるCSSテクニックVol.2] CSS を使った見栄えの良いページャー | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
CSSplayのエントリーから、透過PNG画像を使用した大胆なドロップダウン型のナビゲーションを実装するスタイルシートの紹介です。 Professional drop-down #13 with png transparency デザイン的に面白いだけでなく、通常のドロップダウンに比べ領域が広いため、マウス操作を誤ってドロップダウンが非表示になってしまうということも少ないと思います。 対応ブラウザは、IE6, IE7, Firefox, Opera, Safari(PC) and Google Chrome Betaとなっています。 IE6対策には、ドロップダウンの箇所にtable、背景画像にfilter(AlphaImageLoader)が使用されています。
noupeのエントリー「37+ Great Ajax, CSS Tab-Based Interfaces」から、CSSとJavaScriptで実装するタブ型インターフェイス37選の紹介です。 37+ Great Ajax, CSS Tab-Based Interfaces 自動で切り替わるタブ型インターフェイス Easy Tabs 1.2 - now with autochange Rotating jQuery tabs example Tab Content Script (v 2.1) スライド式のタブ型インターフェイス Sliding Tabs Coda-Slider Perspective Tabs AJAXを使用したタブ型インターフェイス Ajax Tabs Content Script (v 2.1) 閉じることも可能なタブ型インターフェイス Tab Panels Close
先日ご紹介した第三弾に続き、第四弾。さて、いつまで続くのやら・・・と思いつつエントリー。 小粋なインターフェースを実現する25のコード 小粋なインターフェースを実現する25のコード （パート2） 小粋なインターフェースを実現する25のコード （パート3） 今回も素敵なコードが揃っていますよ。いくつかご紹介。 ↑ CSSでアラートメッセージを作る方法。ウェブサービスなどにいいですね。 ↑ こうしたメニューのコードをブラウザ上で作れるジェネレーター。 ↑ スライド式のナビゲーションメニュー。 新しくウェブをつくるときに参考にしたいですね。ご利用は以下からどうぞ。 » 25 Code Snippets for Web Designers (Part4)
Yahoo! UI Library: Fonts CSSを知ってから、CSSを書く際にfont-sizeは大体このライブラリを読み込ませてから使っています。ただし、Operaで表示する際には、気をつけたほうがよさそうな点があったので、メモしておきます。 Fonts CSSはどういう構造になっているのか詳細は分かりませんが、とりあえずクロスブラウザで同じフォントサイズを実現してくれる摩訶不思議なライブラリ。デフォルトのフォントサイズ、つまりfont-size: 100%;は13pxになっており、それからfont-sizeをパーセントで指定することによって、pxでフォントサイズを指定するような感覚で、フォントサイズを指定することができます。 ただし、Operaにおいては、フォントサイズを100%以下、つまり12pxなどにするときはフォントがほかのブラウザより、小さく表示されるバグがあるようです
OSResources - How to create CSS overlapping tabs? Sometimes simulating a real desktop interface for your web application can be a real challenge, especially when dealing with tabs. CSSでクールなタブUIを作成するサンプル。 次のようなタブUIを作ることが出来ます。 サンプルのCSSを定義しておけば、後は次のようにシンプルなHTMLをコーディングするだけで上記画像のようなタブUIが作れます。 HTMLもクリーン。 <ul class="obtabs"> <li class="first"><span><a href="#">Jack</a></span></li> <li><span><a class="new
シリーズもの第三弾が発表されていました。ウェブ製作に使えるちょっとした小技集です。パート1と2もあわせてどうぞ。 小粋なインターフェースを実現する25のコード 小粋なインターフェースを実現する25のコード （パート2） 今回も全部で25個ありますが、気になったものをいくつかピックアップ。 ↑ Flickrのようにクリックするとその場で編集できるようにする方法。 ↑ テキストがフェードイン、フェードアウトしていくような効果を作る方法。 ↑ CSSだけで上のようなボタンを作る方法。 ↑ CSSだけでリストをこのようなツリーのようにする方法。 全部見たい方は以下からどうぞ。一度試しておくと技の幅が広がりそうですね。 » 25 Code Snippets for Web Designers (Part3)
metal.ize - tutoriales Este es un peque・ experimento con CSS que muestra un men・circular con los elementos a su alrededor.CSSを使ってカッコいい円形メニューを作るサンプル。 次のような円形でアイコンにカーソルを合わせるとツールチップが表示されるような円形メニューのサンプルが紹介されています。 尚、紹介したページの言語は英語ではないのですが、解説ページのサンプルコードを読みつつ原理を理解するとよいでしょう。 HTMLがリスト要素になっていて綺麗なHTMLになっているのが特徴。ＣＳＳをオフにすると次のようなリスト要素の見栄えになります。 Flashや画像のクリッカブルマップでこういったナビゲーションを作るのは簡単そうですが、リスト形式のものはなかなか無かった気がします。
こんにちは！ 4月より、デザイナーとしてウノウの末席に加わらせていただくこととなりました。山崎と申します。 周囲が凄いエンジニアの方ばかりで、毎日チビりそうになりながら（？）仕事をしています。 いきなりのラボブログ当番で、さて何を書いたものやら、というところなのですが、このブログをご覧いただいている方々にはエンジニアさんが多いということで、「デザインはよくわからない」と苦手意識を持っている方も少なからずいらっしゃるはず。そんな「デザインとかようわからん」な方々に向けて、Webサイトの「デザイン」について、本当にベーシックな部分から少しずつ少しずつ解説してみようと思っています。 すでにガシガシWebデザインをやっている方々には物足りない、退屈な内容になってしまうかもしれませんが、どうぞよろしくお付き合いください。 というわけで今回は、「テキストを読みやすくする」です。 Flashだリッチコ
Form field hints with CSS and JavaScript (Ask the CSS Guy) My co-workers pointed out a nice effect on the Vox registration form. 入力フィールドにカーソルを合わせた際に吹出しヒント表示するCSS＆JavaScriptサンプル。 次のように、入力フォームにカーソルを合わせた時点でそのフィールドのヒントを表示できます。 フォームの入力フィールドの下に説明を書くよりも、ポップアップしてヒント表示したほうがユーザビリティ的によさそうですね。 要素の表示/非表示処理をJavaScriptによって行っていて、綺麗なHTMLによる実装が可能な点もいいです。 また、サンプルが1ファイル＋画像1枚とシンプルなので、あまりJavaScriptやCSSの知識のない方でも、ちょこっと変え
Usability is an essential goal of any website, and usable navigation is something every website needs. It determines where users are led and how they interact with the website. Without usable navigation, content becomes all but useless. Menus need to be simple enough for the user to understand, but also contain the elements necessary to guide the user through the website — with some creativity and
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
