【第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を加えるだけで、さまざまなデザインのチェックボックスとラジオボタンが実装できるスタイルシートを紹介します。 ...記事の続きを読む 続きを読む

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

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

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

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

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

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

さりげないアニメーションがいい感じ、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です。まずはすべて載せて、後で個別... 続きを読む

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

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

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

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

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

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

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

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

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

美しいフォームデザインを実装する事が可能な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... 続きを読む

CSSとJavaScriptでチェックボックスなどをグラフィカルにする「formStyle」 - GIGAZINE

2006/10/12 288 users GIGAZINE Netscape Opera CSS 動作例

IE7、Firefox、Netscape、Operaで動作するグラフィカルなイメージ画像を使ったチェックボックスとラジオボタンです。通常のチェックボックスなどではおもしろみがないという場合に使うとかなり大きなインパクトがあります。 コードのダウンロードと実際の動作例は以下から。 Styled Checkboxes and Styled Radio Buttons | formStyle 動作例はこ... 続きを読む