タブの正しい使い方
以下のタブコントロールに関する12のデザインガイドラインに従い、タブをサイトのナビゲーションと区別し、また、ユーザーが自信を持って、タブをクリックできるようにしよう。 Tabs, Used Right by Jakob Nielsen on July 9, 2016 日本語版2016年10月3日公開 Webのたいていの機能は非常にシンプルなGUIウィジェットで構成されている。しかし、すべてのダイアログコントロールを正しく利用しているサイトはめったにない。ラジオボタンやチェックボックスのようなシンプルなものでさえ、正しく使われていないことは多いし、ドロップダウンメニューに関しては、言うまでもない。というのも、ひどい扱いをされているからだ。そして、この記事では誤用されることの多い、もう1つのデザイン要素について論じる。その要素とは、タブである。 （今回論じるのは、下のスクリーンショットの例にあ
誰でも出来る！プラグインを使わずにjQueryで実装するタブ切り替え機能！
こんにちは、ミキです。 今回はアウトプットの場として、 最近プラグインを使わずに実装した タブ切り替え機能の紹介をしたいと思います。 HTML まずタブとタブに連動したコンテンツのHTMLを用意します。 一番目のタブに「class=”select”」をつけます。 最初に表示させないコンテンツにはあらかじめ「display:none;」を設定しますので、 ここでは「class=”hide”」をつけました。 ちなみにダミーテキストは夏目漱石の坊っちゃんからです。 <ul class="tab"> <li class="select">タブ1</li> <li>タブ2</li> <li>タブ3</li> <li>タブ4</li> </ul> <ul class="content"> <li>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かし
[Å] このテキストさっきコピーしたのにまた…を解決する「ClipMenu」にはこんな機能もあった！
[Å] このテキストさっきコピーしたのにまた…を解決する「ClipMenu」にはこんな機能もあった！
![[Å] このテキストさっきコピーしたのにまた…を解決する「ClipMenu」にはこんな機能もあった！](https://cdn-ak-scissors.b.st-hatena.com/image/square/c751621f136739435127b768f911d2100ad74b03/height=288;version=1;width=512/http%3A%2F%2Fwebmemo.biz%2Fwp-content%2Fuploads%2Fclipmenu-hp.jpg)
jQueryを使ったスムースなタブメニュー
素晴らしく気持ちのいい動きをするタブメニューに出会ったので光の速さで実装してみました。 これは個人的にかなりオススメです！！2008年産みたいなのでもしかして知っている方も多いかも。 前々からサイドバーで記事をランダムピックアップする事に憧れを抱いていたのですが、これ以上サイドバーが長ったらしくなるのが嫌でなかなか実装せずにおりました。 ですが今回WEBクリエイターボックスさんのリニューアル で使われていたタブメニューを触って惚れ込んでしまいまして、当サイトにも実装してみました :) 配布サイト様 yensdesign 海外サイトなので英語ですが、わりと読みやすいと感じました。 記事の上の方に「Tested in: Firefox, Internet Explorer 6 & 7, Opera, Safari & Chrome.」との表記があるので、なんと近々死ぬであろうIE6,7(※)で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
