モバイルブラウザの100vh問題を回避するReactコンポーネント「react-div-100vh」の紹介
要素の高さをビューポートに吸着させる手段として、100vhが最適解ではあるが、モバイルブラウザにおいては悩ましい点があることをご存知だろうか。 モバイルブラウザには、URLを表示するアドレスバーとタブ切り替え操作等のコン…
要素の高さをビューポートに吸着させる手段として、100vhが最適解ではあるが、モバイルブラウザにおいては悩ましい点があることをご存知だろうか。 モバイルブラウザには、URLを表示するアドレスバーとタブ切り替え操作等のコン…
マークアップエンジニアならば、「表示が崩れている!」と報告を受けた経験があることと思う。そのようなとき、決り文句のごとく、 「ブラウザは?」「OSは?」「ブラウザのサイズは?」 を質問するのだけれど、報告主がクライアント…
CSSを記述するにあたって、Emmetやスニペットで時短を試みるケースは一般的で、あなたも導入していることだろう。これら機能によって開発は、相当に高速化していることは疑いようもない。無論わたしもVSCodeの拡張機能に追…
ユーザーの操作に応じて状態を知らせる機構に「トースト通知」というものがある。ローディング中であることを伝えたり通信の成否を伝えたり、ポップアップ表示することでユーザーの迷子を防ぐことに寄与するものだ。 とくにネットワーク…
このエントリーでは、CSSの間接セレクタについて共有したい。 CSSのセレクタ定義には、さまざまな用法があって、なかでも「タイプセレクタ、子孫セレクタ、IDセレクタ、クラスセレクタ」は一般的だろう。マークアップに精通して…
画像トリミング機能は、ビューアソフト等に見られる代表的な機能のひとつであるが、Webアプリに実装しなければならないシーンは滅多に遭遇しない。一方でサムネイルの生成であれば、サーバサイドで一定サイズにトリミングすることを考…
初めまして、会津ラボへWebエンジニアとして入社をした渡部です。2019年11月に地元である会津若松へUターン入社して、早いもので約一ヶ月半が経ちました。 Uターンを数年前から検討していたのですが、実際にUターンしたのは…
Googleマップアプリを起動するとスクリーン下部にスワイプパネルの存在に気づく。ここには、対象エリアのスポット情報を案内されている。おもにグルメ種がカテゴライズされていて、パネル内の操作で事足りる場合もある。 このよう…
ファイルアップロードUI設計のややこしさときたら…。<input type=”file” />で済むのなら、なんと明快なことか。そういう覚えはないだろうか。 <input type=”file” />だけであ…
はじめまして、プロジェクトマネージャの遠藤です。 もっぱら、予算、原価、利益と会社の「売上計画」を達成する為の活動が主な仕事で、肩書きはプロジェクトマネージャではありますが、管理業務はほとんどエンジニアに頼りっきりの毎日…