usako1124のブックマーク - はてなブックマーク

Nuxt.jsで使用するカルーセルライブラリを選定する
最近使用したvue-ssr-carouselがかなり良かったので、選定基準等と合わせて紹介します。カルーセルライブラリの選定基準一般的な選定基準も含みます。開発環境で使用できるフロントエンド要件として必須です。デザインをカスタマイズできる/カスタマイズの自由度が高いデザイナーの手掛けたカルーセルデザインがコンポーネントライブラリのデザインと同一であることはまずないため、デザイン要件としてほぼ確実に必須です。学習コストが低い工数は有限なので、学習コストは低い方が好ましいです。先述した内容と合わせると、カスタマイズの自由度は高い方が好ましいものの、実装難易度が高かったり仕様が煩雑だったりすると選定はしにくくなってしまいます。バンドルサイズが小さいバンドルサイズが大きいと、ダウンロード時間が長くなりFCP（ファーストビューの最初のコンテンツが表示されるまでの時間）等の指標に
usako1124 2023/12/21
nuxt

library

frontend
リンク
【2023年】iOSにおけるモーダルウィンドウの背景固定（スクロール抑止）＆下までスクロールできない問題の解決方法
はじめに今回は、モーダルウィンドウが開かれた時に背景を固定（背面コンテンツのスクロールを抑止）する方法を改めて紹介したいと思います。以前まで、PCやAndroidでは比較的簡単に実現させることができましたが、iPhoneもしくはiPad（iOS or iPadOS）では別の方法で実装しなければ、実現できませんでした。しかし、それはもう過去の話。今ではもう、簡単に実現できます🙆‍♂️ ※ただし考慮すべき点はあるので、最後まで読み進めていただければ幸いです。 iOSにおけるモーダルの背景固定が楽になっている!? PCやAndroidでは容易に実現できるものの、つい数年前までiOS端末では同じ方法で実現できない背景がありました。しかし現在では、以下いずれかの方法を使えばiOSでも容易に実現することができます。 bodyにoverflow: hiddenを設定モーダルウィンドウが開かれた
usako1124 2023/03/30
css

frontend
リンク
Next.js(React)に最軽量＆高機能スライダープラグインSplideを導入してみる
スライダープラグインは何を使うべきかフロントエンドエンジニアのおとのです🙆‍♂️ Webサイトに以下のようなスライダーを埋め込む際、Web制作のコーダーやマークアップエンジニア、フロントエンドエンジニアは外部プラグインを利用して実装することが多いかと思われます。 jQueryが全盛期だった時には、Slickが多く利用されていた印象です。あらゆるオプションが用意されており、さまざまなカスタマイズが可能で、私もよく使ってきました。また、IEのサポートが終了してからSwiperが利用されるようになった印象があります。こちらも複数のオプションがあり、比較的モダンなCSS（flex等）が組み込まれていることから、slickよりもカスタマイズが容易であるように思えます。jQueryに依存していないのも大きなメリットですね。今までのスライダープラグインの問題ただ、スライダープラグインは決して容
usako1124 2022/10/25
plugin

vue

react

frontend
リンク
1