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

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

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

このCSSなら簡単！フォームのチェックボックス・ラジオボタンとテキストをベースラインに揃えて配置

2021/10/05 39 users CSS 配置 テキスト ベースライン チェックボックス

フォームの実装で面倒なのがフォーム要素とテキストを揃える、特にチェックボックス・ラジオボタンとテキストをベースラインに揃えることです。 flexboxでalign-item: baseline;を使用すると、チェックボックス・ラジオボタンとテキストを揃えるのは簡単に実装できます。複数行のテキストにも対応します。 <div class="f... 続きを読む

CSSの新しいプロパティ「accent-color」が便利！今までできなかったフォーム要素のカラーを簡単に変更できる | コリス

2021/08/26 17 users プログレスバー コリス CSS ライ 新しいプロパティ

フォーム要素のチェックボックス・ラジオボタン・レンジスライダー・プログレスバーのカラーを簡単に変更できるCSSの新しいプロパティ「accent-color」の基礎知識と使い方を紹介します。 CSS accent-color by Adam Argyle, Joey Arhar 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライ... 続きを読む

モダンCSSの機能を使用して、フォームのラジオボタンやチェックボックスを独自のスタイルで実装するテクニック | コリス

2020/02/21 17 users コリス トグルスイッチ div span モダンCSS

モダンCSSの機能を使用して、フォームのラジオボタン・チェックボックス・トグルスイッチなどを独自のスタイルで実装するテクニックを紹介します。以前まではdivやspanなど追加のHTMLやJavaScriptが必要でしたが、一切必要ありません。 こういった実装はできないものと思っていたので、驚きました。 Custom Styling Form... 続きを読む

WordPress：「Contact Form 7」でセレクトボックスやラジオボタンの選択項目によって送信先アドレスを変更する方法 | NxWorld

2018/07/23 25 users セレクトボックス NxWorld type プラグイン 送信

WordPressで問い合わせフォームを実装したいときに便利なプラグイン「Contact Form 7」で、セレクトボックスやラジオボタンの選択項目によってそれぞれ異なるメールアドレス宛に送信されるようにする方法です。 ここでは「type」という項目名があり、それぞれ選択された場合は下記のように異なるメールアドレス宛に送信... 続きを読む

[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:... 続きを読む

ES5の範囲でOption<T>型を表すライブラリ、option-t を作った - snyk_s log

2015/03/21 15 users Option log boolean ライブラリ snyk_s

2015-03-20 ES5の範囲でOption<T>型を表すライブラリ、option-t を作った ECMAScript javascript 動機 初期状態で未選択なラジオボタンがあるようなフォームを作っている場合、ラジオボタンに対応するモデルの値を「この値は未選択である」というのをJSで表現するのは結構面倒くさい。チェックボックスであれば, booleanのどちらかで状態が確定するが、ラジオ... 続きを読む

テストできないコードを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 20 users 山本太郎 再度 削除 ボタン 必須項目

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

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

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」:phpspot開発日誌

2013/03/20 44 users jQueryプラグイン phpspot開発日誌 クール

チェックボックス、ラジオボタンをクールにデザインできるjQueryプラグイン「iCheck.js」 2013年03月20日- iCheck jQuery plugin - highly customizable checkboxes and radio buttons チェックボックス、ラジオボタンをクールにデザインできるjQueryプラグイン「iCheck.js」。 一般的なチェックボックスを少... 続きを読む

一部のAndroidで、特定のフォーム要素をdisabledにすると、以降すべてdisabledに見える | x-fit - クロスフィット -

2013/03/19 25 users クロスフィット disabled x-fit Android

こんにちは。x-fitチーム・エバンジェリストの渡辺です。Android4.1のいくつかの端末で、特定のフォーム要素にdisabledを指定すると、それ以降のコンテンツ全体がdisabledとなってしまう現象が発生しますのでご紹介します。 確認された現象 HTML上のコンテンツにフォームを配置します。チェックボックスか、ラジオボタンのいずれかにdisabledを設定します。通常、disabled属... 続きを読む

チェックボックスとラジオボタンをスタイリングする為の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 仕組みは簡単に説明すると、見えない状態のラジオボタンを使い、そのオン・オフのチェック... 続きを読む