生年月日の入力欄のレスポンシブ対応についていろいろ考えてみた
先日、生年月日の入力欄をレスポンシブに最適化する良い方法はないか検証してみたら、想像以上に大変だったのでメモを残しておきます。 日付の入力と言えど実はいろいろな実装方法があって、マルチデバイスに対応しながら要件にあった実装をするにはどうしたらいいのか、改めてゼロベースで考えてみました。結局、最終的には振り出しに戻った感じなんですけどね（結論を先に見たい方はこちらからどうぞw）。 近い将来、レスポンシブな日付入力欄の実装が必要な方々の参考になれば幸いです。ちなみに、以下に書いたもの以外に「これいいよ」というのがあったら、ぜひご教授願いたいです。 要件定義とチェックポイント 今回、日付入力欄を実装した際の要件は以下の通りです。生年月日のように年の選択が必須な日付の入力欄の実装だったので、たとえば、ホテル予約の日付選択などとはちょっと違った要件になっています。 a. 年が選択しやすい 生年月日の
【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい
そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400" alt="画像の説明"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般的（？）になっていました。また、widthとheight属性が記述してあってもCSSでwidth: 100%; height: auto;が指定されているとレイアウトシフトが発生してしまっていました。 参考： img要素のサイズ属性の記述の有無についてのTwitterのアンケート なんでいまさら？ なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
