フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
お問い合せフォームをコーディングするための9つのTips | 株式会社LIG
こんにちは。 LIGフィリピン支社代表のせいとです。 お問い合わせフォームといえば、どんなサイトにも大体備わっているものですよね。 どのフォームも見た目は大体同じのため、構築自体は簡単かと思います。 ただし、システムが絡んだり、ユーザーに操作してもらったりと、けっこう重要なページであったりもします。 そこで今回は、ユーザーにとってより快適なフォームを実現するためにオススメしたいクールな技をお伝えしたいと思います。 また、今回の記事を書くにあたり、デモページを作成しました。 こちらのソースも見ながら読んでいただくと、よりわかりやすいかと思います。 ユーザーフレンドリーで構築もしやすいクールなお問い合せフォームをコーディングする9つのTips 1. ボタン系の要素は全て<button type=”submit”></button>を使う 「送信する」「入力画面に戻る」などの要素を作る際、タグは
かっこいいグリッドベースの入力フォームが作れる『Grid forms』が良さげ！ | バンクーバーのうぇぶ屋
フォームのレイアウトっていざ作ろうとすると結構迷う事多いですよね。フォームのデザインはもちろん、どうしても入力項目が多くならざるを得ない時なんかは、考える事は底知れずって感じです。 今日はそんな時にもしかしたら便利ってなるかもしれないJS／CSSフレームワークの一つ『Grid Forms』をご紹介させて頂きます！ フォームデザイン苦手ーって人も、ちょっとこの辺から触ってみても良いかもですね〜。 Grid Forms Grid FormsのGithubからファイルをダウンロードしてみると、既にサンプルファイルが用意されているので、それ見ながらちょっとお話した方がいいかもっすね。 サンプルを開くと以下のようなフォーム例が表示されると思います。 なんか紙の入力欄みたいですね。ネットに慣れて居ない人へのアプローチも、もしかしたら良さげかな？ 試しにちょっと作ってみましたが、とにかく楽。これが物の３
[素材有]CSS+画像で作るスマートフォン向けラジオボタン＆チェックボックス
こんにちは、霙(@xxmiz0rexx)です。 漂う今更感の中、スマートフォンでタップしやすい形のラジオボタンとチェックボックスを作る機会があったのでメモとして残しておきます。 ON/OFFの画像も作ったので、もし使いたい人がいたらご自由にダウンロードしてくださいませ :) 今回目指したのはこんなイメージ。 デフォルトのチェックボックス＆ラジオボタンを使ってみた結果、タップ範囲が狭く選択しづらかったので iOSアプリのように押しやすいUIにしたいと思い、CSS＆画像で作ってみました。 これなら横一列がタップ範囲なので不器用なわたしでも押し間違いをしたり「何これ押せない…！」なんてことが発生しにくく、非常に快適に使うことが出来ました♪ html <form id="infoForm"> <fieldset> <legend>Pray for rain</legend> <ul class="
![[素材有]CSS+画像で作るスマートフォン向けラジオボタン＆チェックボックス](https://cdn-ak-scissors.b.st-hatena.com/image/square/4114ba944fbc4ad7dce3f5e3929f4d782427892b/height=288;version=1;width=512/http%3A%2F%2Fwebimemo.com%2Fwp-content%2Fuploads%2Fe7be25fbc0824211d3f10797e07eeb33.png)
CSS 送信ボタン画像化や自動入力、選択時ハイライトを実装してフォームの使いやすさを向上させる方法 | Stronghold Archive
どうもこんばんは。Toshikuraです。前回から引き続き、フォーム関連の連続記事です。今回は【CSS 送信ボタン画像化や自動入力、選択時ハイライトを実装してフォームの使いやすさを向上させる方法】です。自動入力は一部ブラウザのみ対応ですがAmazon等では日常的に目にする機能ですので、可能な限り実装してみても良いかもしれませんね。 フォームの使いやすさやデザイン性を向上させる33の方法 これまで何回かに分けてWEBフォーム関連の記事を書いてきましたがフォームの使いやすさやデザイン性を向上させる33の方法としてまとめました。お問い合わせや資料請求等、フォームの最適化ができれば少なからず成果に直結するのではないかと思います。興味がございましたらぜひ。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
