Works

性別選択フォーム(ラジオボタン)のデザイン

性別は男性・女性と別れており、そろぞれ青・赤のイメージカラーがある。 このフォームは選択したとき、その性別のイメージカラーも変わることで選択した項目をより分かり安く伝える目的で作成しました。 【特徴】 ・Javascriptは不要、CSSだけで作成 ・選択された時の色を選択肢個別に設定可能です。 ・HTMLに3つ目以上の項目も追加できるので、性別以外にも利用可能です。 【更新履歴】 2011/08/07: ・クラス名を「ColorRadio」に変更しました。 ・緑の文字色を可読性を高めるためやや暗くしました。 ・IEでは正しく表示されないのを確認しました。解決方法検討中です。

  • 12076
  • 3

画面を切り替える直前にダイアログで確認・警告する

ブラウザの戻る・閉じるボタンやリンクなど、画面遷移する直前に確認するダイアログを発生させます。フォームなどの入力途中で画面を切り替えてリセットされるのを防ぐことができます。ダイアログを発生させないリンクを設定できます。 ※ このサンプルとは関係ないリンクまでダイアログが発生してしまいますので、ご了承願います。 ーーーーーーーーーーーーーーーーーーーーーー 動作確認済: Firefox Chrome IE8 Safari ※ Safariはこのサンプルでは動きませんが実際にファイルを作ったら動きます  未対応確認:Opera(beforeunloadのイベントが無いため対応不可)

  • 9262
  • 3

指定したID属性のタグまでスクロールする

画面のonLoad時にスクロール先を計算して移動させることが必要だったので、 #を使ったページ内リンクをJSで出来るようにしてみた。 【更新履歴】 2012/11/29: ・スクロールの位置が最上以外のときにリンクをクリックすると正しい位置に移動できなかった不具合を修正 2013/9/7: ・上方向のスクロールもできるように修正  しかし、href="#" にするとスクロールのスタート箇所が画面上(Y座標:0)になってしまう場合がある。  (一応、 href="javascript:pageScroll('[id属性名]');" とすればスクロール可能)

  • 10658
  • 1

クリックしている間に関数を繰り返し実行する

JSの関数を、 クリックすると単発で実行して、 押し続けると一定時間で実行を繰り返します。 ※ このサンプルではテキストボックスの数値を+1する処理にしています。 タッチパネルなどで操作するブラウザに使えそうですが、実用化までのテストは行なっていません。。。 【12/5/27】更新とりあえず動く版になりました。 【12/6/1】iPhoneで押し続けるとメニューが開くのでボタンに変えてみた。 【14/2/9】iOSデバイスで押し続けても選択されないようにCSSを追加しました。

  • 6525
  • 1

画像に別画像を重ねるサンプル

仕事で既存の画像の上に別の画像を載せたいという依頼を受けたので、 思いついた2案でサンプルを作成してみた。 1.CSS擬似要素のBeforeを使う場合 CSSの中に重ねる画像を定義するので、 クラス設定されたDIVタグを入れるだけで重ねることができる。 重ねる画像のパスもCSSの定義の中一箇所に入れるだけでいいので 共通の画像を重ねるのであればこっちが使い勝手がいい。 でもIE8以下は未対応なので、こちらはNG。 2.CSSのpositionを使う場合 こちらはIE6〜8でも対応しているので、今回はこっちを採用。 重ねる画像をposition:absoluteで位置調整する。 重ねる画像を個別に定義するので、別々の画像を重ねるような場合はこちらがいいかも。 動作確認済: IE6 IE8 Firefox Safari Chrome

  • 13411
  • 0

画像を使わない三角マーカーのリスト

リストのマーカーを三角にしたい時に、三角の画像を使うサンプルがよくあるが、 画像を用意しなくてもできるようにしたかったので、CSSだけで三角マーカーのリストを実装してみた。 三角マーカーはborderのスタイルで作成 マーカーの大きさや表示位置はem単位での調整なので、フォントサイズに合わせて変わる CSS擬似要素のBeforeを使っているのでIE8以下は未対応

  • 9347
  • 2

Skills

Hot tags

Categories

HTML / CSS / JavaScript