チェックボックスにチェックが入ると入力できるようになるinput要素をCSSだけで作る
Result ちょっと今更感ありますけど、チェックボックスがチェックされるとinputが入力できるようになるやつです。上のUIは少し違いますけど、鍵の部分がチェックボックスになっています。 よくある「同意するにチェックを入れて～」的なやつに使えそうでしょうか。 ※この同意する云々のUIの意味に対する是非はここでは割愛します cssdiv { --field-size: 50px; --field-border-color: #ccc; margin: auto; top:40px; font-size: 1rem; background: #ffffff; border-radius: 5px; position: relative; width: 400px; overflow: hidden; display: flex; background: white; } div input[
フォームの内容を元に任意のUIに遷移
Result フォームの内容から別のUIに遷移する、みたいなの やってる事は割とシンプルで、作成ボタンをクリックするとレイアウト全体を包括する親ブロックのclassを別のclassと入れ替えてCSSで見た目を整えてるだけです サンプルはバッジっぽいUIですが他にも応用できますね 何かに使えそうかなぁと思ったので備忘録です 例えば非予約なイベント会場等で来場者カードを作る時に来場者にタブレットで入力してもらうと来場者カード発行の手続きプロセスを簡略できる、とか jQuery//ボタンクリックで全体のclassを入れ替えて、フォーム内容とカードUIをトグル $(".js-switch").click(function() { $(".main-content").toggleClass("as-card"); }); //画像を送信前にプレビューする var reader = new File
CSSだけで、長いテキストを一部隠してボタンクリックで全文表示
Result たまに見かけるコンテンツの表示/非表示のトグルです css.expand {/*全体*/ width: 300px; padding:15px 10px; max-height: 80px; overflow: hidden; position: relative; border-bottom: 1px solid #aaa; transition: .5s; } .expand::before {/*グラデーション部分*/ content: ""; position: absolute; width: 100%; height: 50%; bottom: 0; background-image: linear-gradient(rgba(255, 255, 255, 0), #ffffff); pointer-events: none; transition: 1s; }
Responsible.js - スマートフォン向けにフルサイズ表示をシミュレート MOONGIFT
レスポンシブWebデザインは訪れたブラウザのウィンドウ幅によって見せるコンテンツを切り替えます。そのため、PCのブラウザであっても画面幅を縮めればスマートフォン用の見栄えをチェックすることができます。 しかし時によってはスマートフォンであってもPCブラウザ向けの表示でブラウジングしたい時があるはずです。そんな時に使えるのがResponsible.jsです。 Responsible.jsの使い方 まずは最初の表示。スマートフォンに最適化されています。 Toggle Desktopをクリックすると、フルサイズのブラウザ向け表示に切り替わります。 別なボタンを押せば、いつでもスマートフォン向けの表示に戻せるようになっています。スマートフォン向けとして情報を大幅に削ってしまっている場合、こうした表示切り替えは便利かも知れません。 iPhoneでも類似の機能がありますが、こちらは画面の再読み込みが不
:checked擬似クラスでチェックボックスに連動して要素を表示させる方法
CSSの:checked擬似クラスを使って、チェックボックスに連動して要素を表示させる方法を紹介します。 １．はじめに 次のようなチェックボックスがあるとします。 そして、チェックボックスのチェックに連動してテキストフィールドを表示（または非表示）させるものとします。 このような制御を行いたい場合、次のようなjQueryを書けば実現できます（よりエレガントな書き方はあると思いますが）。 <script> $(function(){ $('input[type=checkbox]').click(function() { if ($(this).prop('checked')) { $('.bar').show(); } else { $('.bar').hide(); } }); }); </script> <div class="foo"> <input id="foo" type="c
効果的なカルーセルをデザインする： お化け屋敷ではなく、しゃれた娯楽を創り出そう
カルーセルを使えば皆が一番欲しがる場所を複数のコンテンツで独占することができるが、ビューポートの大小にかかわらず、カルーセルはスクロールして飛ばされてしまうことも多い。もしカルーセルをページの主役にするなら、良質なナビゲーションとコンテンツによってその有効性を高めることが可能である。 Designing Effective Carousels: Create a Fanciful Amusement, Not a House of Horrors by Kara Pernice on September 14, 2013 日本語版2013年11月11日公開 カルーセルの普及 カルーセルと見なされているUI要素にはいろいろなものがある。例えば、（DellのWebサイトにあるような）クリック可能な複数イメージからなるフィルムストリップもそうである。 また、（NestのWebサイトにあるような）
[CSS]アイデアが面白い、ボタンに次々とメッセージを表示するスタイルシート -Story Button
[CSS]アイデアが面白い、ボタンに次々とメッセージを表示するスタイルシート -Story Button Story Button こういうボーナス的なトリックって、面白いですよね。 気がついたビジターだけが楽しめたり、ボタンクリックへの背中を一押しするようなメッセージを入れるのもいいかもしれません。 実装は、簡単です。 HTML a要素で実装したボタンに、メッセージの数分のa要素を量産します。 デモでは、10のメッセージが表示されます。 <div class="button"> <a class="first"> Keep hovering me </a> <a class="slidein"> how are you today? </a> <a class="slidein two"> I'm doing well </a> <a class="slidein three"> tha
Movable Type管理画面のカテゴリ一覧を折りたたむ「ListCategoryFolderプラグイン」
Movable Type管理画面のカテゴリ一覧を折りたためるようにする「ListCategoryFolderプラグイン」を公開します。 １．機能 Movable Typeのカテゴリ一覧画面は、jQueryを使ってカテゴリーの追加・削除やドラッグ＆ドロップによる並び替えができる仕組みになっており、非常に便利です。 ただ、カテゴリ数が数百以上になると、スクロールしたり並び替えを行うのが結構大変です。 このプラグインを利用すれば任意のカテゴリを折りたたむことができるようになり、作業効率がアップします。 折りたたんでいない状態 折りたたんだ状態 また、カテゴリの追加・削除やカテゴリの並び替えなどを行っても、折りたたみを常に行うことができます。 動作確認バージョンは以下です。 5.14 5.2.6 6.0b1 ２．価格 3300円/1インストールMT（税込み）。お試しはご自由にどうぞ。 ３．プラグイ
hideShowPassword for jQuery
Inspired by a pattern seen in Polar, IE 10+ and LinkedIn and documented by Luke W, hideShowPassword lets you easily hide and show passwords via JavaScript or a nifty inset toggle. Download Source & Docs Examples
jQueryのAjaxやタブ切替などでブラウザの「戻る」「進む」が有効になる「hashchangeプラグイン」（実装解説つき）
jQueryのAjaxやタブ切替などでブラウザの「戻る」「進む」が有効になる「hashchangeプラグイン」を紹介します。 jQuery hashchangeプラグイン １．機能 Ajaxを使って切り替えたページについては、通常、ブラウザの「戻る」「進む」が使えません。 が、hashchangeプラグインを利用すれば、Ajaxを使って切り替えたページについてもブラウザの「戻る」「進む」が有効になります。 例えば下の図の①～⑤のページ遷移で、通常は「戻る」「進め」ボタンで②～④の遷移は行われませんが、hashchangeプラグインを使えば②～④のページ遷移も実現できます。 具体的な仕組みですが、まず基本的なJavaScriptの動作として、フラグメント（「index.html#abc」の「#abc」）を使ってページを切り替えた場合、フラグメント「#abc」が「location.hash」に
なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密
日本のAmazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日本のAmazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。 通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。 な
CSSだけでタブ切り替えを実装してみた。（CSS Programming Advent Calendar 2012 – 06日目） | Ginpen.com
CSS Programming Advent Calendar 2012 – 06日目 JavaScriptを使わず、CSSを駆使してそれっぽい事をやるCSSプログラミングのアドベントカレンダーへの投稿記事です。 いわゆるタブ的な動きを、CSSだけで組みました。（※実務で使っちゃ駄目ですよ！） タブのCSS自体の組み方はこちらをどうぞ: ありがちなタブのマークアップとスタイル実装例。（CSS おれおれ Advent Calendar 2012 – 06日目） デモ どーん！ .tab-switch:nth-of-type(1):checked ~ .tab-button:nth-of-type(1), .tab-switch:nth-of-type(2):checked ~ .tab-button:nth-of-type(2), .tab-switch:nth-of-type(3):che
WordPressのカスタムメニューをアイテム毎に条件分岐で表示/非表示を設定出来るプラグイン・If Menu - かちびと.net
カスタムメニューで追加した アイテムを条件分岐で表示、 非表示にスイッチできる、と いうWordPressのプラグイン です。コードを参考にしたの でご紹介。 カスタムメニュー周りのプラグインは仕様でもよく求められることが多いので非常に助かります。このプラグインもCMSとしてWPを利用する際に役立ってくれそう。 カスタムメニュー内のアイテムを固定ページのみ、TOPページのみ、ユーザーログイン時のみ、などの条件をつけて表示/非表示できる、というもの。 プラグインを有効化すると、カスタムメニューで追加したアイテムの下部にEnable Conditional Logicというラベルの付いたチェックボックスが表示されますのでチェックを入れればセレクトボックスも表示されます。 現時点では、決められている条件が多くはなく、変更も出来ないので実際に利用する際は少しコードを弄らせてもらう事になりそうです。
[JS]プロダクトの一覧表示を1クリックで、リストとグリッドに切り替えるチュートリアル
ベーシックなHTMLとCSSで実装されたプロダクトページの表示をリストとグリッドに切り替えるjQueryのチュートリアルを紹介します。 Building a List/Grid View Switcher with jQuery [ad#ad-2] デモ 実装 デモ 表示の切り替えは、右上のアイコンをクリックで。 デフォルトはリスト表示で、プロダクトのサムネイル、リンク、購入ボタンがセットになっています。 デモページ：グリッド表示 実装 HTML HTMLはそれほど複雑ではありません。 まずは、右上の切替用のアイコンのHTMLです。 <span class="list-style-buttons"> <a href="#" id="gridview" class="switcher"><img src="images/grid-view.png" alt="Grid"></a> <a hr
あんとんさんち
今日は「割と簡単」シリーズの動画撮りました 「今回のはホント簡単！！」、良く出来たと思うんですけど、数回撮り直し… 録画環境が…ってのが言い訳なんですけどね まっ、何とか撮り終えたのたので良かったです で、午後散歩 太陽の光が強くて暖かさを...
「Alt+Tab」でウィンドウを見やすく素早く切り替えられる「VistaSwitcher」
ウィンドウを何十個と開いて作業をする必要がある場合に、ウィンドウを何度もあっちへ切り替えたり、こっちに切り替えたりと収拾が付かない状態になってしまいますが、そんな苦労を少しでも軽減してくれる便利なフリーソフトが「VistaSwitcher」です。インストールと操作・設定方法については以下から。 ◆「VistaSwitcher」の機能 仕事や家で作業をしているときに、このように大量のウィンドウを開いていると、タスクバーから開きたいウィンドウを開くにも大変になり、何を開いているかも分からなくなります。 こんな場合に備えてWindowsにはウィンドウ切り替え機能があり、「Alt+Tab」を押すと以下の画面が表示され、「Alt」を押したまま「Tab」を押したり離したりすると、表示させるウィンドウが選択されて、「Alt」から手を離すと、選択したウィンドウが表示されます。ただ、このウィンドウを切り替え
jQuery.LazyJaxDavisで静的サイトを手軽にダイナミックにする
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / jQuery.LazyJaxDavisというライブラリを書いた。このライブラリは、一般的な静的に生成されるようなサイトを、HTML5 history APIの力を使って素敵にダイナミックにします。 このライブラリを使うと、すべてのリンクを、通常遷移の代わりに、Ajaxベースのダイナミックな遷移にします。その際、history.pushStateして、通常の遷移と同じように見せる。言葉にするのは難しいので、実際にサイトを見てもらったほうが分かりやすいと思う。以下のサイトの左ナビをポチポチクリックするなりして。 jQuery.LazyJaxDavis加えて、結構汎用的なURLルーターの機能も備えて
ウィンドウサイズに応じてli要素とselect要素を切り替えるレスポンシブなメニューを実装する軽量jQueryプラグイン・Responsive Menu
ウィンドウサイズに応じてli要素と select要素にスイッチできるjQuery プラグイン、Responsive Menuのメモ。 ブレークポイントを設定して、閲覧 するウィンドウサイズがそのポイント に達したらli要素で作ったメニュー をselectにしてコンパクト化します。 以前、CSS-Tricksでも記事になっていました(参照：Convert a Menu to a Dropdown for Small Screens)が、これと同じ機能です。孫要素までネストされたリストでもselectにスイッチできます。CSS-Tricksのもネスト対応してるかは調べていませんが・・ 普通にPCで見ると左のようにリストに、スマフォのようなウィンドウサイズの狭いデバイスだとselectにスイッチしてコンパクトにしてくれます。これ便利ですよね。 select化されてもネストされた要素はスペースで明
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Slider Pagination Concept - with jQuery UI Slider
Blog - Diamond Casino Online