[JS]ハイライトのエリアをマウスに合わせて移動させるスクリプト
Google Chromeのタブのように、繊細なハイライトのエリアをマウスに合わせて移動させるスクリプトを紹介します。 タブの実装 まずは、タブの実装から。 タブの実装はシンプルです。 HTML タブはリスト要素で実装します。 <ul class="nav clearfix"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li class="active"><a href="#">Clients</a></li> <li><a href="#">Contact Us</a></li> </ul> CSS CSSもシンプルに実装します。 .nav { list-style: none; border-bottom: 1px solid #a0a0a0; padding: 10px 10px 0 10px; } .
[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]ナイスアイデア！二つの繋がる要素を一つのドロップシャドウで処理するテクニック
div, p, aなどの要素を二つ繋げたものを一つのドロップシャドウで処理するスタイルシートのテクニックを紹介します。 上がborder:1px;の状態、下がbox-shadowで一つにした状態です。 Drop shadow for 2 elements preserving the intersection in CSS 凸型の要素はタブや上からコンテンツをひっぱりだす時によく使われ、デモではひっぱりだすトグル用に「Show / Hide」と書いてあります。 ※このデモではトグルとしての機能は実装されていません。 デモページ 実装は非常にシンプルです。 HTML 二つの要素はdivでもpでもaでもブロックとなる要素なら何でも構いません。ポイントは二つの要素を内包するdiv要素を設けることです。 <div class="block"> <div class="innerblock"> <p
さりげないアニメーションがいい感じ、HTML/CSSでシンプルに実装するタブコンテンツ
コマ数を落としているから、アニメがうまく見えてないかも タブコンテンツはシンプルながら、さりげないアニメーションが仕込まれておりいい感じです。上記はgifアニメーションで、実際のデモは下記ページで確認できます。 Pure CSS Tabs タブ切替のトリックは、ラジオボタンです。タブとして表示されているラベルをクリックするとラジオボタンがチェック状態になり、コンテンツが表示されます。 HTML タブとコンテンツは1セットでリスト要素で実装します。 <ul class="tabs"> <li> <input type="radio" name="tabs" id="tab1" checked /> <label for="tab1">タブ 1</label> <div id="tab-content1" class="tab-content"> <p>コンテンツ 1</p> </div> <
[JS]普通のタブから便利な機能を備えたタブまで簡単に実装できるスクリプト -Tabslet
Custom event: タブの切替時の前後にイベントを設定します。 Tabsletの使い方 Step 1: 外部ファイル </body>の上あたりに、jquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script type="text/javascript" src="javascripts/vendor/jquery.tabslet.min.js"></script> Step 2: HTML タブをul要素で、各コンテンツをdivで実装します。 タブのアンカー（#tab-1）とコンテンツのid（tab-1）は対応するように設定します。 ラッパーのclassに「tabs」を指定し、機能を選択
[JS]4種類のエフェクトを備えたタブを簡単に実装できるスクリプト -Tabulous.js
デモ：Flip Tabulous.jsの使い方 実装は非常にシンプルで、エフェクトの設定も簡単です。 Step 1: 外部ファイル 当スタイルシート、「jquery.js」と当スクリプトをhead内に記述します。 <link href='tabulous.css' rel='stylesheet' type='text/css'> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="tabulous.js"></script> Step 2: HTML HTMLは非常にシンプルで、タブをリスト要素、コンテンツをdiv要素で実装し、divで内包します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
