かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
[jQuery]イメージマップでTooltip表示するサンプル
「イメージマップのホットスポットにマウスオーバーしたら説明表示出るように出来ない？」って言われて書いたやつ。 非表示にしてるブロック要素を表示してるだけなので、画像とかテキストとか割とフリーダムに出せる。 jQuery1.2.6用。 jQueryのマウスイベントには以下プロパティ提供されていて pageX/Y ： ページの左上を0としたマウスポインタの位置 clientX/Y ： ブラウザのドキュメント表示領域を0としたマウスポインタの位置 特別なことしなくてもイベントが発生した時のマウスポインタの位置を取得することが出来る。 <div id="imgmap"> <img src="tags.png" alt="Tags" width="400" height="151" border="0" usemap="#Map" /> <map name="Map" id="Map"><area
jQuery（JavaScript）でiPhone、iPad、Androidなどデバイスを判別してURLをリダイレクトする方法｜BLACKFLAG
最近のWebサイト制作では、通常のPCサイトを制作するだけでなく iPhoneやAndroidのスマートフォンや、iPadなどタブレット向けにそれぞれサイトを用意し、 デバイス毎にアクセスさせるURLを分けることも増えてきました。 その様な場合のデバイス制御に使える（であろう） iPhone、iPad、AndroidでPC向けサイトへアクセスした際など、 jQuery（JavaScript）を使って簡単に別のURLへリダイレクトさせる方法を紹介してみます。 jQuery(JavaScript)でiPhone,iPad,Android(アンドロイド)を判別してリダイレクト 例として、サイト構成が以下の様なURLとします。 ——————————————————- 【PC向けサイト】 ｈｔｔｐ：//black-flag.net/sample/pc/ 【スマートフォン向けサイト】 ｈｔｔｐ：//b
jQueryをロードする際のナイス！と思った書き方
概要 ▶ 出典：Initializr - Start an HTML5 Boilerplate project in 15 seconds!先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。このブログも実はPC版は形式上HTML5のページになっているんです。見た目はほとんど変わって 出典：Initializr - Start an HTML5 Boilerplate project in 15 seconds! 先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。 このブログも実はPC版は形式上HTML5のページになっているんです。 見た目
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
CSSとjQueryを使ってマウスオーバー時にポップアップ表示にするTooltips | CSS Lecture
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://design-spice.com/2012/06/13/responsive-web-design-image/