[JS]簡単で楽ちん！さまざまなタブコンテンツをシンプルなHTMLで実装できる軽量スクリプト -PWS Tabs
デモページ: Tabs Position: Vertical Left タブを配置する場所もオプションで簡単に変更できます。 PWS Tabsの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。 <head> ... <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <link type="text/css" rel="stylesheet" href="jquery.pwstabs.css"> <script src="jquery.pwstabs-1.2.0.js"></script> </head> Step 2: HTML 各コンテンツをdiv要素で配置し、ラッパーで内包します。 タブはスクリプトで実装されるので、必要ありません。 <div
![[JS]簡単で楽ちん！さまざまなタブコンテンツをシンプルなHTMLで実装できる軽量スクリプト -PWS Tabs](https://cdn-ak-scissors.b.st-hatena.com/image/square/4d64a904158ec2baa31b10249a1ba5d80abb96b8/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015012601.png)
[CSS]タブコンテンツにCSS3アニメーションを少しだけ加えてかっこよくするチュートリアル
JavaScriptを使用しないで、スタイルシートでタブコンテンツを実装するポイントから、コンテンツの切り替えやタブのフォーカス時にちょっとしたCSS3アニメーションを加えるチュートリアルを紹介します。 Demo 4: 垂直型タブ 実装 HTML タブの各コンテンツはdiv要素で、タブはinput要素で実装します。input要素のチェックでタブを切り替えます。 <section class="tabs"> <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" /> <label for="tab-1" class="tab-label-1">About us</label> <input id="tab-2" type="radio" name="radio-set"
[CSS]シンプルなHTMLで角丸のタブをより美しく実装するチュートリアル
画像を使用せずに、リスト要素で実装したシンプルなHTMLで角丸のタブをより美しく実装するチュートリアルを紹介します。 (Better) Tabs with Round Out Borders [ad#ad-2] 下記は各ポイントを意訳したものです。 デモ 実装 デモ デモはChrome, Safari, Firefox, Operaでご覧ください。 IEはたぶんIE10で対応するはずです。 デモページ 実装 まずは、HTMLから。 HTML タブをシンプルなリスト要素で実装します。 <ul class="tabrow"> <li>Lorem</li> <li>Ipsum</li> <li class="selected">Sit amet</li> <li>Consectetur adipisicing</li> </ul> [ad#ad-2] CSS CSSの実装は、少しずつキャプチャと
タブが何個になってもOKなUIを作成できるjQueryプラグイン「Infinite Rounded Scrolling Tabs」:phpspot開発日誌
タブが何個になってもOKなUIを作成できるjQueryプラグイン「Infinite Rounded Scrolling Tabs」 2011年10月17日- Infinite Rounded Scrolling Tabs | jQuery Plugins タブが何個になってもOKなUIを作成できるjQueryプラグイン「Infinite Rounded Scrolling Tabs」 次のような角丸デザインで、幅が足りない場合はスクロールボタンが表示されるタブUIが作れます こういうのは過去にあんまりなかったかも。デザインとかはCSSで調整できますね スクロール部分は自分でやろうとするとめんどくさそうなのですが、これは参考にできそうです 関連エントリ 閉じられるタブUIを実装できるjQueryサンプル「Magic Tabs」 jQueryベースのタブUI１５種まとめ textareaやin
[CSS]「:before」「:after」でタブのディテールを強化するスタイルシート
Flared Borders with CSS デモページ ※上：ディテールを強化したタブ、下：旧式のタブ [ad#ad-2] 対応ブラウザは「:before」「:after」はCSS2ですが、スタイルに角丸などのCSS3を使用しているため、CSS3対応ブラウザ（Firefox, Chrome, Safari, IE9）でご覧ください。 HTML リスト要素を使用して、実装します。 <ul> <li class="current"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> CSS：タブのベース シンプルな角丸
[JS]タブの機能性のみを追求したフレキシブルな超軽量スクリプト -EasyTabs
スムーズなアニメーションでタブを切り替え、各タブコンテンツの#リンクにも対応した、タブの機能性のみを追求したjQueryのプラグインを紹介します。 JQuery EasyTabs Plugin デモページ：同じページに複数のタブを設置 [ad#ad-2] EasyTabsの主な特徴 タブの切り替え時にはスムーズなアニメーションが可能 外観はCSSで簡単にカスタマイズ可能 ブラウザのバックボタンとフォワードボタンに対応 各タブは#リンクが有効でブックマークが可能（SEOにフレンドリー） タブは指定された時間で自動切り替え可能 グローバル変数の使用はしていません ページ内に複数のタブコンテンツを設置可能 valid HTML Markup 超軽量（5KB） オープンソース（MIT and GPL licenses） タブのスタイリングはCSSでもJavaScriptでも可能 AJAXコンテンツ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
