タグ

2023年9月23日のブックマーク (8件)

  • JavaScriptデザインパターン入門 - Qiita

    1. はじめに JavaScriptデザインパターンは、JavaScriptを使ってプログラムを書くときによく出くわす問題を解決するためのガイドです。これらのパターンの背後にある考え方を理解することで、自分の問題に適用することができます。また、これらのパターンが自分のコードに役立つ場合を見つけることもできます。 2. モジュールパターン モジュールパターンは、JavaScriptのモジュールシステムの一部で、データを保護する方法を提供します。これは、モジュール内のプライベートなデータと動作を保護し、一方で公開APIを提供する方法です。これにより、プライベートとパブリックのアクセスレベルを持つ自己完結型のモジュールオブジェクトを作成することができます。 これは、JavaC++のような言語でクラスにアクセス修飾子を使用するのに似ています。 JavaScriptでは、クロージャを使用してモジュ

    JavaScriptデザインパターン入門 - Qiita
  • iOS のラバーバンドスクロールを Web で実装する方法 - Katashin .info

    2023年7月31日JavaScript,インタラクション,アニメーション,iOS普段 iPhone を使っている人でスクロールが端に到達した時に、少しだけ端を越えていき、その後跳ね返ってくる挙動を意識したことがある人はどれだけいるでしょうか?その挙動をどう実装するか考えたことはありますか? この iOS の挙動をラバーバンドスクロールやバウンススクロール、バウンスバックなどと呼びますが、ほとんどの人はあまり意識せずに iOS デバイスを使っていると思います。今では当たり前のこの挙動は、iOS の使っていて気持ちのいい UI に大きく寄与しています。 記事では、この挙動をラバーバンド効果と呼び、単純化した例を通じてその実装方法を解説します。 ラバーバンド効果の単純化した例 #ラバーバンド効果はスクロールだけではなく、移動可能なオブジェクトが動ける範囲を暗に示すために使えます。例えば、この

    iOS のラバーバンドスクロールを Web で実装する方法 - Katashin .info
  • Webアクセシビリティ入門

    2023年度リクルート エンジニアコース新人研修の講義資料です

    Webアクセシビリティ入門
  • CSSで実装できる、最新HTMLテクニック・スニペットまとめ 2023年9月版

    目まぐるしく変化するWebデザインの世界は、新しい技術やテクニックが毎日のように登場し、追いかけるだけでも大変です。 「Webデザインの最新テクニックを知りたいけど、時間が足りない」という方へ。 この記事では、話題になった人気テクニックを中心に集めているので、効果的にWeb注目ニュースをインプットできます。 しかも、CSSのみで表現できるスニペット多数で、コピペで利用できます。 今後のプロジェクトに魅力的なWebテクニックを活用してみましょう。 CSSで実装できる、最新HTMLテクニック・スニペットまとめ iPhone 15 Pro紹介ページのCTAボタン コンテナスタイルクエリとスクロール駆動型アニメーションを使えば、JavaScriptゼロでAppleスタイルのダイナミックなCTAを作成できます。 See the Pen Apple Style CTA Reveal with CSS

    CSSで実装できる、最新HTMLテクニック・スニペットまとめ 2023年9月版
  • 知らないと損する最新Web&デザインツール、素材55選

    「いつもやってるこの作業、実はちょっと面倒」 「アイデアを形にできるツールや素材が欲しい」 「クリエイティブの生産性を上げたい」 そんな人に朗報です。 このまとめでは、ここ最近公開された便利なツールや素材の中から、「当に使えるもの」だけ55個を厳選。 カテゴリ別に整理しているので、自分に合った新しいツールを見つけ、作業をもっと快適にしてみましょう。

    知らないと損する最新Web&デザインツール、素材55選
  • CSS Loaders: A collection of more than 600 loading animations

    The Biggest Collection of Loading Animations Over 600+ CSS-only loaders made using a single element <div class="loader"></div> Don't know which loader to use? Here is one for you 👇 Click the loader to copy the CSS Get another CSS Loader

    CSS Loaders: A collection of more than 600 loading animations
  • お問い合わせフォーム最適化。改善しておきたい16の項目 | BUILD Journal

    お問い合わせフォームの入力を完遂し、送信してもらうために改善しておきたい16のポイントを紹介します。サイトリニューアルの要望でよくある「お問い合わせ数を増やしたい」に応えるために最低限おさえておきたい情報をまとめました。ぜひ参考にしてみてください。 問い合わせ時に必要な項目のみに限定する 「この項目は当に必要か?」いつも疑うようにしています。お問い合わせ時に必要な情報なのか?その後の打ち合わせで電話番号や住所など聞くことはできないのか?不要な項目を削除し、当に必要な情報のみに限定することでユーザーも入力しやすくなります。 郵送で資料を送る資料請求フォームは住所は必要です。しかし、質問などメールだけでのやりとりのためのお問い合わせフォームであれば住所の情報は不要なので削除します。クライアントと相談しながら常に減らす意識は持つようにし、ユーザーの手間を省くようにします。 入力欄の数は最低限

    お問い合わせフォーム最適化。改善しておきたい16の項目 | BUILD Journal
    jytech
    jytech 2023/09/23
  • 【WCAG】ウェブアクセシビリティとは?対応方法を徹底解説! | 東京のホームページ制作 / WEB制作会社 BRISK

    ウェブアクセシビリティという言葉はご存知でしょうか? 「アクセシビリティ」という単語自体の意味は、「近づきやすさ」や「アクセスできるようにすること」です。 ウェブアクセシビリティにおいての「アクセシビリティ」の意味は、「利用できるようにすること」という意味になります。 つまり、「どのような人でもサイトを利用できるようにする」ということが、ウェブアクセシビリティ対応の目的になります。 今回は、ウェブアクセシビリティについての解説と、実際の対応方法を解説していきます。 ぜひ最後までご覧ください! デジタル庁のウェブアクセシビリティ導入ガイドブックでは以下のように定義されています。 ウェブアクセシビリティは、利用者の障害の有無やその程度、年齢や利用環境にかかわらず、ウェブで提供されている情報やサービスを利用できること、またはその到達度を意味しています。 引用元:ウェブアクセシビリティ導入ガイドブ

    【WCAG】ウェブアクセシビリティとは?対応方法を徹底解説! | 東京のホームページ制作 / WEB制作会社 BRISK