キーワード：alt 属性, 代替テキスト, マシンリーダビリティ, Web アクセシビリティ, 支援技術, スクリーンリーダー この文書は、2024年12月17日に私 @debiru_R によって記述されました。私は2000年頃より HTML, CSS を研究し始めましたが、2013年頃から MDN Web Docs（旧 Mozilla Developer Network）の日本語訳コントリビューターも務めており、MDN Web Docs や Wikipedia といった各種 Web コンテンツの HTML 関連の記事の整備に従事しています。 代替テキスト、特に alt 属性値について言及していますが、私の理解が不足している箇所があるかもしれません。内容に誤りや不適切な点があると判断された方は @debiru_R までお知らせいただけると幸いです。 余談ですが、この文書自体および本文中の空
「strongもbも太字になるのにどう違うんだ…？」 「emもiもイタリック体になるけど、そもそもイタリック体ってなんなんだよ…？」 「strongの重要と、emの強調って何が違うんだ…？」 などなど、使い方がよくわからなくなりがちな HTML 要素（主にテキストレベルセマンティックスに分類される要素）の違いを調べてみました。 長めの記事になっていますので、気になる要素だけつまみ食いしてもらうのもよいかと思います。 今回の調査対象はこちら span strong b em i dfn cite var mark u ins del s strike big small ブラウザのデフォルトの見た目確認用 CodePen 調査する内容 HTML Standard の仕様に書かれている説明 一部、HTML 4.01 から HTML 5 での変更が理解の助けになるものもあり、HTML 4.01
HTMLやCSSのデモページでコードを見ると、HTMLに自己終了タグ（/>）が使用されているのを見かけたことはありませんか？ HTMLにおける自己終了タグの使用、自己終了タグの歴史的背景、自己終了タグの使用に対する賛否両論について紹介します。 The case against self-closing tags in HTML by Jake Archibald (@jaffathecake) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに />の歴史的背景 />に対する賛否両論 Prettierには一貫性がない それとも、HTMLは閉じタグをどこでも使用できるのでしょうか？ はじめに />について話をしましょう。
フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5
あくまで有効日数はW3C仕様の名目上のステータスであり、参考情報にしか過ぎないわけですが、HTML5とそれよりも前に策定された(X)HTML仕様は、2018年3月に一斉に廃止され、HTML Review Draftと入れ替わるタイミングでHTML 5.1とHTML 5.2が同時に廃止されました。Second Editionを含んでいますが、HTML5シリーズがいずれも勧告から3年で廃止されているのは何とも興味深いところではあります。 また、古い話ですが、当時HTML5のEditorを務めていたHixieことIan Hickson氏が2008年に「HTML5の完成は2022年ごろになる」と発言していたことがありました（HTML5の完成は2022年！？ | Web標準Blog | ミツエーリンクス）。2012年にW3CとWHATWGのHTMLが分裂[1]し、結局今年になってWHATWG HTM
[Misc] Hex clock – HHMMSSをColor Hexに当てはめて、背景色として表示する時計 Pocket Tweet HHMMSS（時間、分、秒）って並べると6桁になるから、じゃ頭に＃付けてカラーHexにしちゃおうよ、というWeb時計。例えば「10時30分20秒」なら「#103020」という色になるので、その色をページの背景色として表示しています。ただそれだけのシンプルな実験的ページ。けどよく考えると、1日の中で最も数値の大きくなる時間というのは「23時59分59秒」、つまり「#235959」なんですね。コーディングする人ならすぐにピンと来ますが、これはかなり暗めの色。ようするにこれより明るくはならないんです。また時間が進むほど赤が強くなり、分が進むほど緑が、秒が進むほど青が強くなるという特徴もあって、見るだけでもわりと楽しめます。 Hex clock
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
この記事は新野淳一氏のブログ「Publickey」に掲載された「HTML標準仕様の策定についてW3CとWHATWGが合意発表。今後はWHATWGのリビングスタンダードが唯一のHTML標準仕様に」（2019年5月29日掲載）を、ITmedia NEWS編集部で一部編集し、転載したものです。 W3CとWHATWGは、HTML標準仕様の策定について合意したことを発表しました。 いわゆるHTML5と呼ばれるHTMLの最新仕様には、WHATWGが公開しているものとW3Cが公開しているものが併存しており、しかも両者には一部で異なる仕様があったために混乱を招いているところがありました。 今回の合意によりW3CはHTMLとDOMに関する標準策定をやめ、今後はWHATWGが策定するリビングスタンダードがHTMLとDOMの唯一の標準となります。 両者が合意した主な内容は下記となります。HTMLとDOMのリビン
睡蓮の花のように 朝日に向け今日も歌う 睡蓮の花のように この思い水面に光る 花びらが流した涙 貴方は笑えていますか? 上がりまくる季節が来た ヤバくなれるのは誰… 俺!俺! 俺!俺!Ole!Ole! Ah 真夏の Jamboree レゲエ<砂浜<<Big Wave!! Ah 悪ノリの Heartbeat めっちゃゴリゴリ Welcome Weekend Ah 灼熱の Jamboree 暴れまくってイイぜ!! Ah 冷めないで Summer Dream ｢濡れたまんまでイッちゃって!!!｣ 夏だぜ (Yeah!!) 夏風 (Fuu!!) 夏晴れ (Yeah!!) 夏バテ (Boo↓↓) またコイツで決まりだ Summer Again 青く晴れた日を 笑う太陽 溢れる希望 むすぶ靴ひもに期待のせて 風を連れて 夢の種植えるため 今走り出そう 黄色いバス越え江ノ島方面 スゲエ混み合ってる ひま
Microsoft、手書きのUIスケッチをHTMLに変換する「Sketch2Code」を発表：AIで手書きの図形と文字を認識 Microsoftは、手書きでスケッチしたUI画面をHTMLコードに自動変換するWebベースソリューション「Sketch2Code」を発表した。 Microsoftは2018年8月30日（米国時間）、ホワイトボードなどに手書きでスケッチしたユーザーインタフェース（UI）画面を、AI（人工知能）を利用して、HTMLコードに変換するWebベースソリューション「Sketch2Code」を発表した。 Microsoftによれば、UIのデザインプロセスには無駄が多いという。通常は、まずアイデアレベルのスケッチをホワイトボードに描き、数人で検討してから写真に撮影し、HTMLコードを書き下す。これでは手間ばかりかかり、すぐにアイデアを形にできない。 画像認識技術とAIを組み合わせ
もはやHTTPの時代ではない グーグルがここまで“SSL化”にこだわるわけ：半径300メートルのIT（1/2 ページ） GoogleのWebブラウザ、Chromeの最新バージョンでは、SSL化していないサイトのテキストボックスに情報を入力しようとすると、警告を表示するようになりました。なぜ、ここまで“SSL化”にこだわるのでしょうか。 このコラムでも何度か「https://」の仕組みをお伝えしてきました。Webブラウザの通信をHTTPSというプロトコル（通信のルール）を使い、サーバに設定された「SSLサーバ証明書」を用いて暗号化するというものです。SSL対応などと書かれることが多いですね。 少し前だと、HTTPSを使っているという証明の「錠マーク」がWebブラウザに出てくるのは、企業サイト、それも金融系サービスや会員制のログインが必須のサービスがほとんどでした。しかし、今では先進的なブログ
日立コンサルティング 公共コンサルティング本部の岡山将也マネージャー、サイボウズ グローバル開発本部 東京第2開発部 小林大輔氏、ツルカメの森田雄代表取締役社長・UXディレクターによる対談の後編。アクセシビリティ向上の基本となる“Webの構造化”と、そのメリットについて語り合う。 タイトルや見出しなど、ページの内容をきちんと構造化したHTMLのテンプレートを使うだけで、一定のアクセシビリティは確保できますよね。例えば、音声読み上げソフトで見出しだけを読み上げるといったことができるようになったり。 森田氏 そうですね。でも国内の多くの会社では、構造化されていないテンプレートがまだまだ使われています。テンプレートを構造化されたものに変えることはそんなに面倒ではないはずです。でも、「見た目が変わらないのに作り直す」ということにはなかなか予算が出ない。 Webページの制作を請け負うベンダー側の能力
HTMLドキュメントのhead内に記述するmeta要素やlink要素、ソーシャルサービス用の要素、ブラウザ用の要素、スマホアプリ用の要素などをまとめた「HEAD」を紹介します。 HEAD -GitHub 翻訳するにあたりいくつか尋ねたところ、著者様はとてもいい人でした。 公開当初から内容がアップデートされ、ライセンスもCC0に変更されています。 オススメの最小限の構成 要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 スマホアプリ関連のhead内の要素 メモ オススメの最小限の構成 下記は、head内に記述する最小限のタグです。
テキストを入力するボックスや、ラジオボタン、テキストボックス、メニューなど、さまざまなHTMLのフォームのパーツだけを使ったピタゴラスイッチのようなウェブサイトが「Sebastian Ly Serena」です。聞いただけではよく理解できないのですが、実際にサイトを訪れてみると「すごい！」と言ってしまうくらい完成度が高くなっていました。 Sebastian Ly Serena http://sebastianlyserena.dk/ HTMLのフォームのパーツをピタゴラスイッチ風にしたSebastian Ly Serenaは以下のムービーから確認可能です。 HTMLのフォームのパーツをピタゴラスイッチ風にするとこうなる - YouTube Sebastian Ly SerenaのURLを開くと以下のようなページが表示され、赤枠の場所にカーソルが登場します。 カーソルは階段のように並んだ入力フ
W3CでHTML5仕様の策定を行っているWeb Platform Working Groupは、W3Cのブログにて「WORKING ON HTML5.1」という記事を公開し、2016年9月にHTML5.1仕様を勧告にする計画を明らかにしました。 6月中旬までにHTML5.1の勧告候補を公開し、9月に勧告にするとのこと。 The plan is to ship an HTML5.1 Recommendation in September 2016. This means we will need to have a Candidate Recommendation by the middle of June, following a Call For Consensus based on the most recent Working Draft. 計画ではHTML5.1の勧告を2016年9
レスポンシブ対応のカード型レイアウトを簡単に実装できる、jQueryなどの他スクリプトに依存しないシンプルで超軽量（2KB）のスクリプトを紹介します。 デモのアニメーション minigridの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://henriquea.github.io/minigrid/minigrid.js"></script> </body> Step2 :HTML 各アイテムには「.grid-item」を、ラッパーには「.grid」を付与します。 <div class="grid"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div
![[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid](https://cdn-ak-scissors.b.st-hatena.com/image/square/51d7e65c86ee67bce7000a1d7008655aaff74295/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015080204-01.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
