CSS だけで作るタブ切替ユーザインタフェース （float 使用版）
1つ前のエントリーで、:target 疑似クラスを利用した CSS だけで作るタブ切替 UI を実装してみるテストしてみました。詳しいことは下記のエントリーをご覧ください。 CSS だけで作るタブ切替ユーザインタフェース 先のエントリーで作ったサンプルは、position: absolute; を使って、各タブの内容を重ねちゃった上で表示を切り替えるっていう方法を使ったのですが今回は、float プロパティを使ったサンプルを紹介してみます。 実際のサンプルは下記に。 CSS だけで作るタブ切替ユーザインタフェース サンプル 最新の Firefox、Google Chrome、Safari、Opera など、:target 疑似クラスに対応したブラウザであれば問題なく動作するはず。IE は IE9 以降のみ。その他、スマートフォンなどでは動作に問題ないと思います。 HTML はほぼ変更なし
仕事の効率・PCパフォーマンス共にアップ！ GoogleChromeで開いたタブをひとまとめにできるサービス『OneTab』が超便利！
» 仕事の効率・PCパフォーマンス共にアップ！ GoogleChromeで開いたタブをひとまとめにできるサービス『OneTab』が超便利！ 仕事の効率・PCパフォーマンス共にアップ！ GoogleChromeで開いたタブをひとまとめにできるサービス『OneTab』が超便利！ 田端あんじ 2013年4月2日 0 もしもあなたがGoogleChromeユーザーならば、覚えておいて損は無い、とても「使える」サービスがあるのです。それは、Chromeで開いたタブをひとまとめにできる機能『OneTab』！ PCを使用する際、タブを開き過ぎて重くなってしまった、なんて経験は誰しもがしていることだと思います。しかし『OneTab』さえインストールしておけば、ワンクリックでタブがひとつに。開いたタブ一覧を閲覧しつつ、必要なものだけピックアップすることができるのです。 タブ一覧は、日付またはウィンドウ別にま
シンプルで汎用性に優れたレスポンシブ対応のタブコンテンツ -Basic Tabs
jQueryとCSS3アニメーションを使ってシンプルに実装する、レスポンシブ対応のタブコンテンツを紹介します。 BasicTabs - The Simple jQuery/CSS3 Solution Basic Tabsのデモ Basic Tabsの実装 Basic Tabsのデモ タブはレスポンシブ対応で、表示サイズに合わせて最適化されます。 タブの切替はCSS3アニメーションで、左からフェードインで表示されます。このエフェクトの変更は簡単です。 デモページ：幅480pxで表示 Basic Tabsの実装 実装は非常にシンプルなので、カスタマイズも簡単だと思います。 Step 1: HTML HTMLは非常にシンプルで、タブはリスト要素、コンテンツはdiv要素で配置します。 <div id="tabwrap"> <!-- TABS --> <ul id="tabs"> <li class
CSSとJavaScriptで実装するタブ型インターフェイス37選 -noupe | コリス
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
