「State of HTML 2024」でキャッチアップ。HTMLの最新トレンドと注目機能 2025年1月7日 執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主

主題と副題のマークアップの方法に関しては度々Xでも話題になっていて、例えば次のポストの返信やリポストを見ると、人によって以下のような様々なアプローチがあることがわかります。 参考：過去に話題になったポスト ポストを別枠で表示する見出し要素（h1〜h6）の中に主題と副題の両方を含めるこの場合の副題はspanではなくstrongやsmallを使うと言った意見も見られる主題をh1要素でマークアップし、副題は隣接するh2要素を使う疑似要素とcontent:attr()を使って副題を表示するこのブログのトップページでも主題+副題が用いられていて、いくつかのマークアップ方法を検討した結果「hgroupの中に主題のh1要素と副題のp要素を含める」方法を選択しました。

よくありそうな構成のアコーディオン （開閉式） UI を details 要素で実装したサンプルを GitHub に上げたので共有しつつ、details 要素使用時の注意点やスタイリングに関するまとめ。 開閉式のウィジェット、所謂アコーディオン UI を実装する手段として、details 要素を使用する方法は面倒な JavaScript を記述する必要もなく、（正しい構文で HTML を記述すれば） アクセシビリティ的な問題も気にせず簡単に実装することが可能なためよく利用しますが、よくありそうな構成のアコーディオン UI を details 要素で実装したサンプルを GitHub に上げたので共有します。 デモページは GitHub Pages で公開しているので下記から確認できます。 details 要素を使用したアコーディオン UI の実装サンプル burnworks/details-

HTMLやCSSのデモページでコードを見ると、HTMLに自己終了タグ（/>）が使用されているのを見かけたことはありませんか？ HTMLにおける自己終了タグの使用、自己終了タグの歴史的背景、自己終了タグの使用に対する賛否両論について紹介します。 The case against self-closing tags in HTML by Jake Archibald (@jaffathecake) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに />の歴史的背景 />に対する賛否両論 Prettierには一貫性がない それとも、HTMLは閉じタグをどこでも使用できるのでしょうか？ はじめに />について話をしましょう。

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

先週、HTML Living Standardの仕様にsearch要素が追加されました。 ブラウザへの実装はまだ先になると思いますが、検索フォームを実装する時は下記のようなHTMLを使用できるようになります。アクセシビリティの面でも率先して使用していきたいですね。 参考: The search element 2023年3月24日、HTML Standardの仕様にsearch要素が追加されました。 Add the <search> elementhttps://t.co/AlmyHd0qxI — HTML Standard (@htmlstandard) March 24, 2023 追加されたsearch要素は、下記で確認できます。 カテゴリは、フローコンテンツです。 4.4.15 The search element -HTML Standard search要素は、検索またはフィル

CONTACT 製品のご購入、書籍やセミナー、 CGWORLDに関するお問い合わせはこちら 購入者向けソフトウェアサポート に関するお問い合わせはこちら 個人情報に関する お問い合わせはこちら ボーンデジタルへのお問い合わせは上記の各種お問い合わせフォームからお願いいたします。状況によっては、お返事にお時間をいただくことがございます。

HTMLでダイアログを表現する 前編 dialog要素の基本 Webページで表示されるダイアログを、HTMLで簡単に表現できるようになるdialog要素。今回は基本的な使い方からフォームとの連携、showModal()の使用を学びます。 はじめに Web制作では、window.alert()やwindow.prompt()を使用したダイアログであったり、HTMLやCSS、そしてJavaScriptを用いて表示するダイアログを頻繁に扱います。そういったダイアログをHTMLで簡単に表現できるようになるのが、dialog要素です。 HTML 5.1 Nightly W3C Editor's Draft 23 March 2015 dialog要素はHTML5.1で導入が検討されている、ページの中でダイアログ機能を使えるようにする要素です。dialog要素はJavaScriptで使用するwindo

Webページやアプリの実装に役立つ、知っておくと便利なHTMLの属性を紹介します。すでに使用されているものあると思いますが、いくつはこんな属性もあったのか、と発見があるかもしれません。 24 Lesser-Known HTML Attributes You May Want to Use ✨📚 by Madza (@madzadev) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 私は少し前に、HTMLのタグについての記事を公開しました。今回はその続編として、知っておくと便利なHTMLの属性を紹介したいと思います。 この記事で紹介する属性はすべて簡単に使用でき、外部ライブラリを使用しなければできないようなタスクを実現するのに役立ちます。 HTMLで特に便利な各属性の使用例と構文を理解しやすいように、コードスニペット

こんにちは、id:nanto_viです。この記事ははてなエンジニアAdvent Calendarの1日目の分です。 Webアプリケーションでモーダルダイアログを実現しようとして苦戦したことはないでしょうか？ 自前でHTML、CSS、JavaScriptを組み合わせて実装していくと、フォーカスやスクロールの制御が大変ですよね。そんな悩みを解決してくれるのがHTMLのdialog要素、Webブラウザ組み込みのモーダルダイアログ実装が利用できるという優れものです（モードレスダイアログとしても利用できます）。 dialog要素を使うことで、モーダルダイアログに要求されるJavaScript機能をブラウザが肩代わりしてくれるので、アクセシビリティの確保も簡単になります。 2021年12月現在、ChromeやEdgeはすでにdialog要素に対応しています。FirefoxやSafariの開発版でも対応

No.HTML要素ネスト調査主要コンテンツカテゴリ他のカテゴリフォーム関連カテゴリ特徴属性概要公式文書情報連番要素名親子コンテンツモデル・概要（特性／子）使用できるコンテキスト・概要（親）メタデータフローセクショニングヘディングフレージングエンベディッドインタラクティブスクリプトサポートセクショニングルートパルパブルフォーム関連付要素送信可能要素リセット可能要素ラベル付け可能要素自動大文字化継承要素API記載要素カテゴリなし透過的置換要素グローバル固有属性読み意味（要約）関連する要素章タイトル（分類）文書No.使用できるコンテキストコンテンツモデル

この記事では、あまり知られていないHTMLの小技20個を実例サンプルと一緒にご紹介します。 CSSやJavaScriptなども使わずに、わずかなHTMLコードだけで実装可能な便利テクニックで、手軽に利用できるのもポイントです。 先日紹介したCSS小技テクと一緒に活用してみてはいかがでしょう。 【CSS】知っておくと便利！短いコードで実装できるCSS小技20選 たった1行のCSS！よく見かけるWebレイアウトを実現する凄技テクニック10個 そもそもHTMLってなに？ HTML（Hypertext Markup Language）は、Webブラウザで表示するための基本となる標準的なマークアップ言語です。また、CSS（Cascading Style Sheets）などの技術や、JavaScriptなどのスクリプト言語によってサポートされることもあります。 ホームページを作るときは、まずHTMLを

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

HTML チュートリアル HTML の基本 HTML 入門 HTML 入門の概要 HTML を始めよう ヘッド部には何が入る? HTML のメタデータ HTML テキストの基礎 ハイパーリンクの作成 高度なテキスト整形 文書とウェブサイトの構造 HTML のデバッグ 評価課題: 手紙のマークアップ 評価課題: コンテンツのページの構造化 マルチメディアとその埋め込み マルチメディアとその埋め込みの概要 HTML の画像 動画と音声のコンテンツ object から iframe まで — その他の埋め込み技術 ウェブへのベクターグラフィックの追加 レスポンシブ画像 評価課題: Mozilla のスプラッシュページ HTML の表 HTML の表の概要 HTML の表の基本 HTML 表の高度な機能とアクセシビリティ 評価課題: 太陽系の惑星データの構造化 リファレンス HTML 要素 <a>

みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？　入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ

このリストは何？ MDN web docs を、あたかも書籍の目次かのごとく整理しなおしたものです。それぞれ MDN web docs の記事へリンクしています。 なぜこれが必要になったかというと、人材市場でフロントエンドエンジニアが少なすぎる現状をどうにかするべく教育体制を整えるところから考え始めたのですが、それならまずは日頃お世話になっている MDN web docs を教材として扱いたいなと思ったからです。慣れてきてもよく参照するし「アレどこだっけなぁ？」を軽減もしやすいかなって。 MDN web docs は内容そのものはかなり充実しているものの、リンクがあらゆる方向に張り巡らせられており ある一定の流れに沿って読む ということが少々難しい側面もあります。特に初学者にとっては、迷子になりやすいかもしれません。 ですので、初学者でも学習しやすいように MDN web docs 全体の

web屋さんたちのTLで話題沸騰の「img要素、下から見るか？横から見pで囲うか？」問題について、Twitterでもやいのやいの言っていますが、件のツイートで挙がっている項目について、独自解釈ではなく、仕様についてきちんと解説したいと思います。 って書いたけどたぶんimg要素の話だけで終わる。 2019.9.12追記 この記事は書いたものを書きっぱなしにしておくつもりだったのですが、TwitterのDMでいただいたメッセージで気付かされたことがあり、一部に訂正と補足を追記することにしました。 このボックスで書かれている追記には、著者による嘘は含まれていません。もし追記の内容に誤りがありましたらそれはただのミスです。 また、追記にこのボックスを使用するにあたり、もともと記事内にあった同じボックスは別のボックスに置き換えました。 訂正の経緯については記事の最後で後述します。 img要素の仕様を

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

display: block;の15文字をdbの2文字で入力できるようになるのがEmmetです。 1日中コーディングしているわたしにとってこの1回の差は大きく、100回入力したときには1,300文字分の差が生まれているわけですね。1,300文字入力するのにどれくらい時間がかかりますか？ その他にも タイプミスが少なくなるタイピングが少なくなるので腕が疲れない など、いいことだらけです！ コーダーとして名乗るからには必須レベルで使っておきたいのがEmmetです。基本的な使い方と、わたしがよく使うショートハンドのパターンをまとめているので、ぜひ参考にして使いこなせるようにしてください！ 【事前準備】Emmetが標準で使えるエディタ「Visual Studio Code」 わたしがメインで使っている「Visual Studio Code」であれば、標準でEmmetが使えるようになっています。個人