令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
最速の生年月日入力フォームを求めて - LIVESENSE ENGINEER BLOG
こんにちは。転職ドラフトでWebアプリケーションエンジニアをやっている@iwtnです。 転職ドラフトでは自社開発企業に特化したエージェントサービスを始めました。 agent.job-draft.jp そこでサービスの申し込みフォームを作ったのですが、その中に生年月日の入力がありました。 生年月日ということは日付の入力。 ブラウザの実装もリッチになってきて、デフォルトでinputタグの type="date" を使うだけでカレンダーまで表示されます。素晴らしいですね！ しかしこの実装の問題は多くの人が指摘しています。実際あまりよいUIとは言えません。 動作はバラバラ、特にスマホでは入力しにくい 実装はブラウザに依存します。なので統一したUIをユーザーに提供できません。 caniuse.com もちろん普段使っているブラウザで慣れていればそれがその人にとってのベストのUIにはなりえます。 しか
リンク/ボタン/フォームをより良くするHTML・CSS 17選 - ICS MEDIA
ウェブサイト制作において見た目がきちんと実装されているのは大事なことですが、コードのちょっとした違いでユーザーの不便につながることもあります。本記事では見た目だけでなくユーザーの使い勝手にも気をつけたコーディングテクニックについて解説してます。今回はユーザーが特に使い心地を感じやすいインタラクション部分で、シンプルなHTML・CSSだけでより良くできる17個に絞って紹介します。 下記サンプルでNG例とよい例の両方を紹介しています。実際に違いに触れながら本記事を読むと分かりやすいです。 サンプルを別ウインドウで開く コードを確認する 1. divタグをボタンにするのは避けよう 見た目はボタンのようでも、<div>要素で実装したボタンはアクセシビリティの観点からもよくありません。ボタンとしての機能を持つなら<button>要素を用いるのが多くの場面でも有効です。もし、諸事情で<div>要素を用
画像からHTMLを生成する深層学習とは？AIがwebサイト自動コーディング。 | Ledge.ai
サインインした状態で「いいね」を押すと、マイページの 「いいね履歴」に一覧として保存されていくので、 再度読みたくなった時や、あとでじっくり読みたいときに便利です。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
