https://ginpen.com Powered by JavaScript and JapaneseSushi Tue, 24 Dec 2024 08:29:47 +0000 ja hourly 1 https://wordpress.org/?v=6.7.1 https://ginpen.com/2024/12/24/min-button-44px/ <![CDATA[ginpei]]> Tue, 24 Dec 2024 08:00:04 +0000 <![CDATA[Web]]> <![CDATA[Advent Calendar 2024]]> <![CDATA[UI]]> https://ginpen.com/?p=7469 <![CDATA[ちょっと良いUIおれおれAdvent Calendar 2024 – 24日目 ボタンは推しやすいようあまり小さくするのは避けましょう、はいそうですね、じゃあどれくらいなら良いの？　 ネタバレ：44px デモ： http […]]]> https://ginpen.com/2024/12/23/delay-verification/ <![CDATA[ginpei]]> Mon, 23 Dec 2024 08:00:30 +0000 <![CDATA[Web]]> <![CDATA[Advent Calendar 2024]]> <![CDATA[UI]]> <![CDATA[フォーム]]> https://ginpen.com/?p=7466 <![CDATA[ちょっと良いUIおれおれAdvent Calendar 2024 – 23日目 入力内容を検証して結果を可視化すると実行前に誤りが検出できて便利なんですが、まだ入力してる途中なのに怒られるのなんか嫌ですよね。いまやろうと […]]]> https://ginpen.com/2024/12/22/replace-input-type-email/ <![CDATA[ginpei]]> Sun, 22 Dec 2024 10:12:00 +0000 <![CDATA[Web]]> <![CDATA[Advent Calendar 2024]]> <![CDATA[UI]]> <![CDATA[フォーム]]> https://ginpen.com/?p=7459 <![CDATA[ちょっと良いUIおれおれAdvent Calendar 2024 – 22日目 <input> は適切に type 属性を使いましょうとは言いますが、メールアドレスの type="email" は入力内容の検 […]]]> https://ginpen.com/2024/12/21/just-use-svg/ <![CDATA[ginpei]]> Sat, 21 Dec 2024 08:00:19 +0000 <![CDATA[Web]]> <![CDATA[Advent Calendar 2024]]> <![CDATA[SVG]]> <![CDATA[UI]]> https://ginpen.com/?p=7447 <![CDATA[ちょっと良いUIおれおれAdvent Calendar 2024 – 21日目 簡単な図形を描くのに CSS 使うことってよくあると思うんですが、簡単な図形なら SVG 使うのもありです。簡単なものは割と簡単なので。 デ […]]]> https://ginpen.com/2024/12/20/show-spinner/ <![CDATA[ginpei]]> Fri, 20 Dec 2024 08:00:50 +0000 <![CDATA[Web]]> <![CDATA[Advent Calendar 2024]]> <![CDATA[UI]]> https://ginpen.com/?p=7438 <![CDATA[ちょっと良いUIおれおれAdvent Calendar 2024 – 20日目 ちょっと題はこれでわかりやすいかわかんないですが、ほとんどの場合にほぼ一瞬で終わる非同期処理あるじゃないですか。高速化大成功してめちゃ速の保 […]]]> https://ginpen.com/2024/12/19/easy-centering/ <![CDATA[ginpei]]> Thu, 19 Dec 2024 08:00:42 +0000 <![CDATA[CSS]]> <![CDATA[Advent Calendar 2024]]> <![CDATA[UI]]> https://ginpen.com/?p=7436 <![CDATA[ちょっと良いUIおれおれAdvent Calendar 2024 – 19日目 中央に置こうと思うこと自体は普通だと思うんですが、面倒で諦めたのか、初期値のまま左 (start) 寄せになっているものをみかけます。簡単に […]]]> https://ginpen.com/2024/12/18/lazy-loading/ <![CDATA[ginpei]]> Wed, 18 Dec 2024 08:00:36 +0000 <![CDATA[Web]]> <![CDATA[Advent Calendar 2024]]> <![CDATA[UI]]> https://ginpen.com/?p=7429 <![CDATA[ちょっと良いUIおれおれAdvent Calendar 2024 – 18日目 端から全部読み込むと、場合によっては訪問者リソースの負担になるだけでなく早く見せたい部分の読み込み速度にも影響しちゃったりするので、一覧をス […]]]> https://ginpen.com/2024/12/17/sticky-table-header/ <![CDATA[ginpei]]> Tue, 17 Dec 2024 08:00:24 +0000 <![CDATA[CSS]]> <![CDATA[Advent Calendar 2024]]> <![CDATA[UI]]> https://ginpen.com/?p=7425 <![CDATA[ちょっと良いUIおれおれAdvent Calendar 2024 – 17日目 表が大きくてスクロールするとき、各行列の見出しは常に見えていてほしいなと思っています。かつては JavaScript でごりごりやるしかあり […]]]> https://ginpen.com/2024/12/16/gray-on-disabled/ <![CDATA[ginpei]]> Mon, 16 Dec 2024 08:00:43 +0000 <![CDATA[CSS]]> <![CDATA[Advent Calendar 2024]]> <![CDATA[UI]]> https://ginpen.com/?p=7420 <![CDATA[ちょっと良いUIおれおれAdvent Calendar 2024 – 16日目 マウスカーソル載せたりタップしたりのタイミングでちょっと opacity いじったりするじゃないですか。あんな感じのノリで :disable […]]]> https://ginpen.com/2024/12/15/gap-rather-than-margin/ <![CDATA[ginpei]]> Sun, 15 Dec 2024 08:00:28 +0000 <![CDATA[CSS]]> <![CDATA[Advent Calendar 2024]]> <![CDATA[UI]]> https://ginpen.com/?p=7417 <![CDATA[ちょっと良いUIおれおれAdvent Calendar 2024 – 15日目 複数の要素を配列するとき、要素間の余白が必要です。それをどう管理するか。gap がおすすめです。 デモ： https://codepen.i […]]]>