クリエイターに役立つTIPS/リファレンス検索

検索フォームをCSSでデザインするサンプル集

最終更新日 2014-4-11 10:02

フォーム系   入力補助   CSS・HTML・ java_script/jQuery関連のリファレンス

説明
Webサイトに「サイト内検索」ってよく見かけると思うですが、今回はその検索フォームをCSSでデザインする際のサンプルをいくつか作ってみましたので簡単な解説付きで紹介したいと思います。

リンク切れ報告   |  

下記の情報はnccのクローラーが 2014-5-1 17:50に保存したキャッシュです。
最新版でない場合があるため、情報は 最新のページ を参照してください。

殺風景な入力フォームを彩るファンシーなjQueryプラグイン「fancyInput」

java_script関連   jQuery系   入力補助   フォーム系   CSS・HTML・ java_script/jQuery関連のリファレンス

説明
ネタ的なやつですが、殺風景なフォームを華麗に装飾することができるjQueryプラグインfancyInputです。 もしかしたらコンバージョン率が上がるかもしれません。

リンク切れ報告   |  

下記の情報はnccのクローラーが 2014-5-1 19:17に保存したキャッシュです。
最新版でない場合があるため、情報は 最新のページ を参照してください。

申込フォームなどが長くなるとき、ステップ分けできるjava_script「Smart Wizard」

jQuery系   入力補助   マルチセレクトボックス   セレクトボックス   フォーム系   CSS・HTML・ java_script/jQuery関連のリファレンス   java_script関連

説明
ステップ分けできるjava_script「Smart Wizard」
申込フォームなどが長くなるとき、ステップごとにわけることで離脱率を下げられる場合があります。 jQueryプラグインの「SmartWizard」を使用することで、これを実現可能です。

リンク切れ報告   |  

下記の情報はnccのクローラーが 2014-4-15 22:46に保存したキャッシュです。
最新版でない場合があるため、情報は 最新のページ を参照してください。

画像を使わずCSSだけでアニメーションするチェックボックスを作ってみるTips

見出し   チェックボックス・ラジオボタン系   入力補助   CSS・HTML・ java_script/jQuery関連のリファレンス

説明
ふと思いついたのでメモ。既出な気がするけど気にしない。
こんな感じにアニメーションしてくれるチェックボックスを作ってみます。
IE9以上で動作。スマホ用として使っていけるはず…。

実装手順

input要素を非表示に
擬似要素とCSS3を使ってチェックボックスのデザインを作る
擬似要素と擬似セレクタとCSS3を使ってアニメーションさせる

リンク切れ報告   |  

下記の情報はnccのクローラーが 2014-5-6 13:10に保存したキャッシュです。
最新版でない場合があるため、情報は 最新のページ を参照してください。

画像を使わない擬似フォームUIの作り方 第01回 「CSS3を使った装飾」

CSS・HTML・ java_script/jQuery関連のリファレンス   フォーム系   チェックボックス・ラジオボタン系   セレクトボックス   入力補助

説明
ブラウザ標準のフォームUI（チェックボックスやセレクトボックス）のデザインは、標準ゆえに「フォーム」だと分かりやすいデザインですが、どうしてもサイトカラーに合わずに野暮ったい印象になるときがあります。そういった場合にデザインを自由に変更できるといいのですが、フォームUIへのスタイル適用は制限があり、自由に変更できません。

そういったときに、実際のフォームUIを隠し独自のフォームUIを表示し、それに対して行ったアクションを隠してあるフォームUIに反映させる手法があります（ここでは擬似フォームUIと呼びます）。

本コラムでは主にスマートフォン向けにCSS3とjava_script（jQuery）を使い、画像を使わない擬似フォームUIの作り方を4回に分けて紹介していきます。

リンク切れ報告   |  

下記の情報はnccのクローラーが 2014-5-1 18:35に保存したキャッシュです。
最新版でない場合があるため、情報は 最新のページ を参照してください。

綺麗なデザインでフォームを彩るバリデーション付きjQueryプラグイン「Formly」

java_script関連   jQuery系   入力補助   フォーム系   CSS・HTML・ java_script/jQuery関連のリファレンス

説明
フォームにデザインを加えてかつバリデーションもつけてしまうjQueryプラグインです。 Formly - The form glamorizer for jQueryを利用することで3種類のテイストの異なるデザインを簡単に適用可能です。

リンク切れ報告   |  

見出しデザインの参考にしたい CSSで作るhタグのサンプル集

最終更新日 2010-11-30 15:36

見出し   入力補助

説明
ブログの記事タイトルやサイドバーのタイトルなどで使えるオーソドックスな見出し（hタグ）のデザインサンプル集です。見出しにはCSS3や画像を使っていないのでシンプルですが、一応よく使うので、メモとしてエントリーしておきました。
※追記6/24 HTMLのマークアップをpからh3に置き換えました。

リンク切れ報告   |  

超簡単！CSSで画像にシンプルな枠をつける方法

最終更新日 2014-4-12 17:48

罫線   入力補助   CSS・HTML・ java_script/jQuery関連のリファレンス

説明
ブログに載せる画像は枠を付けてあげると綺麗に見えます。
ちょっとしたひと手間で画像が綺麗に見えるなら…と思って画像ソフトで枠作りしました。
でも、意外と枠作りって面倒くさかった…。みたいな。

そんなあなたにお勧めの、超簡単・超適当なCSS技をご紹介します。
この技を使えば画像ソフトで枠を付けなくてもOK！うまく使えば、ブログに貼り付ける画像に常に枠を付ける事もできます。また、外す事も容易です。
まずは下の画像をご覧くださいませ。

リンク切れ報告   |