アイコンの実装方法
ウェブページにおけるアイコンの実装方法はさまざまです。マークアップに img 要素を配置する方法もあるし、CSS から背景画像やアイコン・フォントを使う方法もあります。そういった中からどの方法を採用すべきかを判断するには、HTML Standard の Requirements for providing text to act as an alternative for images にあるとおり、「そのアイコンの意味を伝えるテキストが付随するかどうか」を考える必要があります。 テキストが付随しないアイコン 家のアイコンだけでホームページへのリンクを表す場合など、ラベルとしてのテキストが存在しないアイコンは、自分自身でその意味を伝える必要があります。こういったアイコンの実装方法は限られていて、ほぼ 1 つしかありません。alt 属性に代替テキストとしてラベルを指定した img 要素をマー
ブラウザ上でMarkdownを安全に展開する - 葉っぱ日記
不特定のユーザーが入力したMarkdownをブラウザ上でJavaScriptを使ってHTMLに変換するという場面においては、JavaScriptで変換してHTMLを生成するという処理の都合上どうしてもDOM-based XSSの発生を考えないわけにはいかない。かといって、MarkdownをパースしHTMLを生成するという処理すべてをXSSが存在しないように注意しながら自分で書くのも大変だし、markedやmarkdown-jsなどの既存の変換用のJSを持ってきてもそれらがXSSしないかを確認するのは結構大変だったりする。 そういった場合には、Markdownから生成されたHTMLをRickDOMを通すことで、万が一HTML内にJavaScriptが含まれていたとしてもそれらを除外し、許可された要素、許可された属性だけで構築された安全なHTMLに再構築することができる。さらに、そうやって生成
“マークアップ”するということ ～ HTML5勧告に寄せて ～
HTMLを適切な要素を使って書いていくことは実はそれほど難しくはない。しかし過剰に要素を使わずに、かつスタイリングすることも意識して、と適切に“マークアップ”するのはなかなかの修練を必要とする。いったい“マークアップ”するということはどういうことなのだろうか、そしてどのような思考の元に行えば良いのだろうか。 HTML5での変化 著作権表示のマークアップ small要素 footer要素とsmall要素 p要素とdiv要素 footer要素とp要素 スタイリングとの兼ね合い マークアップするということ HTML5での変化 コンテンツに則した素直な形でマークアップできること。 HTML5で変わることや変わったことは多くあるが、それらをおおまかに俯瞰するとこのような言葉に集約できる。そのために様々な要素や属性が追加され、既存の実装をなるべく壊さない形で要素の意味に変更が加えられた。これらの変化は
5 Obsolete Features in HTML5 — SitePoint
On October the 28th, 2014, HTML5 became a W3C Recommendation. HTML5 certainly isn’t a new topic and a lot of developers are aware of its features: semantics, accessibility, APIs, and so on. However, during the evolution of the standard, some elements, attributes, and APIs have been added and then changed or removed. Because it’s hard to keep up with all the news and updates in our field, some of y
CSHTML5 (C#/XAML for HTML5)
NEW! CSHTML5 has now become OpenSilver! We are happy to announce that CSHTML5 has been significantly improved and rebranded to 'OpenSilver', which stands for 'Open-source reimplementation of Silverlight'. It is fully backward compatible and it can be downloaded from OpenSilver.net. Upgrading from CSHTML5 to OpenSilver is very easy. Read the FAQ Plugin-Free .NET in your Browser by compiling C#/XAML
Introducing the HTML5 “Menu” and “Menuitem” Elements | Envato Tuts+
Today I’m going to introduce you to two HTML5 elements: <menu> and <menuitem>, part of the Interactive Elements specification. The web has evolved into something more than just linked documents; pages behave increasingly these days like apps. As such, it’s an appropriate time to form standard web interactivity features. These two elements are amongst the least talked-about among developers, probab
picture要素の関連仕様って今どうなってるんだっけ？を調べたメモ
<picture> どうなった 勤め先がモバイルに注力していたこともあり、レスポンシブもへったくれもない世界を生きてきた。そのせいで、その類の情報にかなり疎くなっていたので、現状を軽く調査してみた次第。 HTMLでの画像リソース読み込み分岐の必要性 CSS には Media Queries があるので、Viewport の width であったりデバイスのピクセル密度であったりを条件にして background プロパティの指定をすれば対応できる。 反面、<img> 要素と src 属性にはそのような仕組みがないため、Media Queries で可能な条件で同じようにやろうと思うと、JavaScript で DOMContentLoaded のあとに"頑張って"操作するか、バックエンドで UserAgent に応じて"賢く"返す仕組みを用意しなければならない。 WebP のような画像形式
HTML5 Template: A Basic Code Template to Start Your Next Project
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX. If you’re looking for a basic HTML5 te
Facebookアプリを、HTML5でどうしてサクサクにできたのか。Sencha Touch開発チームが用いた3つのテクニック
Sencha Touchの開発チームがHTML5で高速に動作するFacebookアプリを開発したことを紹介した1つ前の記事 「Facebookのモバイルアプリが失敗した理由はHTML5のせいじゃない。HTML5でサクサク動くFacebookアプリを作って見せたSencha Touch開発チーム」は、非常に多くの読者に注目されました。 この記事で紹介したSencha Touch開発チームのブログ「The Making of Fastbook: An HTML5 Love Story」の後半では、どのようなテクニックを用いて高速なHTML5アプリケーションを実現したのかも紹介されています。 この記事では、その3つのテクニックについてポイントを紹介したいと思います。タイムラインやニュースフィードのようなユーザーインターフェイスを備えたモバイルアプリケーションは、これから広く開発されていくことにな
なぜ html の form は PUT / DELETE をサポートしないのか？ - Block Rockin’ Codes
注意 内容については一切保証しません。 ここでは、主に W3C ML での議論や各種仕様などに基づいて書いています。 ここに書かれていることが正しいかどうかは、自身で判断して下さい。 事実としておかしいところなどは、コメントでどんどん指摘して下さい。遠慮はいりません。 ただし、このエントリでは「form が PUT/DELETE をサポートするべきかどうか？」の議論はしません。 「REST の是非」や「PUT/DELETE の意義」についても議論する気はありません。 ここでやっているのは、あくまでもどういった議論の末現状があるのかの調査です。 そうした意見がある場合は、 W3C などに投稿するのが最も有益だと思います。 History 2014/03/29: 公開 2014/03/29: XForm と XHTML の関係を明確化(thanx koichik) 2014/03/29: HT
Etsy: レスポンシブなHTMLメールをつくる - ワザノバ | wazanova
http://codeascraft.com/2014/03/13/responsive-emails-that-really-work/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約4時間前 HTMLメールは、 AndroidのGmailはインラインCSSしかサポートしてない。<style>タグは効かず、media queryは使えず、外部のスタイルシートに頼れない。 Gmail.comはHTMLのサポートが限定されている。HTML5のものを含めてサポートされてないタグが多く、classやIDなどの属性が使えない。インラインCSSのみ使え、<style>タグもかなり制限されている。 iOS / Mac OS Xのメールアプリは、media queryや多くのCSSが利用できる。 という状況なので、レスポン
スマートフォンに最適化したレイアウトを実現できる フリーレスポンシブHTMLテンプレート「30 Free Responsive HTML Templates」
TOP > Design > スマートフォンに最適化したレイアウトを実現できる フリーレスポンシブHTMLテンプレート「30 Free Responsive HTML Templates」 スマートフォンが携帯電話の主流となったことで、webサイトはパソコンで見る際の状態ではなく、スマートフォン用のレイアウトで制作することが当たり前となってきています。しかし、同時に両方を構築するのに時間や予算がかけられない時もあるのではないでしょうか？そんな時に便利なフリーレスポンシブHTMLテンプレート「30 Free Responsive HTML Templates」を今回は紹介したいと思います。 （Big Picture | HTML5 UP） スマートフォンに最適化したレイアウトを実現できるHTMLテンプレートがまとめられています。 詳しくは以下 Type & Grids — Flat-
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - gnab/remark: A simple, in-browser, markdown-driven slideshow tool.
GitHub - hail2u/html-best-practices: For writing maintainable and scalable HTML documents
10 Typical HTML Interview Exercises — SitePoint
GitHub - AurelioDeRosa/HTML5-API-demos: A repository where you can find information about many JavaScript and HTML5 APIs.
GitHub - twbs/bootlint: HTML linter for Bootstrap projects
GitHub - ericchiang/pup: Parsing HTML at the command line
Ready to check - Nu Html Checker
HTMLテンプレート素材まとめ
