主題と副題のマークアップにはhgroupを使用する – TAKLOG
主題と副題のマークアップの方法に関しては度々Xでも話題になっていて、例えば次のポストの返信やリポストを見ると、人によって以下のような様々なアプローチがあることがわかります。 参考：過去に話題になったポスト ポストを別枠で表示する 見出し要素（h1〜h6）の中に主題と副題の両方を含めるこの場合の副題はspanではなくstrongやsmallを使うと言った意見も見られる主題をh1要素でマークアップし、副題は隣接するh2要素を使う疑似要素とcontent:attr()を使って副題を表示するこのブログのトップページでも主題+副題が用いられていて、いくつかのマークアップ方法を検討した結果「hgroupの中に主題のh1要素と副題のp要素を含める」方法を選択しました。
details 要素で作るアコーディオン UI のサンプル
よくありそうな構成のアコーディオン （開閉式） UI を details 要素で実装したサンプルを GitHub に上げたので共有しつつ、details 要素使用時の注意点やスタイリングに関するまとめ。 開閉式のウィジェット、所謂アコーディオン UI を実装する手段として、details 要素を使用する方法は面倒な JavaScript を記述する必要もなく、（正しい構文で HTML を記述すれば） アクセシビリティ的な問題も気にせず簡単に実装することが可能なためよく利用しますが、よくありそうな構成のアコーディオン UI を details 要素で実装したサンプルを GitHub に上げたので共有します。 デモページは GitHub Pages で公開しているので下記から確認できます。 details 要素を使用したアコーディオン UI の実装サンプル burnworks/details-
HTMLにおける自己終了タグの使用、歴史的背景、使用に対する賛否両論
HTMLやCSSのデモページでコードを見ると、HTMLに自己終了タグ（/>）が使用されているのを見かけたことはありませんか？ HTMLにおける自己終了タグの使用、自己終了タグの歴史的背景、自己終了タグの使用に対する賛否両論について紹介します。 The case against self-closing tags in HTML by Jake Archibald (@jaffathecake) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに />の歴史的背景 />に対する賛否両論 Prettierには一貫性がない それとも、HTMLは閉じタグをどこでも使用できるのでしょうか？ はじめに />について話をしましょう。
HTMLにsearch要素が追加されたぞ！
先週、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要素の基本
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の属性のまとめ
Webページやアプリの実装に役立つ、知っておくと便利なHTMLの属性を紹介します。すでに使用されているものあると思いますが、いくつはこんな属性もあったのか、と発見があるかもしれません。 24 Lesser-Known HTML Attributes You May Want to Use ✨📚 by Madza (@madzadev) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 私は少し前に、HTMLのタグについての記事を公開しました。今回はその続編として、知っておくと便利なHTMLの属性を紹介したいと思います。 この記事で紹介する属性はすべて簡単に使用でき、外部ライブラリを使用しなければできないようなタスクを実現するのに役立ちます。 HTMLで特に便利な各属性の使用例と構文を理解しやすいように、コードスニペット
HTMLのdialog要素とフォーム機能 - Hatena Developer Blog
こんにちは、id:nanto_viです。この記事ははてなエンジニアAdvent Calendarの1日目の分です。 Webアプリケーションでモーダルダイアログを実現しようとして苦戦したことはないでしょうか？ 自前でHTML、CSS、JavaScriptを組み合わせて実装していくと、フォーカスやスクロールの制御が大変ですよね。そんな悩みを解決してくれるのがHTMLのdialog要素、Webブラウザ組み込みのモーダルダイアログ実装が利用できるという優れものです（モードレスダイアログとしても利用できます）。 dialog要素を使うことで、モーダルダイアログに要求されるJavaScript機能をブラウザが肩代わりしてくれるので、アクセシビリティの確保も簡単になります。 2021年12月現在、ChromeやEdgeはすでにdialog要素に対応しています。FirefoxやSafariの開発版でも対応
【HTML】知っておくと便利！短いHTMLコードで実装できる小技テク17選
この記事では、あまり知られていない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を
HTML 属性: autocomplete - HTML: ハイパーテキストマークアップ言語 | MDN
HTML チュートリアル HTML の基本 HTML 入門 HTML 入門の概要 HTML を始めよう ヘッド部には何が入る? HTML のメタデータ HTML テキストの基礎 ハイパーリンクの作成 高度なテキスト整形 文書とウェブサイトの構造 HTML のデバッグ 評価課題: 手紙のマークアップ 評価課題: コンテンツのページの構造化 マルチメディアとその埋め込み マルチメディアとその埋め込みの概要 HTML の画像 動画と音声のコンテンツ object から iframe まで — その他の埋め込み技術 ウェブへのベクターグラフィックの追加 レスポンシブ画像 評価課題: Mozilla のスプラッシュページ HTML の表 HTML の表の概要 HTML の表の基本 HTML 表の高度な機能とアクセシビリティ 評価課題: 太陽系の惑星データの構造化 リファレンス HTML 要素 <a>
今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
フロントエンドエンジニア御用達の MDN web docs を網羅した
このリストは何？ MDN web docs を、あたかも書籍の目次かのごとく整理しなおしたものです。それぞれ MDN web docs の記事へリンクしています。 なぜこれが必要になったかというと、人材市場でフロントエンドエンジニアが少なすぎる現状をどうにかするべく教育体制を整えるところから考え始めたのですが、それならまずは日頃お世話になっている MDN web docs を教材として扱いたいなと思ったからです。慣れてきてもよく参照するし「アレどこだっけなぁ？」を軽減もしやすいかなって。 MDN web docs は内容そのものはかなり充実しているものの、リンクがあらゆる方向に張り巡らせられており ある一定の流れに沿って読む ということが少々難しい側面もあります。特に初学者にとっては、迷子になりやすいかもしれません。 ですので、初学者でも学習しやすいように MDN web docs 全体の
「img要素をpで囲う」仕様を読むのがめんどくさい人向け解説 - m31
web屋さんたちのTLで話題沸騰の「img要素、下から見るか？横から見pで囲うか？」問題について、Twitterでもやいのやいの言っていますが、件のツイートで挙がっている項目について、独自解釈ではなく、仕様についてきちんと解説したいと思います。 って書いたけどたぶんimg要素の話だけで終わる。 2019.9.12追記 この記事は書いたものを書きっぱなしにしておくつもりだったのですが、TwitterのDMでいただいたメッセージで気付かされたことがあり、一部に訂正と補足を追記することにしました。 このボックスで書かれている追記には、著者による嘘は含まれていません。もし追記の内容に誤りがありましたらそれはただのミスです。 また、追記にこのボックスを使用するにあたり、もともと記事内にあった同じボックスは別のボックスに置き換えました。 訂正の経緯については記事の最後で後述します。 img要素の仕様を
Home
W3C仕様日本語訳置き場Wiki W3C仕様（等）の日本語訳置き場。コミットログはリポジトリからどうぞ。 WHATWG HTML HTML Standard HTML Standard Developer's Edition WikiのWHATWG HTMLも参照ください。 HTML関連文書 ARIA in HTML （HTMLに使用できるARIAを記した著者向け文書） ITS 2.0 （Internationalization Tag Set (ITS) Version 2.0） ARIA関連 WAI-ARIA 1.2 WAI-ARIA 1.1 WAI-ARIA 1.0 Accessible Name and Description Computation 1.1 WAI-ARIA Graphics Module Digital Publishing WAI-ARIA Module 1.
「はじめて」でも簡単！Emmetの使い方とよく使うパターン集 | HPcode（えいちぴーこーど）
display: block;の15文字をdbの2文字で入力できるようになるのがEmmetです。 1日中コーディングしているわたしにとってこの1回の差は大きく、100回入力したときには1,300文字分の差が生まれているわけですね。1,300文字入力するのにどれくらい時間がかかりますか？ その他にも タイプミスが少なくなるタイピングが少なくなるので腕が疲れない など、いいことだらけです！ コーダーとして名乗るからには必須レベルで使っておきたいのがEmmetです。基本的な使い方と、わたしがよく使うショートハンドのパターンをまとめているので、ぜひ参考にして使いこなせるようにしてください！ 【事前準備】Emmetが標準で使えるエディタ「Visual Studio Code」 わたしがメインで使っている「Visual Studio Code」であれば、標準でEmmetが使えるようになっています。個人
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【最新のHTML仕様まとめ】「HTML Living Standard」がマークアップにとってなぜ大切なのか？ - Qiita
HTML Living Standard ｜ HTML要素チートシート
Ready to check - Nu Html Checker
折り返し位置を word-break: keep-all で制御する - Qiita
HTML Standard 日本語訳