CSSでボタンを実装するときに記述しておくと便利なスタイルのまとめ
Webサイトやスマホアプリの実装に、ボタンは欠かせない要素の一つです。そんなボタンの実装に設定しておくと便利なCSSのスタイルを紹介します。 スマホでボタンをタップした際にズームなどの誤動作が起きないようにするCSS、ボタンのテキストが選択されてハイライトにならないようにするCSS、フォーカス時のアウトラインをより見やすくするCSS、ボタンの論理サイズを設定するCSSなど、デフォルトのスタイルとして設定しておくと便利です。 CSS Button Styles You Might Not Know by David Bushell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スマホでボタンをタップした際の誤動作を防止 ボタンのテキストの意図しない選択 ファイル選択のボタン ボタンをフォーカス時の視覚的なアウトライン
📝数値という理由だけで input[type="number"] 要素を使わない｜たかもそ／Web Creator.
フォームに入力する値といえば、電話番号や年齢、クレジットカード番号など様々です。しかし、数字を使っているからといってむやみに <input type="number"> 要素を使うと問題が起きます。 数字であって数値でないWHATWG の仕様には次のように書かれています。 The type=number state is not appropriate for input that happens to only consist of numbers but isn't strictly speaking a number. For example, it would be inappropriate for credit card numbers or US postal codes. A simple way of determining whether to use type=num
![📝数値という理由だけで input[type="number"] 要素を使わない｜たかもそ／Web Creator.](https://cdn-ak-scissors.b.st-hatena.com/image/square/fabaee500541121aedd5673e2ef24a6ad3fc46aa/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F20987625%2Frectangle_large_type_2_6362b402374299fdb8316dd17855d5fb.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)
「え？それそんなかかるの？」簡単そうに見えて案外時間のかかるWebサイト上のJavaScriptあるある仕様8選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
多！ そのため、仕様の洗い出しが不十分になりがちになる、という点で厄介です。 ただし、今はSwiper, Slickといった優秀なプラグインがあります。こいつらは大抵の仕様は満たしてくれますので、積極的に使うと良いと思います。 参考 Swiper Slick フィットスクロール 厄介度：★★★ 紙芝居スクロールなどといったりもします。 海外のオサレなブランディングサイトや、ランディングページなんかでたまに見かけますね。 カッコイイ！うちもこんなんやりたい！と思うかもしれません。がしかし…… イメージ ハマりポイント スクロールに関する他の機能実装 これを実装する場合ブラウザにデフォで備わっているスクロールは使わず、別の方法（CSSのtransformとJSを組み合わせるなど）で実装することになるかと思います。 するとまず、スクロールイベントが取れないんですね。 そのため、スクロールに合わせ
入力フォームのプレースホルダーを使ってはいけない
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
WordPress管理画面でDB Cache Reloadedエラーが出た時の対処法 - cocowa
WordPressがインストールされているWebサイトやブログの表示速度を早くするために便利なのが、キャッシュプラグインです。 そのうちの1つである、DB Cache Reloaded Fixが非常にお手軽に導入できるので、気に入っています。 ただ、DB Cache Reloaded Fixプラグインを使っていると、時々こんなエラーが表示されます。 ここに表示されているメッセージは以下のとおりです。 DB Cache Reloaded エラー: DBモジュール(wpdbクラス)はロードされませんでした。オプションページでキャッシュを無効にし (忘れずに設定を保存してください)、ふたたび有効にしてみてください。それでも解決しない場合は、手動アップグレードするためにFAQをチェックしてみてください。 なんか、赤い画面が出て怖いと思っている方、安心してください。すぐに解決できます。 赤いエラーを
WordPressを高速化するプラグイン「DB Cache Reloaded Fix」 | TechMemo
Tweet TweetWordPressでサイトを作っていると重い！と感じることありますよね。重くなる要因の一つに、データベースへのクエリ（データベースへアクセスする命令)があります。 WordPressは動的にページを作成するときに、頻繁にデータベースにアクセスします。クエリ数が多いと、データベースへの負荷が大きくなりパフォーマンスに影響します。 データベースへのクエリ数を抑えるのに役立つのが「DB Cache Reloaded Fix」です。 DB Cache Reloaded Fix は、データベースのクエリの出力結果など、 データベースとのやり取りをキャッシュしてクエリ数を減らす効果があります。データベースとのクエリ数は減りますが、動作自体は動的ページの様に動作します。クエリ数を減らしますので、記事が多くなってきたり、アクセス数が集中したときにパフォーマンスの低下を抑える効果がある
WordPressのテーマ制作者は必携！記事のさまざまなパターンが簡単にテストできる - WP Test
WordPressのテーマで記事がどのように表示されるか、テキスト記事、画像コンテンツ、動画コンテンツなどが正常に表示されるかテストできるWP Testを紹介します。 普通に想定されるパターンだけでなく、タイトルが異常に長い、コメントがたくさんついた、カテゴリが無い、カテゴリが異常にたくさんなど、イジワルなパターンも用意されています。 WP Test ダウンロードできるテストデータはXMLフォーマットで、WordPressに直接インポートできます。画像などはuploadsフォルダでサーバーにアップします。 どんなパターンが用意されているかは、WP Testのデータを読み込ませたデモで見ることができます。たくさんあるデモページから一部をご紹介。
ユーザーに届かない登録確認メールを半減させるプラグイン「mailcheck.js」
By Helga Weber ユーザー登録やアカウント作成を行ったあと、登録したメールアドレス宛に仮登録メールや最終確認メールが届く流れになっているシステムはあちこちにありますが、登録時にメールアドレスを間違えてしまうとこのメールが届かず、「もう面倒だからいいや……」と諦めてしまう人が出てしまいます。サービス提供者にとって大きな痛手であるこの「確認メール不達」という事態を減らすため作られたJavaScriptライブラリとjQuery用プラグインが「mailcheck.js」です。 Kicksend/mailcheck · GitHub https://github.com/Kicksend/mailcheck How we decreased sign up confirmation email bounces by 50% - The Kicksend Blog http://blog.
WordPress 3.3で未対応の｢Custom Field GUI Utility｣を対応する方法
先日のWordPress 3.3へのバージョンアップにともなって、非常に便利に使わせていただいているプラグイン「Custom Field GUI Utility」が利用できなくなってしまいました･･･。 現時点ではオフィシャルでも未対応とされていて、今後の対応についてもどうなるのかわからない状態です。 とはいえ、使えないままなのも困ってしまうし･･･ってことでむりやり使えるようにしてみました。 ちょちょっといじくるのは、 wp-content → plugins → custom-field-gui-utility の中にある、cfg-utility.phpというファイルです。 このファイルの72行目あたりに add_action ('simple_edit_form', array ('cfg_utility_class', 'insert_gui')); という記述があります。 この部
リターン（Enterキー）でフォームを送信しない方法
フォームのテキスト入力中にうっかりリターン（Enterキー）を押してしまい、中途半端なフォームが送信されてしまったという経験をした人は結構多いのではないかと思います。 ということで、リターン（Enterキー）でフォームを送信しないようにする方法を紹介します。この記事の投稿時点でのGoogle Chrome・Firefoxの最新版とIE9で同じ動作になることを確認しています。 １．リターンでフォームが送信される原因 次のように、type属性が「text」のinput要素、いわゆるテキストフィールドが含まれるフォームで、テキストフィールドがアクティブなときにリターンを押すとフォームが送信されてしまいます。 <form action="hoge.cgi"> <input type="text" name="foo" /> <input type="text" name="bar" /> <inp
流入ページでの不用意なリンクは、離脱を後押ししてしまう (ユーザビリティ実践メモ)
検索エンジンから情報サイトに流入してくるユーザは、流入ページの情報が自分の求めるものだったとしても、自分と無関係なリンクがあるだけで離脱してしまう場合があります。 ある教育系サイトにて、「高校」受験情報に興味のあるユーザに対してユーザ行動観察調査を行ったところ、以下のような行動が見られました。 【全体の動き（図1）】� 検索エンジンから流入し、記事の続きを読もうとしてサイト登録を要求されたユーザは、記事ページ(流入したページ)に戻って離脱した。 【離脱直前の個別ページでの視線の流れ（図2）】� 記事ページに戻ってきたユーザは、右カラムにある「中学」受験の広告と、中学受験・高校受験・大学受験と情報が並んだテキストリンクを見て、離脱した。 ＜考察＞ 検索エンジンから流入してくるユーザは、「同様の情報は他サイトでも見ることができる」と考えているため、わざわざ自分からサイトの全体像を把握しようとは
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UIの使いづらさにイラッとする！これがフォームで使いにくい最悪なユーザインターフェイスだ -User Inyerface
bbfriend.net
ブログが壊れたのは WordPress プラグイン DB Cache Reloaded Fix が原因でした。…と垢BANの愉快な仲間たち。