CSSでボタンを実装するときに記述しておくと便利なスタイルのまとめ
Webサイトやスマホアプリの実装に、ボタンは欠かせない要素の一つです。そんなボタンの実装に設定しておくと便利なCSSのスタイルを紹介します。 スマホでボタンをタップした際にズームなどの誤動作が起きないようにするCSS、ボタンのテキストが選択されてハイライトにならないようにするCSS、フォーカス時のアウトラインをより見やすくするCSS、ボタンの論理サイズを設定するCSSなど、デフォルトのスタイルとして設定しておくと便利です。 CSS Button Styles You Might Not Know by David Bushell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スマホでボタンをタップした際の誤動作を防止 ボタンのテキストの意図しない選択 ファイル選択のボタン ボタンをフォーカス時の視覚的なアウトライン
transitionをかけたホバーアクションのopacityがちらつく問題を解消する | AndHA Blog
transitionをかけたホバーアクションのopacityがちらつく問題を解消する 公開日 : 2022.08.22 最終更新日 : 2022.10.05 コーディング こんにちは！AndHAコーディング部です。 突然ですが新人コーダーさん！コーディング勉強中の皆さん！ こんな不具合に遭遇したことありませんか？ 「transitionをかけたホバーアクションのopacityがちらつく！」 新人コーダーの私も、何かと悩まされていました… そこで今回は、この問題をどうにか解消していきたいと思います。 ちらつく問題についてアニメーションがちらつく問題Webサイトの制作をしていると、避けて通れないボタンやリンクなどのパーツ。ホバーしたときの動きを指定することがほとんどですよね。 中でも、「opacity: 0.7」などと透過を指定したうえで、「transition: .3s」などとふわっとアニメ
WebサイトにSNSシェアボタンを設置する方法のまとめ - Qiita
ソーシャルシェアボタンの設置方法のまとめです。GoogleアナリティクスによるSNSボタン押下数の効果測定やFacebookでキャッシュクリアしないと正しく出なかったりする件の対処法、ogpタグなど、いくつかハマったものの解決方法も併せて記載しています。 ■ ソーシャルボタンの表示サンプル ■ シェアしたときの表示サンプル（google+の例） 1.対応しているSNS 本記事で対応しているSNSは以下です。 Facebook（※いいねボタンではなくシェアボタンです） Twitter Line Google+ はてブ 2.シェアボタンを実装する前にやること シェアボタンを実装する前に、以下の内容を検討して下さい。 メタタグやogpタグが適切に記載されているか？ → ないと魅力半減です。 GoogleアナリティクスでKPI測定するか？ → シェアボタン押された回数計測できます 2.1 メタタグ
[JS] スマホでclickイベントより早くユーザーのタップ動作に反応する - YoheiM .NET
こんにちは、@yoheiMuneです。 最近スマホでのWebアプリを開発することが多いのですが、タップへの反応速度を上げるこんな方法はどうかなぁと考えたので、ブログに書きたいと思います。 スマホでタップにより速く反応したい スマホ用Webアプリの開発で、ユーザーがタップした際にJSを起動したい（例えばダイアログを表示したいなど）という要件があるとします。 その場合に、タップ対象の要素のonclickにイベントをバインドして処理をすることが多いかと思います。 こんな感じ。 var btn = document.getElementById('someBtn'); btn.addEventListener('click', function() { // タップされた際の処理 }); でもこれだと確かに反応するのですが、ユーザーがタップしてからイベントが発火するまでに時間が空いてしまい、遅いの
![[JS] スマホでclickイベントより早くユーザーのタップ動作に反応する - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/cccc0e0910f5e6c670ca8c44cd50ffd6640ce4ae/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F216.jpg)
inputに背景が勝手につくCSSの解決法
iPhoneの時だけ、どうしても余計な背景が出てきてしまう状況がありました。 input要素のボタンをテキストに変更した時にハマったことと解決策をメモしておきます。 この事象についてキーワードを並べると、 CSSを確認しても背景に無いもかかってない。 importantも効かない。 iOS SimulatorでCSS全部確認しても、全く背景色の要素が存在しない。 Androidだと背景は出てこない大丈夫。 完全にはまりました。 このように、inputに背景がでてきてしまいます。 iPhoneの時だけです。Androidはの背景は#fffで白くなっている様子。 これはいわゆるCSSのリセットで解決できました。
【iOS7】ホームボタンが壊れてしまった！ときの対処法 - isuta（イスタ） -私の“好き”にウソをつかない。-
【東京イベント 5月18日～19日】池袋で超お得な「アウトレットフェス」、代々木公園で「沖縄イベント」が開催
jQuery.socialbuttonにXSS脆弱性があるのでアップデートしましょう:phpspot開発日誌
jQuery.socialbutton プラグインを作ったよ | アイトランス株式会社 複数のニュースサイトで外部サイトにシェアするボタンの実装方法に問題がある件 - 金利0無利息キャッシング ? キャッシングできます - subtech jQuery.socialbuttonのXSS脆弱性が4/29に発見されました。 連休中ということでエントリ起こしが遅くなってしまいました。申し訳ありません！ orz 4/30に新しく公開されたv.1.7.2 以降であれば脆弱性が修正されているということで、まだ対応していない方はアップデートしましょう。 尚、アップデートの際は以下の点にご注意下さい。 <script src="/path/to/jquery.socialplugin.js"></script> 等として使っている場合は新版を上書きしても対応は未完全でブラウザにもキャッシュされている恐れが
[CSS]iPhoneでsubmitボタンのテキストがずれた時の対応方法
submitボタンのスタイルがiPhone(Mobile Safari)で、テキストがずれたり、「border-radius」の角丸が期待より丸くなってしまった際の対応方法を紹介します。 Styling Submit Buttons for Mobile Safari デモページ キャプチャの元画像：協力（@sparrowSeven） この現象はデスクトップ用のブラウザ（Safari, Firefox）では起きませんでした。また、iPhoneのシミュレーター（iBBDemo2）でも確認できませんでした。iPhone4固有の現象のようです。 原因と思われるのはpaddingの値が正常に適用されていないような感じで、未対応時、対応時のスタイルシートは下記の通りです。 未対応時のスタイル HTML HTMLは非常にシンプルです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://ideahacker.net/2014/02/15/7599/
サイトにFacebookのいいねボタンとOGPを導入してみる – misc