タグ

ブックマーク / www.webdesignleaves.com (4)

  • Google reCAPTCHA の使い方(v2/v3)

    Google reCAPTCHA の使い方(v2/v3) reCAPTCHA は Google が提供する CAPTCHA(キャプチャ)認証システムで、現在 v2 と v3 が利用できます。以下はそれぞれのバージョンの基的な使い方や設定方法(HTML の実装方法と PHP を使った検証方法)の覚書です。 reCAPTCHA は無料で利用できますが、1秒間に1000回(1ヶ月に100万回)以上のアクセスがある場合は reCAPTCHA Enterprise を使用するか、フォームに登録して許可を取得する必要があるようです。 reCAPTCHA 関連ページ 公式ページ: https://developers.google.com/recaptcha reCAPTCHA v3: https://www.google.com/recaptcha/intro/v3.html Developer's

  • jQuery 不要 スライダープラグイン Swiper の使い方

    スライダープラグイン Swiper の使い方 jQuery 不要でレスポンシブ及びタッチデバイス(スマホやタブレット)対応のスライダープラグイン Swiper の基的な設定方法や使い方についての解説(覚書)です。 バージョン 7 では、スライダーのメインコンテナに指定するクラスが swiper-container から swiper に変更になったため、以下はバージョン 7 に合わせて書き換えました(実質的にはメインコンテナのクラスの変更と若干のオプションの追加だけです)。 また、2022年3月時点での最新版はバージョン 8 です。バージョン 7 と 8 では Swiper Angular でのイベントの処理方法を除いて大きな変更はないようです(バージョン 7 から 8 へのアップグレード)。 このページのサンプルはバージョン 7 でもバージョン 8 でも同様に動作します(このページでは

  • スクリーンサイズに合わせてフォントサイズを変更 | Web Design Leaves

    <section> <h1 class="title">Media Queries</h1> <p class="main-text">Animi sint corrupti ipsum sunt...</p> <section> <h2 class="title">Break Point</h2> <p class="main-text">Vitae, nam, aperiam pariatur dicta officia...</p> <p class="main-text">Possimus, error, a id totam cumque fugiat ...</p> </section> <section> <h2 class="title">Grid System</h2> <p class="main-text">Sapiente dolorum impedit commo

    batta
    batta 2014/10/03
    css
  • 背景画像を使ったパララックス | Web Design Leaves

    参考にさせていただいたサイト: 「HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基CSSを使ったパララックス jQuery を使用しないで CSS で単純なパララックス(背景画像を固定して表示)を実現する方法。 各 div 要素(#first, #second, #third, #end)に背景画像(960 x 800)を用意 「background-attachment プロパティ」の値を「fixed」に指定(背景画像はブラウザの表示領域に対して固定される) 「background-position プロパティ」の水平位置の値を「50%」または「center」に指定 「background-position プロパティ」の垂直位置の値を「0(0%)」または「top」に指定(値の指定が1つだけの場合、水平位置のみに適用され、垂直位置は50

  • 1