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）高津戸 壮さん（ピクセルグリッド） 概要 イベント名
We are creating horizons, each new skyline is a unique, living outline that changes with the evolving architecture. Standard Markup We're developing a shared vocabulary, creating common HTML modules with consistent naming conventions. OOCSS & SCSS CSS is written in beautifully organized SCSS partials, grouped by the role each CSS rule and classname play.
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を参考に、ページングと記載しておきます。何の前提条件も縛りもなく、ワイヤーフレームだけを見て考えるというルールでしたので、それがかえって良かったというか、いろいろな切り口から妥当性を検討する面白味を
BEMを使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。 BEMの方法論とMindBEMdingのルールについてはそれぞれの文書を読んでもらうとして、それらをひっくるめて大雑把に説明すると、BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。 Block - 構成のルートとな
Top 5 CSS Libraries CSS is an essential part of any website. However, pure css code sometimes forces you to write too much unnecessary stuff, and many libraries are willing to take on the chore. Learn More 10 Sass libraries to help speed up website development SASS is one of the popular CSS preprocessors nowadays. Learn More 10 best libraries for CSS animation All in all I have tried about thirty
マークアップシリーズの第2回は、前回のよくある3つのデザインから考える、マークアップの最適解と同じく、html5jマークアップ部主催のイベント「MarkupCafe」で出題された3つのお題から最適なマークアップを探ります。 イベントではAからDの4つのチームにわかれてマークアップを考えました。それぞれのチームごとに違ったマークアップへの考えが表れていてとても興味深いです。また今回はイベント終了後に「HTML5 Experts.jp」のエキスパート兼マークアップ部の部長でもある村岡正和氏に、氏自身ならこうするといったマークアップを公開してもらいました。 本記事ではWebサイト制作の際にありがちな”ページング”、”フォーム”、”データテーブル”の3つについて要素の使いどころや仕様、アクセシビリティやユーザビリティといった観点からマークアップを考えていきます。 1.ページングの中身と重要度 最初
2. プロフィール • 竹内 真 / TAKEUCHI SHIN #singtacks – 創業企業＆所属 • 株式会社レイハウオリ 代表取締役社長（W3Cメンバー） • 株式会社ビズリーチ 取締役CTO • 株式会社ルクサ CTO – 主な運営サービス • • • • • 2 ビズリーチ http://www.bizreach.jp/ ルクサ http://luxa.jp/ RegionUp http://www.regionup.com/ codebreak; http://www.codebreak.com/ CareerTrek http://www.careertrek.com/ #singtacks supported by
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
