令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
input[type=checkbox] 要素に switch 属性を指定することによる HTML 標準のスイッチ UI の提案
input[type=checkbox] 要素に switch 属性を指定することによる HTML 標準のスイッチ UI の提案 2023.12.23 スイッチは多くのウェブサイトで使われているものの、HTML の標準要素としては存在していませんでした。そのため多くの開発者は、スイッチを実装するために独自の実装を行っていましたが、このような独自の実装はアクセシビリティの問題を引き起こす可能性がありました。この問題を解決するために、WHATWG により `input[type="checkbox"]` 要素に `switch` 属性を追加することが提案されました。この属性を指定することで、チェックボックスをスイッチとして利用できます。 input 要素の switch 属性は 2023 年 12 月現在実験的に実装されている機能です。将来的に仕様が変更される可能性があります。 スイッチ とは
![input[type=checkbox] 要素に switch 属性を指定することによる HTML 標準のスイッチ UI の提案](https://cdn-ak-scissors.b.st-hatena.com/image/square/9f498fff7f14d1f4ab6c565817f30f1ad084c770/height=288;version=1;width=512/https%3A%2F%2Fazukiazusa.dev%2Fblog%2Fogp%2Finput%255Btype%253Dcheckbox%255D%2520%25E8%25A6%2581%25E7%25B4%25A0%25E3%2581%25AB%2520switch%2520%25E5%25B1%259E%25E6%2580%25A7%25E3%2582%2592%25E6%258C%2587%25E5%25AE%259A%25E3%2581%2599%25E3%2582%258B%25E3%2581%2593%25E3%2581%25A8%25E3%2581%25AB%25E3%2582%2588%25E3%2582%258B%2520HTML%2520%25E6%25A8%2599%25E6%25BA%2596%25E3%2581%25AE%25E3%2582%25B9%25E3%2582%25A4%25E3%2583%2583%25E3%2583%2581%2520UI%2520%25E3%2581%25AE%25E6%258F%2590%25E6%25A1%2588%2FHTML.png)
なぜ <div> に onClick がダメなのか？
■ はじめに <div>要素にonClickを渡すべきではない、ということ聞いたことはないでしょうか？ ただ、なぜ渡すべきでないのか？ 理解してなかったので今回調べてみました。 サンプルコード 今回動作確認に利用したサンプルリポジトリのコードはReactで書いています。 ■ 結論：<div>にonClickを定義するのがなぜダメなのか？ ユーザーにとって操作性の低いボタンになってしまうから、です！ 要するに UX が悪くなってしまうから！ その理由を解説していきます！ ■ 操作性の低いボタンになってしまう理由 大きく３つあると考えています。 div要素は focus を持たないから returnキー, spaceキーをonClickに変換しないから スクリーンリーダーが認識しない要素だから ◎ focus を持たないから <div>要素はfocusを持ちません。 なので、tabキーで要素に
少しのコードで実装可能なHTML小技集
2023年2月7日 HTML これまで「少しのコードで実装可能な10のCSS小技集」シリーズでCSSのちょっとしたTipsを紹介していましたが、今回はHTMLバージョン！知っていると使い勝手がちょっとよくなる小技を集めました！ ↑私が10年以上利用している会計ソフト！ 目次 セレクトメニューの選択肢をグループ化 type 属性値によって入力欄が変化 スマートフォンでエンターキーのテキストを変える 画像の遅延読み込み テキストの折り返し位置を指定する 番号付きリストの順番を変更する 簡単アコーディオン 任意のテキストを自動翻訳させない リンク先のテキストを指定してスクロールさせる 1. セレクトメニューの選択肢をグループ化 複数の選択肢を用意できるおなじみの select タグ。項目は option タグを利用しますが、さらに optgroup タグで囲むことでグループ化できます。選択肢が多
どうしてHTML5が廃止されたのか | フューチャー技術ブログ
フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5
HTML Centricで行きたい私たち - LIFULL Creators Blog
LIFULLの中島です。 近頃、LIFULL HOME'Sのフロントエンド(ここではJavaScriptのみを焦点とします)もようやく進む道を見出し、そろそろ設計方針を一新しようと試みています。 今回はそれについて話したいと思います。 現在の私たちの課題感 私たちの管理する多くのレガシーコードはDOM操作ライブラリとしてjQueryを、UI設計の格子としてBackbone.Viewのような設計方式を導入しています。 (もちろんそうでないマイクロサービスも多くありますが) 具体的なコード例を示すことこんな感じになります let Slider = Backbone.View({ events: { '.next click': 'next', '.prev click': 'prev' }, next() { this.$(...).css({left: '111px'}); }, ... }
【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年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
実はHTMLだけで多くのことが実現できる！知っておくと便利なHTMLの使い方
HTMLだけで多くのことが実現できるのは素晴らしいことです。一昔前までは、CSSやJavaScriptを使用しなければできなかったこと、かなり複雑なコードを書かなければできなかったことが、実はHTMLだけで多くのことが実現できます。 知っておくと便利なHTMLの使い方をまとめて紹介します。 HTML can do that? by Ananya Neogi 先日紹介した「CSSでここまでできるのか！」の続編です。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. datalist -フォームに入力候補を表示 2. dialog -ダイアログ ボックス 3. progress -プログレスバー 4. detailsとsummary -開閉パネル 5. inputmode -スマホで入力時に適したキーパッドを表示 6. inpu
Google がサポートしているメタタグ - Search Console ヘルプ
フィードバックを送信 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 Google がサポートしている meta タグと属性 このページでは、meta タグの概要、インデックス登録を制御するために Google がサポートしている meta タグと HTML 属性、およびサイトに meta タグを実装する際に注意すべきその他の重要なポイントについて説明します。 meta タグ meta タグは、ページに関する詳細情報を検索エンジンや他のクライアントに伝えるために使用される HTML タグです。クライアントは meta タグを処理し、サポートしていないものは無視します。meta タグは、HTML ページの <head> セクションに追加します。たとえば、次のようになります。 <!DOCTYPE html> <html> <head> <meta charse
HTMLのinputタグ[type=file]のブラウザごとの挙動について調べてみた - Qiita
はじめに みなさんHTMLタグの一つであるinputタグはご存知だと思います。 その中でもtype="file"についてぼくはこんな疑問を持ちました。 選択したファイルはどこのファイル？コピーとかされているの？ これみなさん知っていますか？ ちょこっと調べたんですがなかなか情報がなかったので いろいろ自分で調査してみました。 （本音は調査が面白そうだったのでそんなに本気で調べてないだけです 仮説を立てる まずは仮説をいくつか立ててそれぞれを検証していきます A. ブラウザはファイル参照だけ持っている B. ファイル選択時にTemp領域へコピーしている C. メモリ上に抱えている たぶんこれらのどれかじゃないかなと思っており、 個人的にはBが濃厚だと勝手に考えています。 調査開始 ファイルアップロード機能が必要なので 簡単にファイルをアップロードするだけのアプリを自前で作りました。 http
![HTMLのinputタグ[type=file]のブラウザごとの挙動について調べてみた - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/25b21d397939f0d7235132405e4e3d079e25f683/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-f625e957b80c4bd8dd47b724be996090.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9SFRNTCVFMyU4MSVBRWlucHV0JUUzJTgyJUJGJUUzJTgyJUIwJTVCdHlwZSUzRGZpbGUlNUQlRTMlODElQUUlRTMlODMlOTYlRTMlODMlQTklRTMlODIlQTYlRTMlODIlQjYlRTMlODElOTQlRTMlODElQTglRTMlODElQUUlRTYlOEMlOTklRTUlOEIlOTUlRTMlODElQUIlRTMlODElQTQlRTMlODElODQlRTMlODElQTYlRTglQUElQkYlRTMlODElQjklRTMlODElQTYlRTMlODElQkYlRTMlODElOUYmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ21pZGRsZSZzPWI1ODJlZjU4ZjZiYTRkMDc1OWRkOWI5ZTU3MWUyNmM4%26mark-x%3D142%26mark-y%3D151%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwdGFxbSZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YTg1YjQ4NmExMDFkMTk0NzA5YzgwOTE4NjgxNGIyNjI%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D508d85eb5f1b0c24123e22a78b678e51)
HTMLフォームでのクレジットカード情報の自動入力について調べた - Qiita
「なぜ日本のウェブサイトでは1Passwordでクレジットカード番号を一発入力できないのか？」という素朴な疑問から、少し調べてみました。なお1Passwordはパスワード管理ソフトであり、またウェブサイトのフォームにパスワードやクレジットカード情報を一発入力するためのブラウザ拡張機能です。 クレジットカード番号入力フォームに関する標準を探したところ、IETFとWHATWGの取り組みを見つけることができました： Electronic Commerce Modeling Language (ECML), Version 2 Specification by IETF HTML Standard: 4.10.19.8 Autofill by WHATWG こういった標準に準拠することで、1Passwordのような支援技術(assistive technology)にフォームの「意味」(seman
クライアント側のフォーム検証 - ウェブ開発を学ぶ | MDN
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
Polymer Project
The Polymer library is in maintenance mode. For new development, we recommend Lit. The Polymer library provides a set of features for creating custom elements. These features are designed to make it easier and faster to make custom elements that work like standard DOM elements. Similar to standard DOM elements, Polymer elements can be: Instantiated using a constructor or document.createElement. Co
なぜ Web Components はウェブ開発に革命を起こすのか
ウェブアプリケーションのフロントエンドに関わる方なら、もう Web Components という 言葉を全く聴いたことがない方は少ないのではないでしょか。 すでに関連記事も数多く出回っており、実際に触り始めている方も多いと思います。しか し、なぜこれが革命的技術なのか、周囲の人に簡潔に説明できる方はどれくらいいるで しょうか？この記事では、それを試みていきたいと思います。 デジタル部品の流通革命 # ソフトウェア部品の流通に今、大きな変化が起きてきています。 数年前のオープンソース環境を覚えているでしょうか？レポジトリは集中管理型の subversion、リリースは zip、テストは手動。Issue の登録もプロジェクトごとにことな るバグ管理システムが使われていたため、とっつきづらかったでしょうし、パッチを送る のも面倒でした。 そんなオープンソースを取り巻く環境が、git や GitH
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
Canvas、WebGL、WebRTC、WebSocketなど、HTML5の花形スターとも言えるモテ系APIは、常に世間の注目を集めている。これらAPIを使いこなせるウェブディベロッパーはどこからも引っ張りだこだろう。しかし、注目度が低いながらも、今後のウェブを支える（かもしれない）最新のAPIが数多く存在する。このようなAPIは派手さが足りないゆえに話題になることもない。しかし、これら非モテ系のAPIも含めてHTML5だ。 本セッションでは、ありきたりのモテ系APIに飽きたマニアな貴方のために、普段は陽の当たらないAPIを一挙紹介する。もちろん、どれかのブラウザーに実装されているAPIのみだ。今から使おうと思えば使えないことはない。そして、W3Cにて仕様策定が始まって日が浅いため、明日にはどうなるか分からない。無くなるかもしれないし、大幅に変更されてしまうかもしれない。今覚えても役に立た
Latex2HTML5 – IT Software Service
Top 5 Programming Languages to Learn in 2023 Are you looking to stay ahead of the curve in the ever-evolving world of programming? Now is the time to learn the top 5 programming languages for 2023! Programming is a powerful tool, and it’s never been more important to understand its potential. From mobile app development to desktop application creation, these five languages will put you on track fo
Shumpei Shiraishi's Weblog: Web開発を革命する（かも知れない）Web Componentsという仕様について
2012年12月25日火曜日 Web開発を革命する（かも知れない）Web Componentsという仕様について Web Componentsは、現在のところ余りまとまった日本語の情報がないようですが、Web開発を大きく、本当に大きく変える可能性を持つテクノロジーです。 Web Componentsは、現在のWebが抱える大きな問題点を解決する手段としてW3Cで仕様が策定中です。仕様策定を主導しているのはGoogleで、現時点ではGoogle Chrome（WebKit）がWeb Components（の一部）を実装している唯一のブラウザです。 Google Japanのエンジニアも、Web Componentsの実装には深く関わっているとのことなので、そのうち日本語の情報も充実してくると思われますが、本エントリはそれまでのつなぎ、ということで書いてみたいと思います。 しかし、Web Co
Facebookアプリを、HTML5でどうしてサクサクにできたのか。Sencha Touch開発チームが用いた3つのテクニック
Sencha Touchの開発チームがHTML5で高速に動作するFacebookアプリを開発したことを紹介した1つ前の記事 「Facebookのモバイルアプリが失敗した理由はHTML5のせいじゃない。HTML5でサクサク動くFacebookアプリを作って見せたSencha Touch開発チーム」は、非常に多くの読者に注目されました。 この記事で紹介したSencha Touch開発チームのブログ「The Making of Fastbook: An HTML5 Love Story」の後半では、どのようなテクニックを用いて高速なHTML5アプリケーションを実現したのかも紹介されています。 この記事では、その3つのテクニックについてポイントを紹介したいと思います。タイムラインやニュースフィードのようなユーザーインターフェイスを備えたモバイルアプリケーションは、これから広く開発されていくことにな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
データ属性の使用 - ウェブ開発を学ぶ | MDN
文字列からHTMLを組み立てる話 Shibuya.XSS techtalk #5