【第5弾】少しのコードで実装可能な10のCSS小技集

2023/09/07 100 users 実装 CSS小技集 コード ネスト アスペクト比

2023年9月7日 CSS CSS小技集シリーズの第5弾！「【第4弾】少しのコードで実装可能な10のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ 目次 ネストで親子セレクターを管理 チェックボックスやラジオボタンの色を変更 アスペクト比を指定... 続きを読む

[CSS]さまざまなデザインのチェックボックス・ラジオボタンを美しく実装するスタイルシート -Pretty Checkbox | コリス

2017/11/07 102 users class コリス HTML CSS スタイル

チェックボックスやラジオボタンのスタイルを苦手にしている人も少なくないと思います。シンプルなHTMLにclassを加えるだけで、さまざまなデザインのチェックボックスとラジオボタンが実装できるスタイルシートを紹介します。 ...記事の続きを読む 続きを読む

「ラジオボタン」のデザインにおけるポイント【より良いUXを提供するために…】｜SeleQt【セレキュト】

2017/06/26 59 users データ ユーザー 選択肢 フォーム ボタン

ラジオボタンはフォームにおける必須要素です。互いに相容れない２つ以上のオプションがある時に使用され、ユーザーは正確に１つの選択肢を選ばなければなりません。言い換えれば、選ばれていないラジオボタンをクリックすることによって、選んでいた他のどんなボタンも選ばないということになります。 一般的なラジオボタン・コントロール ラジオボタンは正しく使用されれば素晴らしいものです。 ユーザーが間違ったデータを入... 続きを読む

ラジオボタンをスイッチデザインに変換するjQueryプラグイン*ホームページを作る人のネタ帳

2015/10/02 50 users jQueryプラグイン サンプルデモ http ネタ帳 以下

ラジオボタンをスイッチデザインに変換するjQueryプラグイン 2015/10/02 ツイート スポンサーリンク 味気ないラジオボタンをスイッチデザインに変換してくれるjQueryプラグインです。 それ以上でもそれ以下でも無いのですが・・・。 jQueryプラグインを読み込むだけですぐに変換 jQueryプラグインを読みこめば、ラジオボタンが以下のようになります。 サンプルデモは以下に http:... 続きを読む

テストできないコードをE2Eテストを使ってリファクタリングしよう | Web Scratch

2015/01/24 185 users Web scratch コード E2Eテスト ユニットテスト

ユニットテストがしにくい状態となってるコードをTestiumを使ったE2Eテストを書いてリファクタリングしてみる話です。 例えば、以下のようなjQueryで書いたコードは外(テストコード)から取り出すポイントがないので、ユニットテストを書くのは難しいと思います。(そもそもViewのコードなので) 特定のバージョンでの変更点を簡単に確認できるよう、 「Aの列のラジオボタンを選ぶと同じ行より一つ下にあ... 続きを読む

WordPress：カテゴリー箇所をカスタマイズ出来るプラグイン「Adjust Admin Categories」を公開しました | 着ぐるみ追い剥ぎペンギン

2014/08/20 53 users 案件 着ぐるみ追い剥ぎペンギン チェックボックス カテゴリー

WordPress：カテゴリー箇所をカスタマイズ出来るプラグイン「Adjust Admin Categories」を公開しました WordPressの投稿画面でカテゴリーが選択できるメタボックスがあります。 このカテゴリー箇所ですが、選択したカテゴリーが一番上に来たりと、個人的に余計なお世話と感じる機能があります。 他にも、案件によっては「チェックボックス」を「ラジオボタン」に変更したい時があった... 続きを読む

[CSS]フォームにちょっとだけアニメーションを加えて楽しくするスタイルシート -Animated Toggles | コリス

2013/11/27 120 users コリス CSS HTML アニメーション 動作

フォームのチェックボックスとラジオボタンに余分はタグは使用せずに、ちょっとだけアニメーションを加えて楽しくするスタイルシートを紹介します。 実際の動作は、下記ページで確認できます。 Animated Toggles HTML チェックボックスもラジオボタンも通常通りにマークアップします。 余分なタグは特にありません。 [html] Animated Toggles! Apples Oranges ... 続きを読む

チェックボックスやラジオボタンはチェック時にアニメーションした方が分かりやすい、と分かるデモ:phpspot開発日誌

2013/10/25 74 users phpspot開発日誌 デモ Codrops SVG 瞬時

チェックボックスやラジオボタンはチェック時にアニメーションした方が分かりやすい、と分かるデモ 2013年10月25日- Animated Checkboxes and Radio Buttons with SVG | Codrops チェックボックスやラジオボタンはチェック時にアニメーションした方が分かりやすい、と分かるデモ。 チェック、ラジオをチェックするときは瞬時にチェック状態に変わってしまう... 続きを読む

さりげないアニメーションがいい感じ、HTML/CSSでシンプルに実装するタブコンテンツ | コリス

2013/10/07 142 users タブ トリック GIFアニメーション タブ切替 デモ

コマ数を落としているから、アニメがうまく見えてないかも タブコンテンツはシンプルながら、さりげないアニメーションが仕込まれておりいい感じです。上記はgifアニメーションで、実際のデモは下記ページで確認できます。 Pure CSS Tabs タブ切替のトリックは、ラジオボタンです。タブとして表示されているラベルをクリックするとラジオボタンがチェック状態になり、コンテンツが表示されます。 HTML タ... 続きを読む

ついつい押したくなる、CSS3を使ったラジオボタンのデザイン｜Webpark

2013/08/25 125 users Webpark CSS3 デザイン

特に問題もないと思いますが、フォームを使わない人にとってはlabelは馴染みがないかもしれません。この例でいうと、labelのforの値が「on」のものをクリックすると、inputのidの値が「on」ものにチェックが入ることになります。 forやidを使わず、labelの中にinputを入れて連動させる方法もありますが、今はあまり使わないようです。 続いて、CSSです。まずはすべて載せて、後で個別... 続きを読む

山本太郎 百万人メールメール大作戦

2013/07/19 90 users 山本太郎 再度 削除 ボタン 必須項目

★お名前、メールアドレス、電話番号（必須項目）を入力して「登録」ボタンを押すと紹介者を登録します。 ★ラジオボタンを選択して「削除」ボタンを押すと紹介者を削除します。 ★お手数ですが一度登録した紹介者情報を変更したい場合削除してから再度登録してください。 ※登録して頂いたメールアドレスは山本太郎の政治活動以外の目的では、決して使用しないことをお約束します。 続きを読む

シンプルでミニマルなデザインのUIエレメント素材 -Minimal UI Kit | コリス

2013/07/01 71 users コリス セレクトメニュー Kit ソーシャルサービス デザイン

Google+にインスパイアされたシンプルでミニマルなデザインのUIエレメントをコレクションした素材を紹介します。 Minimal UI Kit Minimal UI kitにはさまざまなUIエレメントが揃っています。 まずは、カラースキーム ナビゲーション、メニュー ボタン、ソーシャルサービス フォーム、検索 セレクトメニュー、チェックボックス、ラジオボタン ミュージックプレイヤー、スライダー ... 続きを読む

透明感が美しい！さまざまな背景にマッチするUIエレメントのPSD素材 -Blugraphic | コリス

2013/05/12 159 users blugraphic コリス UIエレメント psd トグル

特にブラーな背景などの繊細で美しい背景に映える、透明感が美しいUIエレメントのPSD素材を紹介します。 Transparent Ui Kit (Psd) Transparent Ui Kitには、ブログやコーポレートサイトなどに利用できるさまざまなUIエレメントが含まれています。 ボタン、タグ、ラジオボタン、チェックボックスなど メニュー、検索ボックス、ソーシャルメディアなど トグル、ページネーシ... 続きを読む

タッチデバイス対応、フォームのデザインをミニマルやフラットにしたり機能を強化するスクリプト -iCheck | コリス

2013/03/26 91 users コリス ミニマル スクリプト Chrome ブラッド

フォームのラジオボタンとチェックボックスをミニマルやフラットやダークなど、今時のデザイン風に変更したり、コールバック関数や入力をコントロールできるjQueryのプラグインを紹介します。 iCheck iCheck -GitHub iCheckの特徴 iCheckのデモ iCheckの使い方 iCheckの特徴 1KBで超軽量 クロスブラウザ対応 IE7+, Firefox2+, Chrome, S... 続きを読む

チェックボックスとラジオボタンをスタイリングする為のjQueryプラグイン・iCheck.js - かちびと.net

2013/03/14 78 users jQueryプラグイン スタイリング net

checkboxesとradioボタンをスタイリングするjQueryのプラグインです。カスタマイズ性に優れており、使い方も手軽そうだったので備忘録的にご紹介します。 よくあるプラグインですけど、使いやすそうだったのでメモ。 iCheck.js checkboxesとradioボタンをスタイリングするライブラリ。IE7にも対応しています。 かわいい。 スタイルは最初からいろいろと用意されていますので... 続きを読む

CSSでiOS風の選択ボタンをつくるチュートリアル。（CSS おれおれ Advent Calendar 2012 – 10日目） | Ginpen.com

2012/12/11 71 users Ginpen.com rAdio Label チュートリアル

CSS おれおれ Advent Calendar 2012 – 10日目 iOSの選択ボタン。HTMLでいうラジオボタン的なもの。”Segmented Control”というらしいです。 Segmented Control風ラジオボタン。 HTML こんな感じです。 <p> <span class="segmented"> <label><input type="radio" name="frui... 続きを読む

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

2012/12/10 87 users コリス checked Bootstrap カルーセル CSS

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

おHTML5｜2012年 ブラウザで祝うお正月

2011/12/31 174 users ブラウザ お正月 ローディング ダルマ ご挨拶

ブラウザから新年のご挨拶！お正月気分を味わえる、ちょっと贅沢なコンテンツ集。ブラウザ凧揚げ ブラウザをドラッグして 上手に凧を上げてみよう。 リズム餅つき アドレス欄を流れる □と■が合わさったら タイミングを合わせて クリックしよう！ ローディング初日の出 いつもの見慣れた ローディングが、 初日の出になりました。 ラジオだるま だるまの目が ラジオボタンに。 目に墨を入れて、 願掛けしよう。 ... 続きを読む

フォーム周りのエレメントのデザインを見やすいインターフェースに変更できるjQueryプラグイン・jNiceItと、似たようなやつ何個か - かちびと.net

2011/09/30 285 users エレメント インターフェース スクリプト 沢山 選択肢

どこかで使いたいなと思ってメモ。フォーム で良く使うラジオボタンやチェックボックス などのデザインを割りと簡単に見やすいデザ インに変更できるjQueryプラグインです。 この手のプラグインは沢山あるので選択肢の 一つとして、ですが、個人的には使いやすい 印象でした。 昨日に続き、今日もフォームのスクリプト。今日はフォームデザインを変更できるやつです。IE6だけちょい崩れるけどそれ以外は共通したデ... 続きを読む

独自デザインのラジオボタン・チェックボックスを超簡単実装できるjQueryプラグイン:phpspot開発日誌

2011/07/27 70 users jQueryプラグイン phpspot開発日誌 CSS 状態

Screw Default Buttons! | Custom Radio Buttons and CheckBoxes 独自デザインのラジオボタン・チェックボックスを超簡単実装できるjQueryプラグイン。 ONかOFFの状態の２枚の画像を用意してjQuery関数で初期化するだけで簡単に独自デザインのものが作れます。 実装コード例。超簡単ですね。 追加のCSSでよりスタイルを独自に変えることも可... 続きを読む

美しいフォームデザインを実装する事が可能なjQueryプラグイン・Ideal Forms - かちびと.net

2011/05/08 309 users net デザイ フォームデザイン CSS jQueryプラグ

チェックボックスやラジオボタンなど、フォーム周り のデザインを美しくする事が出来るjQueryプラグ イン・Ideal Formsのご紹介。スタイルもいくつか 用意されており、フレームワークとして使えるよう です。デザインテーマもいくつか用意されている ので好みで選ぶことも出来ますね。 ボタン、セレクト、ラジオボタンやチェックボックス等のフォームデザインを変更できます。デザイの変更はcssのみで可... 続きを読む

スマートフォン向けサイトのラジオボタンを良さ気な感じに。 - CSS HappyLife

2011/02/14 140 users CSS HappyLife iPhone 感じ 性別 機会

昨年後半辺りから、iPhoneやAndroidなどのスマートフォン案件を実際にやる機会が増えて、今年はもっともっと増えるんだろうなぁと思う今日この頃。なので今回は、スマートフォン向けサイトのフォームを作成する時に使うかも知れないラジオボタンにフォーカスした記事なんぞを。 ラジオボタンといえば、よく見かけるのは性別の選択とかでしょうか。 何にせよ、下記のような感じです。ラジオボタン1 ラジオボタン2... 続きを読む

フォームをデザインしよう | DesignWalker

2009/03/25 910 users DesignWalker checkbox ウェブデザイン

お問い合わせやログイン、アンケートなどなど、ウェブデザインには欠かせないフォーム。 今回は、そんなフォームをデザインする方法をいくつかまとめてご紹介します。 JavaScriptやCSSを使えば結構いろいろなことができそうです。 FancyForm mootoolを使ってチェックボックスとラジオボタンををクールなデザインに変えてしまうことができます。 CRIR: Checkbox & Radio ... 続きを読む

ウノウラボ Unoh Labs: フォームのユーザビリティを改善する10のTips

2007/08/16 592 users ウノウラボ ユーザビリティ miyake Tips フォーム

miyakeです。Webアプリケーションにおけるユーザーインタフェースの代表格と言えばフォーム。今日はそんなフォームのUIを作るに当たって、普段自分が心掛けていることをつらつらとご紹介します。 ■チェックボックスやラジオボタンはfieldset,label要素でくくる チェックボックスやラジオボタンには一般的にその内容を表すテキスト（ラベル）が付けられますが、input要素だけでマークアップした場... 続きを読む

サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ:phpspot開発日誌

2007/06/04 189 users phpspot開発日誌 JavaScriptライブラリ

サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ 2007年06月04日 chris erwin dot com - CRIR: Checkbox Radio Input Replacement This will allow you to style the label however you wish using CSS, and the actua... 続きを読む