CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View. What are HTML5 semantics and why should we use them? What is divitis and why shouldn’t we use it? This post is meant to answer all these questions,
2016年2月8日 先週末、自分が京都プチ観光を楽しんでいるその最中、Webアクセシビリティの学校 in 福岡が催されていました。connpassのページを見る限り、残念ながら満席には至らなかったようですが、しかし懇親会含めそれなりに盛り上がったようで何より。関連するつぶやきがWebアクセシビリティの学校 in 福岡（2016/2/6）のつぶやき #a11y福岡 - Togetterまとめにまとまっていたので拝見していたところ、気になるつぶやきを発見しました： ヘッドラインのマークアップ、これ止める！ <dl> <dt>2015年1月1日</dt> <dd>記事タイトル</dd> </dl> は『用語「(dtの内容)」、説明「(ddの内容)」で読み上げるスクリーンリーダーもあるとのことなので。 具体的にどの製品のどのバージョンのスクリーンリーダーでのことかは分からないのですが、そういう読み
みなさん、マークアップ好きですか？ 私はまあまあ好きです。デザインされたパーツをHTMLでどう組むかを考えたり、他の開発者と意見を戦わせたりするのは楽しいですよね！ ただ、自分はマークアップ行為そのものについて、「ここにそんな拘る意味あるのかな？」と疑ってしまうことがあります。<dl> を使うか使わないか、とか、パンくずナビはどうマークアップするか、とか、少しでも良いマークアップをするために切磋琢磨するのはきっと楽しいことなのでしょうが、エンジニアとしての自己満足に陥ってはいないだろうか？ と我に返る時があるのですよね。その時の感情を掘り下げてみようと思ったことが、この記事を書くきっかけとなりました。 この記事で私が最終的に述べたいことは、近い将来の標準的なWebプロジェクトにおいて、緻密なマークアップ作業の重要性は極めて低下するだろうということです。なぜ私がそう思うか、妄想を交えつつまと
LPシリーズの39弾は、「コーディングスタイルの理想と現実」をテーマにお送りします。 このイベントは終了しました。 CSS Nite LP39「Coder's High 2015： コーディングスタイルの理想と現実」が終了しました フォローアップ フォローアップを公開しました。 （1）谷 拓樹さん（2）森田 霞さん（アップルップル）（3）こもり まさあきさん（4）宇野 陽太さん（ピクセルグリッド）、坂巻 翔大郎さん（ピクセルグリッド）、小山田 晃浩さん（ピクセルグリッド）（5）小林 信次さん（まぼろし）、 宮地 存さん（エムティーアイ）（6）高津戸 壮さん（ピクセルグリッド） 概要 イベント名
HTMLを適切な要素を使って書いていくことは実はそれほど難しくはない。しかし過剰に要素を使わずに、かつスタイリングすることも意識して、と適切に“マークアップ”するのはなかなかの修練を必要とする。いったい“マークアップ”するということはどういうことなのだろうか、そしてどのような思考の元に行えば良いのだろうか。 HTML5での変化 著作権表示のマークアップ small要素 footer要素とsmall要素 p要素とdiv要素 footer要素とp要素 スタイリングとの兼ね合い マークアップするということ HTML5での変化 コンテンツに則した素直な形でマークアップできること。 HTML5で変わることや変わったことは多くあるが、それらをおおまかに俯瞰するとこのような言葉に集約できる。そのために様々な要素や属性が追加され、既存の実装をなるべく壊さない形で要素の意味に変更が加えられた。これらの変化は
このサイトを HTML5 でリニューアルした際に保留としたまますっかり忘れかけていましたが、ようやく WAI-ARIA を導入してみました。 WAI-ARIA は W3C の Web Accessibility Initiative (WAI) が公開している技術仕様で、Web コンテントや Web アプリケーションのアクセシビリティを強化することを目的としています。具体的には、Web ブラウザや支援技術 (AT) がコンテントのセマンティクスをより適切に認識できるよう、HTML ドキュメントに要素の「役割」や「状態」といった詳細な情報を付与するものです。名称に RIA とあるように、Ajax などによるリッチ・インターネット・アプリケーションをおもな対象とした仕様ですが、HTML5 によるシンプルな Web ページに取り入れることもできます。ここでは WAI-ARIA の HTML5 へ
2014年5月28日 標題で言いたいことは言い切っているのですが、まぁ、そういうことです（両者に包含関係はあれど完全一致ではない）。一般論として、ユーザビリティとアクセシビリティには深い相関ないし類似が認められるというのは間違いないでしょう。たとえば、あるユーザーにとってユーザビリティ上の効率が極端に低下した状況というのが「事実上の」アクセス不能であって、ゆえにアクセシビリティ上の問題があると解釈することは可能でしょう。とはいえ、両者について自分は割と「混ぜるな危険」という立場を取ることが多く、可能な限り切り分けたうえで議論なり設計・実装に取り組むことを好みます。そのベースとなっている考え方は、過去の覚え書きでいうと アクセシビリティとユーザビリティ Re: ウェブアクセシビリティマークの提唱について 辺りで書いて来た通り（ほかにも複数の記事で言及してきたけど割愛）。で、なんで今さらまた同
安藤 優 @ando_suguru はてなブログに投稿しました 正しいHTMLを書く目的はアクセシビリティのためではないと思う。 - Ando.report(); // JavaScriptをもっと勉強したいブログ。 http://t.co/LCajXdIGWM 2014-02-06 12:08:01 Yu Morita (yuu) @securecat @ando_suguru アクセシビリティとはWCAGのことではなく、リソースが正しくリソースであることによってもたらされるアクセシビリティです(記事中でも補足しているはずですが)。 2014-02-06 14:43:36 Yu Morita (yuu) @securecat @ando_suguru TBL曰く"The power of the web is in its universality." 誰もが意図通りにアクセスでき、リソ
jeffcroft.com 2014.1.3のブログエントリ 2014.2.13追記。結び（diversify or die）を誤解してた Web Standards Killed the HTML Star – JeffCroft.com 「html/cssが得意なだけでは飯が食えない」という周知の事実について 「名人」としての活動歴（書籍、登壇）のある人が現状について書いたエントリ 「あの名人はいま」風で面白く読んだ 以下斜め読んだ内容 2003年にJeffrey Zeldman「Designing With Web Standards」を出版した頃の話 html/cssかくあるべし、と議論されてた レイアウトはtable要素でなくcssで 画像置換のテクニック。これはアクセシビリティを守るため semanticなマークアップ - などなど カンファレンスも何度もあった。本を書いた人も
See related links to what you are looking for.
2013年12月21日 著 先日、勤務先で社内マークアップ部によるイベントがありました。html5jのマークアップ部（が開催しているMarkupCafe）にインスパイアされた活動で、各々が考える最強のマークアップ（謎）を披露し合うことにより、HTMLへの理解を深めよう的な活動です。今回は、この先の不定期開催に向けたテストという位置付けで催され、お題はページングでありました。 ページング、と言うのは検索結果ページなどの下のほうでよく見かけるアレです。呼び方にはパジネーションとか諸説あるようですが、ここでは続・よくある3つのデザインから考える、マークアップの最適解 | HTML5Experts.jpを参考に、ページングと記載しておきます。何の前提条件も縛りもなく、ワイヤーフレームだけを見て考えるというルールでしたので、それがかえって良かったというか、いろいろな切り口から妥当性を検討する面白味を
マークアップシリーズの第2回は、前回のよくある3つのデザインから考える、マークアップの最適解と同じく、html5jマークアップ部主催のイベント「MarkupCafe」で出題された3つのお題から最適なマークアップを探ります。 イベントではAからDの4つのチームにわかれてマークアップを考えました。それぞれのチームごとに違ったマークアップへの考えが表れていてとても興味深いです。また今回はイベント終了後に「HTML5 Experts.jp」のエキスパート兼マークアップ部の部長でもある村岡正和氏に、氏自身ならこうするといったマークアップを公開してもらいました。 本記事ではWebサイト制作の際にありがちな”ページング”、”フォーム”、”データテーブル”の3つについて要素の使いどころや仕様、アクセシビリティやユーザビリティといった観点からマークアップを考えていきます。 1.ページングの中身と重要度 最初
Oct 23, 2013Download as PPTX, PDF112 likes20,203 views
2013年9月18日 著 public-html@w3.orgで昨日あたりから盛んに飛び交い始めた、Re: 4.13.1 Bread crumb navigation - use of right angle bracketsという題名のメールが目を引きました。何やらHTML 5.1 Nightlyが9月18日付けで更新され、その4.13.2 Bread crumb navigationにおいて、Authors are encouraged to markup bread-crumb navigation as an ordered list using the ol and li elements.と記されたの機に、いわゆるパンくずナビゲーションと呼ばれる何かをどうマークアップすべきかで盛り上がっている模様。ひとつ前のバージョンでは、Authors are encouraged to j
HTML5を採用したWebサイト構築をする際に、SEOはどのようなポイントを考慮すべきなのか？ HTML5でのマークアップ、リッチ表現、SEO効果のあるh要素の使い方、HTML5で追加・削除・復活された要素などについて解説します。 HTML5化によるSEO効果の影響はあるか WebサイトをHTML5でマークアップをする際、特にHTML4などからHTML5にリニューアルする場合に、それによって検索エンジンによる評価が変化するのかどうかは非常に気になる問題です。 各検索エンジンでは、この疑問について公式に説明しています。GoogleはHTML5化することでプラスにもマイナスにもならないと度々公式に言及していますし、Bingは「List of things you really ought to know as an SEO today(今SEOとして本当に知っておきたいこと)」と題した記事の中
And so it begins! The HTML Beginner Tutorial assumes that you have absolutely no previous knowledge of HTML or CSS. It should be easy to follow if you work through each page and then, to celebrate, everything that’s covered is brought together at the end, before moving on to the CSS Beginner Tutorial. The primary thing to keep in mind, the supermagic key, is that HTML is used for meaning and CSS i
先に結論を述べちゃうと、HTML5におけるstrongは重要性 (importance)を、emは強勢 (emphasis)を表す。強勢って何？ってのは後述しています。 かつてHTML 4.01の場合は単純にemが強調 (emphasis)、strongがより強い強調 (stronger emphasis)でした。 なおどちらもemphasisという単語を使っているんだけれど、この英単語自体が重要性を示す「強調」と、発声時の強弱の強を示す「強勢」と、両方の意味を持っています。HTML 4.01とHTML5では日本語訳を分けているのは、文脈から判断したものです。 重要性 こちらは重要なものである、という事を表します。普通です。ここ試験に出るぞーってやつですね。 吾輩は「猫」である。 すると、きっと試験にこんな問題が出るわけです。 「この物語の語り手である「吾輩」は何者であるか。漢字一字で答え
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
