JavaScriptライブラリ キャビネット（Cabinet） ウェブアクセシビリティに対応した スライダー・カルーセルUI スライド、フェード、自動再生、ドラッグ操作、レスポンシブ、キーボード操作・スクリーンリーダーに対応しています。
webdesignに関するasiamothのブックマーク (230)
-
asiamoth 2024/08/09
-
-
レスポンシブデザインで Tailwind CSS と CSS custom properties を併用する体験が良過ぎる
Tailwind CSS での開発体験が個人的に最高すぎて、最近はどんなWebサイトの実装でも利用しています。 CSS custom properties を併用することもあり、そのときに嬉しいことを紹介します。 Next.js を使っている前提でコード・ファイル名を例示しますが、他でも扱えると思います。 CSS custom properties 併用したい場面 スマートフォンでは、コンテンツを端から 16px の位置に置く パソコンでは、コンテンツ幅を 960px にし中央寄せにする こんなデザイン仕様、レスポンシブデザインだとよく出きます。 tailwind.config.js でテーマを拡張して実装すると以下のようになります。 import type { Config } from 'tailwindcss'; export default { theme: { extend: {
-
-
令和時代のページネーションを考える (REST API編) - Sweet Escape
今回はバックエンドAPIでページネーションをどうやるかについての話なので、よくある無限スクロールUIのようなフロントエンド側の実装に関する話はしない。あくまでもAPI、もっと言えばRESTfulなAPIのリクエスト・レスポンスにおけるページネーションの話。 本気で深く考えるというよりざっくり検討したときの話です。 はじめに REST APIを実装するにあたってリスト系のAPIを提供する場合に必須といっても過言ではないのがページネーション。大量のリソースをレスポンスする場合にそれらを一気に返してしまうことは応答速度、転送量、クライアントサイドでの扱いづらさなどなどに繋がるので必須と言える。 最近、新たなAPIを開発するにあたってページネーションをする必要があったこともあり、今回はこのページネーションをどうやって提供するか整理して改めて検討してみた。 前提 TypeScript Nest.js
-
LCPだけでは画像最適化に不向き、新しい指標が必要な理由
圧縮率だけで選んだら AVIFかJPEG XLの圧倒的な勝ちになる AVIF はプログレッシブレンダリング対応しておらず、 画像が100%ダウンロードされた後にポン！と表示されるので、UXが悪化する JPEG XLは理想ですが、まだ対応ブラウザがありません[3:1] WebP2は 開発中[4:1] この問題が分かる次の39秒動画をご覧ください LCPの解決編: 新しい指標 🚀 現在、Core Web VitalsのLCPは描画が終わったタイミングしか計ってないので、 LCP上 AVIFやWebPが素晴らしいスコアになるが、UX観点だと宜しくない体験になります。 この指標は早めに定義をし直さないと、現行のLCPが広まった後だと業界全体の取り返しがつかない可能性があるので、新しい指標を定義し、W3CのWICGにプロポーザルを3つ提出しました 💪 その中身を翻訳・解説します。 （日本語ネイテ
-
font-familyについて本気で考えてみた - Qiita
今年はmacOSのアップデートによりヒラギノが動かなくなったり、 来年初頭にはWindows7がサポート終了、Edgeのブラウザエンジン変更など、 エンドユーザーの環境を考えなければならない節目の時です。 そこでいつもコピペで済ましているfont-familyについて1から考え直してみます。 全部読もうとしている人はスクロールバーを見てから考えてください。 結果 コピペユーザーのために先に結果を記載します。 ブログ等に転載する場合はこのページのURLぐらい貼ってください。 @font-face { font-family: "Original Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 100; } @font-face { font-family: "Original Yu Gothic"; src: local("Y
-
今更だけど、ウェブアクセシビリティについてまとめてみた（概要と手法） - Qiita
NTTコミュニケーションズ Advent Calendar 2018の16日目です。 はじめに PWAネタについて書きたい人生だった。 気づいたらウェブアクセシビリティについて書いていた。 目的 気になって調べてみたら少し知見が溜まったので、メモついでに共有しようかと思い、今回記事にしました。 記事内容 ウェブアクセシビリティ概要 概要 重要性 近年の動向 手法 ヒューマンリーダビリティに関する手法 マシンリーダビリティに関する手法 ウェブアクセシビリティ概要 ウェブアクセシビリティって何？ WAICのホームページより抜粋 一般にアクセシビリティとは、アクセスのしやすさを意味します。転じて、製品やサービスの利用しやすさという意味でも使われます。 ウェブのアクセシビリティを言い表す言葉がウェブアクセシビリティです。ウェブコンテンツ、より具体的にはウェブページにある情報や機能の利用しやすさを意
-
国税庁Webサイト、全URL変更で混乱 サイト内検索も役立たず、「無限ループ」状態に
国税庁のWebサイトが3月31日にリニューアルされ、トップページを除くほぼすべてのURLが変わった。旧URLにアクセスすると、国税庁のトップページにリダイレクトされる仕様だ。トップページにはYahoo！検索を使ったサイト内検索機能があるが、4月2日午後3時現在、これで検索しても過去のURLがヒットし、トップページにリダイレクトされてしまうため、「トップページの無限ループ」「目的のページにたどり着けない」と混乱が起きている。 国税庁広報広聴室は「検索が現状、機能していない状態だ」と認め、検索エンジン側にURL更新のリクエストを出しているという。検索エンジンが対応するまでは、トップページからメニューをたどって目的のページを探してほしいと呼び掛けている。 同庁は今回のリニューアルに当たり、サイト内の情報分類を再整理。2015年に内閣官房のIT総合戦略室が定めた政府共通のWebサイトの構築ルールに
-
メールアドレスの確認フィールドをなくすべき理由
UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザのために日々奮闘しています。 メールアドレスは、もっとも間違いやすいフォームフィールドの１つです。 入力データにはさまざまな種類の文字による長い文字列が含まれているため、間違って入力してしまいがちです。これにより、ユーザーが間違ったメールアドレスを送信する可能性があるのです。 メールアドレス確認の問題 デザイナーは、メールアドレスの確認フィールドを追加することで、間違ったメールアドレスの送信を防ぐことができると考えています。メールアドレスの確認フィールドの追加で誤送信を何件か防ぐことはできるかもしれませんが、必ずしもすべてを防ぐことができるというわけではありません。 多くのユーザーは、メールアドレスの入力内容をコピーして、確認フィールドに貼り付ける傾向があります。これでは、ユーザーが間違ったメールアドレスを貼り付ける
-
-
最新版！Webページを作成する時のベースになる、最小限の構成で記述されたHTML5のテンプレート
HTML5でWebページを作成する時のベースになる必要最小限の構成で記述されたHTML5のテンプレートを紹介します。 スニペットに登録しておくと、便利ですね。 イラスト: Girls Design Materials HTML5 Boilerplate -GitHub HTML5のテンプレート HTML5のテンプレートの解説 HTML5のテンプレート HTML5 Boilerplateのテンプレートを日本語化しました。 オリジナルライセンスで、商用利用、修正、配布、サブライセンス可です。 <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>タイトル</title> <met
-
-
Stylish - Custom themes for any website - Chrome Web Store
With hundreds of thousands of themes, skins & free backgrounds, you can customize any website with your own color scheme in a click. We heard you - Unlimited Styles are BACK! Enjoy over 500K custom website themes in just a click. Custom website themes that make the internet entirely yours ★ Explore the largest gallery of free website themes for websites like: Roblox, Youtube, Facebook, Google and
-
秋菜↻ on Twitter: "例のタイプのスマホ広告が生まれる前に元を断ちたい https://t.co/0baZhe6gj9"
例のタイプのスマホ広告が生まれる前に元を断ちたい https://t.co/0baZhe6gj9
-
世界3,200万ダウンロード、単月黒字化も達成。フリマアプリ「メルカリ」が語るマーケティング、検索結果にあえて「売り切れたモノ」を置いている理由。 - アプリマーケティング研究所
アプリマーケティング研究所 > アプリ開発 > 世界3,200万ダウンロード、単月黒字化も達成。フリマアプリ「メルカリ」が語るマーケティング、検索結果にあえて「売り切れたモノ」を置いている理由。 世界3,200万ダウンロード、単月黒字化も達成。フリマアプリ「メルカリ」が語るマーケティング、検索結果にあえて「売り切れたモノ」を置いている理由。 今回は、日米3,200万ダウンロードのフリマアプリ「メルカリ」を取材しました。 ※株式会社メルカリ 取締役 濱田優貴さん(左)、プロダクトマネージャー 山本久智さん(右)、広報 中澤理香さん 「メルカリ」について 「メルカリ」についておしえてください。 濱田： 誰でもかんたんに売り買いできる「フリマアプリ」です。ダウンロード数としては世界3,200万ダウンロード（日本 2,500万、アメリカ 700万）です。OSで見ると、iOSのほうがすこし多いですね
-
ウェブ業界で流行しているフラットデザインの利点と欠点
Windows 8のUIやGoogleのアイコン、Appleの新しいiOS7、さらにはFirefox 23のアイコンにまで使われているフラットデザイン。そんなフラットデザインがインターネット上で流行しているのかどうか、このデザインの特長は一体どういった点なのか、ということを実際にウェブ業界で働くプロ100人に対して調査したレポートが公開されています。 Flat Web Design Is Here To Stay - The Usabilla Blog http://blog.usabilla.com/flat-web-design-is-here-to-stay/ 調査はウェブ業界で働くプロフェッショナル100人に対して行われました。調査対象者の職業は以下の通りで、ウェブ業界で働く人々をまんべんなく調査しています。 調査の参加者にフラットデザインについて最初に思い浮かぶ単語を尋ねると、以
-
なぜリセットではなく Normalize.css を使うのか | Yomotsu net
まずは、歴史をみてみよう。 初期* { margin:0; padding:0; border:none; } table レイアウトから CSS レイアウトへの移行期に考案された。すべてゼロにするというコードで、実装者が書いたコードのみが適用できるという手法。弊害として input 要素の枠線など、本来、スタイルをゼロにする必要がない箇所までスタイルが消えてしまい、しょうがないので更に上から枠線を加えるなどが必要になっていた 中期今から 5 年ほど前の 2008 年、エリックメイヤー氏によるリセット CSS や YUI のリセット CSS が登場した。全称セレクター「*」 ではなく、要素セレクターそれぞれに対して CSS をゼロにするという手法。 ただし、p や見出し要素の上下マージンや li のリストスタイルまでも依然としてゼロになっていたため、次のような、本末転倒な HTML まで
-
とあるショッピングサイトの掲示板に見た「使いやすさの原点」について | マミオン有限会社-パソコン・数学研修、法人研修
BBS（ビービーエス）、またの名を掲示板。 今となっては少しノスタルジックな響きを持った言葉ですが、先日、とあるお店のサイトに設置されていた掲示板を見かけて驚いたとともに、ユーザビリティについて考える機会があったのでご紹介したいと思います。 掲示板上でやりとりされる注文情報…問題の掲示板は、こちらの「しょうゆ販売店」のサイトに設置されたものです。 書き込みの途中に、商品の注文情報が書かれているのが見つかりますか？ （個人情報がそのまま書かれているので、ボカシ入り画像のみでのご紹介です。） これを初めて見たとき、2つの意味で衝撃を受けました。 1つ目は、ここを注文フォームと間違えて書き込みをしてしまう人が存在するということ。 2つ目は、この方法、結構いいんじゃない？ということです。 セキュリティ上はマズいけど…一般公開されている掲示板に注文情報を書いてしまうというのは、普段からインターネット
-
jQueryで既存サイトの画像を「なんちゃって遅延ロード」する方法
jQueryを使って、既存サイトの画像を遅延ロードっぽく見せる方法、いわゆる「なんちゃって遅延ロード」について紹介します。 昨日エントリーした「画像を遅延ロードする定番jQueryプラグイン「Lazy Load」」ですが、投稿済み記事の画像に対して設定をひとつひとつ変更するのは現実的に厳しいと思われます。 とはいっても、他のサイトでページをスクロールすると画像がふわっと浮かび上がるアクションには憧れます。 ということで、既存サイトの画像を遅延ロードっぽく表示させる方法を考えてみました。 １．「なんちゃって遅延ロード」と称する理由 「なんちゃって遅延ロード」と称する理由は、ページをスクロールしたときの表示は遅延ロードされたようにみえますが、最初から遅延ロードの設定をしていないimg要素はページロード時に画像が先に読み込まれてしまうためです。 下のスクリーンショットは、遅延ロードの設定有無によ
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Copyright © 2005-2024 Hatena. All Rights Reserved.
設定を変更しました