ホーム >>
スポットTIPS(クリエイターに役立つTIPS/リファレンス検索) >>
CSS・HTML・ java_script/jQuery関連のリファレンス >>
フォーム系 >>
入力補助
(58)
CSS・HTML・ java_script/jQuery関連のリファレンス >>
フォーム系 >>
入力補助
(58)
説明
Webサイトに「サイト内検索」ってよく見かけると思うですが、今回はその検索フォームをCSSでデザインする際のサンプルをいくつか作ってみましたので簡単な解説付きで紹介したいと思います。
下記の情報はnccのクローラーが 2014-5-1 17:50に保存したキャッシュです。
最新版でない場合があるため、情報は
最新のページ
を参照してください。
説明
ネタ的なやつですが、殺風景なフォームを華麗に装飾することができるjQueryプラグインfancyInputです。 もしかしたらコンバージョン率が上がるかもしれません。
下記の情報はnccのクローラーが 2014-5-1 19:17に保存したキャッシュです。
最新版でない場合があるため、情報は
最新のページ
を参照してください。
説明
ステップ分けできるjava_script「Smart Wizard」
申込フォームなどが長くなるとき、ステップごとにわけることで離脱率を下げられる場合があります。 jQueryプラグインの「SmartWizard」を使用することで、これを実現可能です。
下記の情報はnccのクローラーが 2014-4-15 22:46に保存したキャッシュです。
最新版でない場合があるため、情報は
最新のページ
を参照してください。
説明
ふと思いついたのでメモ。既出な気がするけど気にしない。
こんな感じにアニメーションしてくれるチェックボックスを作ってみます。
IE9以上で動作。スマホ用として使っていけるはず…。
実装手順
input要素を非表示に
擬似要素とCSS3を使ってチェックボックスのデザインを作る
擬似要素と擬似セレクタとCSS3を使ってアニメーションさせる
下記の情報はnccのクローラーが 2014-5-6 13:10に保存したキャッシュです。
最新版でない場合があるため、情報は
最新のページ
を参照してください。
説明
ブラウザ標準のフォームUI(チェックボックスやセレクトボックス)のデザインは、標準ゆえに「フォーム」だと分かりやすいデザインですが、どうしてもサイトカラーに合わずに野暮ったい印象になるときがあります。そういった場合にデザインを自由に変更できるといいのですが、フォームUIへのスタイル適用は制限があり、自由に変更できません。
そういったときに、実際のフォームUIを隠し独自のフォームUIを表示し、それに対して行ったアクションを隠してあるフォームUIに反映させる手法があります(ここでは擬似フォームUIと呼びます)。
本コラムでは主にスマートフォン向けにCSS3とjava_script(jQuery)を使い、画像を使わない擬似フォームUIの作り方を4回に分けて紹介していきます。
下記の情報はnccのクローラーが 2014-5-1 18:35に保存したキャッシュです。
最新版でない場合があるため、情報は
最新のページ
を参照してください。
説明
フォームにデザインを加えてかつバリデーションもつけてしまうjQueryプラグインです。 Formly - The form glamorizer for jQueryを利用することで3種類のテイストの異なるデザインを簡単に適用可能です。
説明
ブログの記事タイトルやサイドバーのタイトルなどで使えるオーソドックスな見出し(hタグ)のデザインサンプル集です。見出しにはCSS3や画像を使っていないのでシンプルですが、一応よく使うので、メモとしてエントリーしておきました。
※追記6/24 HTMLのマークアップをpからh3に置き換えました。
説明
ブログに載せる画像は枠を付けてあげると綺麗に見えます。
ちょっとしたひと手間で画像が綺麗に見えるなら…と思って画像ソフトで枠作りしました。
でも、意外と枠作りって面倒くさかった…。みたいな。
そんなあなたにお勧めの、超簡単・超適当なCSS技をご紹介します。
この技を使えば画像ソフトで枠を付けなくてもOK!うまく使えば、ブログに貼り付ける画像に常に枠を付ける事もできます。また、外す事も容易です。
まずは下の画像をご覧くださいませ。
execution time : 0.465 sec