トラストバンクテックブログ

株式会社トラストバンクのプロダクト系メンバーによるブログです

HTML

半角英数が改行されない原因と対処方法

フロントエンドチームの君田(きみた)です。 本日は半角英数が改行されない原因とその対処方法に関して書いていこうと思います。 要素の横幅は指定しているのに、半角英数がその要素のないに収まってくれない!という事象を今更ながら経験しました。 そんな…

inputタグに正規表現を適用させる!pattern属性とは?

トラストバンク開発部・フロントエンドチームの君田(きみた)です。 本日はinputタグのpattern属性について書いていこうと思います。 フロントエンド開発をしていると、入力値の検証はどこかで実装する機会がある機能です。 そんなときに少しでも役に立てれ…

iOSのinputとtextareaクリック時にズームされてしまうのを防ぐ

トラストバンク開発部・フロントエンドチームの君田(きみた)です。 本日はiOSにて入力フィールドをクリックした時に自動でズームされてしまう挙動を防ぐ方法を書いていこうと思います。 iOSでは入力フィールドの文字サイズ(font-size)が16px以下だとズー…

ダイアログ作りのヒント

この記事は、トラストバンク Advent Calendar 2022の5日目です。 フロントエンドエンジニアの片柳です。 新米フロントエンドエンジニアから、ワンステップ踏み出すための機能のひとつに、ダイアログ(通称モーダル)があります。 シンプルなUIゆえに様々なサ…

JavaScript不要!?cssのline-clampでテキストを省略表示!

トラストバンク開発部・フロントエンドチームの君田(きみた)です。 本日はテキストの省略表示に使用することができるcssプロパティ「line-clamp」について書いていきます。 最近業務で業務で使用する機会があり、大変便利で感動を覚えたので是非記事にしよ…