CSSのみでアコーディオン・2パターン | かちびと.net

2019/06/15 28 users CSS net absolute result アコーディオン

Result 今更感半端ないですが、CSSのみでアコーディオン 全部開けられるやつと1つ開けると他が自動で閉まるやつの2パターンあります 両方ともinput要素と:checkedを使います 違いはcheckboxかradioか、なので基本的には同じコードで動きます css input {/*input要素自体は非表示にしておく*/ position: absolute; opacit... 続きを読む

JavaScript を使わず HTML と CSS だけで Todo アプリを書く方法 - Frasco

2017/11/27 39 users ToDo requir TodoMVC Frasco CSS

HTML と CSS だけで Todo アプリを作りました。 TodoMVC （今回デザインを使用使わせてもらいました）と違って JavaScript は使っておらず、すべてのインタラクションが CSS で動いています。 どういう仕組みなのでしょう？簡単に説明すると、HTML、CSS の一般兄弟セレクタ（ ~ ）、CSS カウンタ、それから :checked 、 :target 、 :requir... 続きを読む

デザイナーたちは、仕事にiPadをつかっていない：調査結果 « WIRED.jp

2015/11/10 85 users iPad WIRED.jp デザイナーたち 調査結果 仕事

2015.11.11 WED デザイナーたちは、仕事にiPadをつかっていない：調査結果 いよいよ発売される「iPad Pro」は、12.9インチの大画面を備え、スタイラスを使う「プロ用ツール」として期待されている。しかしいま、彼らプロフェッショナルたちが、iPadを使ってプロとしての仕事をこなしているのかというと、疑問が残る。 A recycled paper notebook checked ... 続きを読む

jQueryでチェックボックスの状態をうまく取れない、設定出来ないときは、attr()ではなくprop()を使ってね。（JavaScriptおれおれAdvent Calendar 2013 – 02日目） | Ginpen.com

2013/12/03 32 users prop attr undefined jQuery true

JavaScriptおれおれAdvent Calendar 2013 – 02日目 チェック状態は$checkbox.attr('checked')ではなく$checkbox.prop('checked')で得る必要があります。 検証 初期状態で確認すると c1: attr=undefined prop=false c2: attr=checked prop=true チェックを入れ替えて確認する... 続きを読む

[CSS]スクリプトに依存せずに、「:checked」でできるテクニックをBootstrapに組み込むプラグイン -Bootleg.css | コリス

2012/12/10 87 users コリス Bootstrap カルーセル アコーディオン CSS

タブ、ドロップダウン、アコーディオン、カルーセルなど、今まではスクリプトに依存しないと実装できなかったものをスタイルシートベースで実装するBootstrapのプラグインを紹介します。 Bootstapのプラグインですが、CSSの「:checked」を使ったテクニックを学ぶのにも役立ちます。 Bootleg.css 仕組みは簡単に説明すると、見えない状態のラジオボタンを使い、そのオン・オフのチェック... 続きを読む

[CSS]対応ブラウザはWebkit系だけだけど、美しいエフェクトを備えたラジオボタン | コリス

2012/08/24 32 users コリス rAdio Webkit系 Name CSS

見た目だけでもCSS3で美しくスタイルされたラジオボタン、クリックすると更に美しいアニメーションのエフェクトが仕込まれています。 光点がアニメーションで移動 ラジオボタンの選択が移動するのは、分かりやすいですね。 実装は下記のようになっています。 HTML <input type="radio" name="name" checked /> <input type="radio" name="na... 続きを読む

CSS3アニメーションを「:hover」だけではなく、他にも仕込んでみるチュートリアル | コリス

2011/11/13 141 users hover focus コリス active チュートリアル

CSS3アニメーションはたいていの場合、ホバー時（:hover）に仕込まれるものが多いと思います。 ここでは他の疑似クラス「:active」や「:focus」などやMedia Queriesに仕込んでみるチュートリアルを紹介します。 下記は各ポイントを意訳したものです。 「:active」を使ってCSS3アニメーション 「:focus」を使ってCSS3アニメーション 「:checked」を使ってC... 続きを読む

[CSS]ホバー以外にも使ってみたいCSS3アニメーションのテクニック | コリス

2011/08/07 122 users コリス disabled hover CSS focus

下記は各ポイントを意訳したものです。 はじめに -「:hover」の例 「:active」でCSS3アニメーション 「:focus」でCSS3アニメーション 「:checked」でCSS3アニメーション 「:disabled」でCSS3アニメーション Media QueriesでCSS3アニメーション 対応ブラウザ はじめに -「:hover」の例 CSS3アニメーションのトリガーとしては、「:h... 続きを読む

３つの状態を保持できるフォームエレメント実装jQueryプラグイン「jQuery 3 State Switch」:phpspot開発日誌

2011/07/05 31 users phpspot開発日誌 checkbox 状態 rAdio

３つの状態を保持できるフォームエレメント実装jQueryプラグイン「jQuery 3 State Switch」 2011年07月05日- jQuery 3 State Switch Plugin ３つの状態を保持できるフォームエレメント実装jQueryプラグイン「jQuery 3 State Switch」。 フォーム要素といえばcheckboxやradio等がありますが、どちらもchecked... 続きを読む