[JS]シンプルながら優れモノ！ホバーやクリックでさまざまなツールチップを表示するスクリプト -DarkTooltip
ツールチップ系のスクリプトは数多くありますが、これはなかなか使いやすそう！ トリガーはホバーだけでなくクリックにも対応、HTMLコンテンツの表示にも対応、カスタマイズにも優れており、カラー、サイズ、不透明度、表示方向、アニメーションのさまざまなエフェクト、Confirmからのイベントにも対応しています。 上段はサイズ、中段は方向、下段はアニメーション アニメーションなどの実際の動作はデモページでぜひ試してみてください。 DarkTooltipの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとしてhead内に記述します。 <head> ... <link rel="stylesheet" href="darktooltip.css"> <script src="jquery-1.10.2.min.js"></script> <script
[CSS]ホバー時のエフェクトを自分以外の要素にも適用するチュートリアル
ホバー時のエフェクトを実際にホバーされているエレメント以外にも適用するスタイルシートのチュートリアルを紹介します。 下記キャプチャのデモでは、ホバー時に不透明度を3種類適用しています。 Hover on "Everything But" デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 エレメントにホバー時のエフェクトを与えることは簡単です。 ここでは、ホバー時に不透明度が変化するものを例にしてみます。 div { opacity: 1.0; } div:hover { opacity: 0.5; } これで、ホバー時に不透明度が0.5になるようになりました。 ここまでは簡単ですが、ホバー時のエフェクトを実際にホバーされているエレメント以外にも適用するには、どうしたらよいでしょうか？ 例えば隣接した兄弟のdiv要素などに。 まずは、HTMLの基本的な例を見てください。
jQueryプラグイン - レスポンシブなフルスクリーン画像（切り替え効果付き）を背景に - Unobtrusive Background Image Switcher
切り替え効果付きのレスポンシブなフルスクリーン画像を背景にすることができるプラグイン「Unobtrusive Background Image Switcher」を紹介します。 デモでは、単色画像を背景に設定しています。ブラウザの幅を縮めてレスポンシブの挙動を確認してみてください。また、しばらくすると背景の画像が切り替わるので、そちらも確認してみてください。 「Unobtrusive Background Image Switcher」のデモ デモのソース（HTML + jQuery）<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Unobtrusive Background Image Switcher - jQueryプラグインまとめのカルマ</title> <link type="text/css" rel="s
複数のselect要素を連動させるJavaScript「Dependent Select」
フォームなどで段階的に選択内容を絞り込ませられるとユーザビリティが向上しそうです。 jQueryプラグインDependent Selectでは複数のselect要素を連動させることが可能です。 sponsors 使用方法 Dependent Selectからjquery.dependent.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.dependent.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#id2').dependent({ parent:'
絞り込み表示するJavaScript
Webデザインをしていて、一覧にいくつかのジャンルがあり、それを特定のジャンルだけ表示したいという場合があります。それに対応するためのScriptを書いてみました。 Sample 前提条件は以下のようにリスト要素に画像で項目を用意しているものとします。クリックすることで絞り込み表示し、必要があれば元へ戻せるように全部表示させるアイコンも用意したほうがよいですね。 All 上のアイコンをクリックすることで絞り込み表示ができます。 Excelファイル1 PDFファイル1 テキストファイル1 Wordファイル1 ZIPファイル1 サンプルなのでリンクなどはありません。 Excelファイル2 Excelファイル3 PDFファイル2 テキストファイル2 Wordファイル2 PDFファイル3 ZIPファイル2 テキストファイル3 Wordファイル3 ZIPファイル3 使い方 HTML側はシンプルに一覧
地図作成に使えるフリーアイコン素材
本サイトは無料でご使用できる地図アイコンを配布しています。 地図制作以外にもブログ・ホームページ・チラシ・印刷物制作のデザイン業務、またプレゼンテーション/資料作成/ビジネス用途にもご利用頂けます。 商用利用可、画像加工可、会員登録なし。 アイコン素材使用にあたり当サイトにリンクの必要は御座いません。 ご不明な点は「素材ご利用について」をご確認下さい。
Google Chromeだけ、フォントサイズがおかしいんです！そんなトラブルが起きた時に見る、Chromeのフォントサイズのクセまとめ。 | 株式会社NONAME Produce(n2p)｜デジタルプロモーション企画・制作
Google Chromeで見た時だけ、フォントサイズがおかしいんです！ そんなトラブルに陥った日に思い出すためのまとめです。 フォントサイズに謎の異常発生 なんだかchromeで見た時だけフォントサイズが大きい？ 弊社では、remを使った場合に時々遭遇しました。 ルートとして指定してる文字サイズ [fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_i
【公式】アクアレーベル（AQUALABEL）｜資生堂
2024.9.20 11.21発売！ オールインワンにたっぷり増量タイプ、限定北欧デザインが登場。 詳しく
お葬式 | お葬式・お墓のことならガーデニング霊園のいせや
形式、それ以上に、人の想い。 形式を超えて、故人の、 ご家族の想いを何より大切に。 それにいちばんふさわしいお式を、 いせやはご提案いたします。
【公式】 INITIA［イニシア］｜株式会社コスモスイニシア
イニシアのこだわりや特徴を抽出して、背景にある 価値観・イニシアイズムを「10のこと」で表現しました。
ヨガ・ピラティスをライフスタイルに：スタジオ・ヨギー
ヨガ、ピラティス、ビューティ･ペルヴィス®を中心とした多彩なプログラムで、初心者から経験者まで男女共に楽しめるクラスを展開しております。初回体験は1回1,000円（税込）。体験予約はこちらから。オンラインクラスも開催中！
気になるシワ、たるみにグランデーヌ ルクサージュ | コーセー
アスタキサンチン（エモリエント） コーセー研究所が約20年にわたり効果を追求し続けてきた、大人の肌に美しい兆しを与えるオレンジ色の天然成分。
ヘッドセラピスパとは？ | yululuka[no3]
オリジナルマッサージで頭皮の血行を促進させ、頭全体を活性化させることで、強くていきいきとした輝く美髪を育みます。
Repos レポス | 福岡県福津市のオールハンドトリートメントエステサロン
2024.1.01 価格改定のお知らせ 2021.11.05 スマホサイトも完成 2019.3.30 GWも営業します 2019.3.01 Repos移転2周年記念に看板が新しくなりました 2019.1.28 日曜・祝日もご予約承ります 2019.1.01 Repos16周年感謝祭
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
finefinefine.jp
英語で good/great/excellent/awesome などの褒め言葉のランクについて調べてみた
ＨＡＫＵ（ハク） - 美白美容液市場19年連続売上No.1 ｜シミ予防サイエンスの革新を追求
tohok.com
コトモノミチ｜おしゃれギフトのオンライン通販
回春ランド – 風俗・回春エステのAV情報