Pinned長谷川喜洋★星のソムリエ®/HASEGAWA Yoshihiro@hiro_ghap1Feb 27ネットショップ担当者フォーラムさんで記事が公開されました! ECサイト運営で〜とありますが、実装面でのパフォーマンスとアクセシビリティのベーシックなお話となっています! 読んでいただけると嬉しいです!!!!ネットショップ担当者フォーラム@netshoptanFeb 27記事をアップしました! ECサイト運営で無視できないパフォーマンス+アクセシビリティの改善価値とは。よくある誤解と本質的な改善アプローチを解説 netshop.impress.co.jp/e/2026/02/27/1…2222225.9K5.9K
長谷川喜洋★星のソムリエ®/HASEGAWA Yoshihiro@hiro_ghap1Feb 3, 2022「ABOUT」みたいなすべて大文字のテキストを表示する時、HTML上では「About」のように小文字(or先頭大文字)にして、CSSの text-transform: uppercase;で大文字にするのは、ブラウザに「エービーオー…」と読み上げられないためです。 ※英語圏ではすべて大文字にすると略語として扱われます。OMGとか334484482.2K2.2K
長谷川喜洋★星のソムリエ®/HASEGAWA Yoshihiro@hiro_ghap1Apr 30, 2022OSの領域は CSS の env関数を使うことで取得できます。 例えば下部固定メニューに iOS のホームバー領域分のpadding を設定したいとき。 env(safe-area-inset-bottom) で、ホームバーが viewport に干渉しているときのみ padding が入ります。112132131.5K1.5K
長谷川喜洋★星のソムリエ®/HASEGAWA Yoshihiro@hiro_ghap1May 25, 2022JavaScript から DOM を操作するとき、できるだけ id を使いましょうというのは、getElementById が毎回DOM を検索しているのではなく、ブラウザが id の場所の情報を別途持っているからです。 つまり早い。 パワー developer.mozilla.orgDocument: getElementById() メソッド - Web API | MDNgetElementById() は Document インターフェイスのメソッドで、 id プロパティが指定された文字列に一致する要素を表す Element オブジェクトを返します。要素の ID は指定されていれば固有であることが求められているため、特定の要素にすばやくアクセスするには便利な方法です。11118118833833
長谷川喜洋★星のソムリエ®/HASEGAWA Yoshihiro@hiro_ghap1Feb 3, 2023月に5回以上するやりとり 僕「inputのフォントサイズ、PCより大きくなってもいいので、スマホは16px以上にしません?iPhone使ってます? 「使ってます 僕「入力フォームをタップしたら拡大されるの、うっとおしくないですか? 「うっとおしいです! 僕「16pxだとそうならないので、大きくしましょう!228484641641138K138K
長谷川喜洋★星のソムリエ®/HASEGAWA Yoshihiro@hiro_ghap1Mar 22, 2021「HP作りたいんですけど 僕「今はInstagramだけをされているんですね 「はい。HPを作ったほうがいいと言われまして 僕「Instagramはこのまま続けて、Googleマイビジネスを登録しましょう。予約はLINEで取れば十分です。HPはお一人で捌けなくなってから考えましょう 「えっとじゃあ 僕「頑張って下さい334848413413
長谷川喜洋★星のソムリエ®/HASEGAWA Yoshihiro@hiro_ghap1Dec 6, 2019Microsoftから突然電話がかかってきて、「なぜAzureを登録されたのですか」って聞かれたので、御社のちょまどさん @chomado の影響ですと答えておいた。225151385385
長谷川喜洋★星のソムリエ®/HASEGAWA Yoshihiro@hiro_ghap1Jan 31, 2022スクロールエフェクトやリサイズ時の処理、JavaScriptで'scroll'や'resize'イベントを使っていたら、これを Intersection Observer と matchMedia に置き換えるだけでパフォーマンスが良くなります。 何となくサイトが重いなーと思ったらお試しください。112626289289
長谷川喜洋★星のソムリエ®/HASEGAWA Yoshihiro@hiro_ghap1Oct 3, 2022僕が jQuery を勧めないのは、jQuery でできることはほぼピュアな JS で解決できるからであって、React だろうが Vue.js だろうが Angular だろうが、ピュアJSで簡単にできることをフレームワークやライブラリに頼るというのは、「意思疎通することに通訳を通す」行為だから、パフォーマンスが落ちる→223939250250
長谷川喜洋★星のソムリエ®/HASEGAWA Yoshihiro@hiro_ghap1Feb 1, 2022<img src="xxx.jpg" alt="" width="300" height="200"> imgタグの width、height属性には単位を入れず、そして画面上に表示したいサイズではなく、元の画像のサイズを入力してください。 「ブラウザに画像の縦横比を伝える」のが彼らの今のメインの仕事です! 表示サイズはCSSでコントロールを。332424249249
長谷川喜洋★星のソムリエ®/HASEGAWA Yoshihiro@hiro_ghap1Nov 20, 2021いつもお願いしてるデザイナーさん、キレイにパーツ分けされて注釈しっかり入ったデータをくれるんだけど、今回テキストフィールドのフォントサイズが14pxになってて「指示があったため。実装上問題が発生する場合は交渉します」と注釈があって、「これがWebデザイナー…!」って惚れ直した。221515229229
長谷川喜洋★星のソムリエ®/HASEGAWA Yoshihiro@hiro_ghap1Dec 13, 2024こういうFigmaならではの話で、「コーダーに楽をさせる」みたいなことを言う自称ベテランのデザイナーさんがちょくちょくいるけど、違うんだよ。 「やっとWeb用のツールができただけ」なんだよ。 君たちは「Webの知識がないのに、自分はWebのデザインできると勘違いしてるだけ」なんだよ。 Show moreせきゆおう🇯🇵Web制作とAIのことを発信する人@wurst_designDec 12, 2024Figmaでやってしまうとコーダーが困ること02 「英語の大文字入力」 「え!みんなやってるじゃん!」と思いましたよね? そうなんです...意外と知られていません。しかし、小文字で入力していただき、[基本設定] > [大/小文字]で見え方を設定していただくだけで、コーダーの工数が1億時間減ります。 Show more55212121021055K55K