普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
PostHTMLプラグインの作り方 - Qiita
export default tree => { tree.match({ tag: 'span' }, node => { node.tag = 'p'; return node; }); } treeはASTにPostHTMLのAPIをつけたものです。 ASTの構成はposthtml-parserに書いています。 APIがtree.match(expression, cb)とtree.walk(cb)の2つしかなく、walkのほうは全ノード見ることになるのであまり使わないと思います。 なので基本的にtree.match()で処理していくことになります。 posthtml-match-helperを使えばセレクタ指定っぽくもできます。 ちなみにAPIを使わずに直接操作しても問題ありません。 親要素や兄弟要素にアクセスしたくなったときなどは直接触るしかありません・・・。 上記を覚えておけば
Nunjucks + gulp で静的 HTML をモジュール化する
やりたいこと 概要 静的 HTML を複数ページ作成するときに、共通部分（ヘッダーとかフッターとか）をコピペしたくない。 「PHP とか使って include とかすればいいじゃん」 ていう意見もあるんだけど、動作確認に web サーバー立てるの面倒だし、単なる HTML で済むなら HTMLで 完結させたい。 細かい背景 gulp-ect を使って、やりたいことは大体実現出来ていたんだけど、以下の2つの理由により、別の方法に切り替えたいと思った。 ECT も gulp-ect も最終更新日が3年前 ファイルのパスを埋め込む（後述）、というののやり方が分からなかったし出来なさそう やったこと（TL;DR） さきに結論だけ書いておくと、 Nunjucks というテンプレートエンジンの記法で、ファイルを作成 gulp-nunjucks-render という gulp のプラグインを使って、HT
本家Stack OverflowでHTMLの質問をしたら、仕様が変わったという話 - 水底の血
とある人（筆者ではない）が本家Stack Overflowでfigure要素に関する質問をしたら、HTML Living Standardの明確化が行われたという話。こういうとき、英語で質問できると専門家（というかSpec Editor's）が直接回答してくれるのはつよいよなぁ…と改めて思ったり（英語力ください）。 What does reference mean in when using figure? https://stackoverflow.com/questions/45070672/what-does-reference-mean-in-when-using-figure dfn what it means for elements to be “referenced” by sideshowbarker · Pull Request #2841 · whatwg/html
コンテンツのデザインとウェブデザイナーにできること
WCAN2017で発表したスライドです。 WCAN 2017 Summer | WCAN 名古屋近郊のイベント情報 https://wcan.jp/event/2017summer/
逆引き！フロントエンドのイマドキパフォーマンス改善 - 青空コメントアウト
WebアプリにしろWebサイトにしろパフォーマンスはとても重要です。どんなに高機能であっても、どんなにデザインが良くても、パフォーマンスが悪ければユーザーは離れてしまいます。 とは言え現場はキツキツのスケジュールで、パフォーマンスにまでこだわる余裕がないよ！パフォーマンスはひとまずできる限りのところまで頑張るよ！となってしまうこともあるかと…。 この問題の解決の糸口はパフォーマンスを良くする手段をどれだけ知っているかです。仕様を決めるとき、デザインを決めるとき、実装するとき、それぞれのフェーズでパフォーマンスを常に意識していると自ずとハイパフォーマンスに近づきます。 というわけで今回はフロントエンドの観点から、イマドキのパフォーマンス改善手法をまとめてみました。イマドキと謳っておきながら2年前くらいの技術が出てきたりして最新の話題でもないのですが。 ちなみに、本題に入る前にWebパフォーマ
2016年を振り返って、 HTML, CSS, JavaScript の書き方を変えたところ
2016年のブラウザ事情の進展に伴い、実務で HTML, CSS, JavaScript の書き方が変化した部分を列挙してみます。あくまで代表的なもののみです。 ブラウザのサポートバージョン変化 環境面の変化 まとめ ブラウザのサポートバージョン変化 § IE 8 サポート終了 § 2016年1月に IE 8 のサポートが終了しました。 html5shiv.js の読み込みが不要になった SVGが（PNGによる代替画像を用意することなく）使えるようになった video要素、audio要素が使えるようになった ::before, ::after 擬似要素をダブルコロンで書けるようになった :not 擬似クラスが使えるようになり、例えば一行テキストエリアのセレクターが input:not([type]), input[type="text"] で正確に表せるようになった addEventLis
HTMLとXMLにおける言語タグ
HTMLとXMLはまた、空の文字列を使用することで言語の継承を防ぐ手段を提供します。すなわち、xml:lang=""。これは本質的に、この情報にどの言語も関連付けないことを表します。 以下の文書は、どのように言語タグを組み立てるかについての追加の詳細を提供します。 言語タグを組み立てる RFC 3066のような、RFC 5646とそれ以前の仕様との間の主な相違点は、以下の通りです： 有効なサブタグを探すただ1つの場所、新しいIANA registryがあります。 サブタグは固定された位置と長さを持ちます。これは、言語タグのマッチングをより簡単にします。 言語タグの潜在的な構成要素の周りにより多くの柔軟性を持ちます。 RFC 3066は基本的に、そのままの言語コードか、言語コードに国コードを加えたもの、あるいはIANA language tag registryで特別に登録されたごく少数の値
ヘッダーを固定した表のアクセシビリティ - Qiita
この記事は Web Accessibility Advent Calendar 2015 8日目の記事です。 ヘッダーを固定した表のアクセシビリティについて、最近調べる機会があったので、その内容を報告します。 ヘッダーを固定した表とは、表のボディセルだけがスクロールし、ヘッダーはスクロールしない表のことです。 ヘッダーが行の場合はこんな感じ: ヘッダーが列の場合はこんな感じです: まず考えるべきこと 実装にもよるため一概にはいえませんが、ヘッダーを固定した表は往々にしてアクセシビリティを低下させます。 後述するように、アクセシビリティを向上させる方法はありますが、ハックに近く、推奨できる方法ではありません。 まずはヘッダーを固定しない表を使えないか検討してください。 よくある実装とその問題点 ヘッダーを固定した表でよくある実装は、ヘッダーとボディセルをそれぞれ別々のtable要素とする実装
そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita
帳票といえばPDFとして生成するのが一般的でしょうか? でも、2015年の今、あえてHTMLで描くのがホットです(個人的に)。ミリ単位で設定された高度な帳票も、CSSを駆使して簡単に作ることができます。業務システムでもモダンブラウザを選択することが増え、@pageなども積極的に使えるようになったこと、SPA(Single Page Application)の台頭、いろいろと条件が揃ってきました。 書いてたら結構長くなっちゃったので、さくっとコードだけ見たい方は、Paper CSSリポジトリをどうぞ。 はじめに HTML帳票のメリット 2015年現在、HTML帳票を選択する幾つかのメリットがあります。 ライブリロードで、リアルタイムなスタイル調整 バックエンドではなくフロントエンドで生成できる 前者は、gulpやGruntの普及で、CSSにしろHTMLにしろ、リアルタイムにプレビューできる環
リストを的確に使う
HTMLの基本 リストを的確に使おう ３種類のリスト リストの入れ子を記述するルール ３種類のリスト 項目の一覧（リスト）を表す要素として、順不同リスト (ul)、順序リスト (ol)、定義リスト (dl) の３種類が定義されています。 ul (Unordered List) 要素は、個々の項目の順序が意味を持たないリストを作成するときに使います。 ol (Ordered List) 要素は、個々の項目の順序に意味があるリストを作成する時に使います。 dl (Definition List) 要素は、「用語」 とその 「解説」 など、対になって表現されるものを表すに使われます。 ここでは特に ul 要素と ol 要素の使い方に注目します。dl 要素の使い方については、「定義リストを表のように見せる」 を参照してください。 ページトップへ リストの入れ子を記述するルール リスト項目を示す l
HTMLの過去・現在・未来 -- ごく簡単なHTMLの説明
HTMLはバーナーズ＝リーが最初にWWWを構想したときのものから、いくつかのバージョンを経て、XMLと融合しつつあります。歴史的なHTMLから現在のバージョン、そしてこれからHTMLが進む方向を簡単に概観してみます。 初期のHTML SGML応用としてのHTMLの発展 XMLとXHTML 次世代のウェブとHTML 初期のHTML WWWは、ワープロや表計算の文書、プログラムなど、どんなタイプのリソースでも扱えるようにつくられています。しかし、こうした情報は機種やソフトに依存するため、ネットワークでの情報共有には適しません。 私は、すべてのコンピュータが理解すべき共通言語も必要だと感じていました。基本的なハイパーテキストの閲覧機能やメニューを備え、ヘルプや議事録、メールなど簡単な文書を記述できるもの、つまり大部分の人の日常生活の95%がカバーできるシンプルなハイパーテキスト言語が必要だと。こ
HTML/CSSを素早く記述する「Emmet」の連載をはじめてました
HTML/CSSを素早く記述する「Emmet」の連載をはじめてました 2015-07-22 Emmetとは、主にHTMLやCSSの記述・編集を強力にサポートするプラグインです。様々なIDEやエディタに対応しています。 アドビ公式ブログの「Adobe Creative Station」でEmmetの連載をはじめてました。 全6回中4回まで掲載されたので、補足を含めて紹介します。 Emmetの連載 アドビ製品の機能などを紹介する「Adobe Pinch in」というサイトで連載のはじめましたが、現在は「Adobe Creative Station」に移行して、連載を行っています。 連載内容は以下のとおりです。 第1回 Emmetを薦める理由 第2回 Emmetの省略記法を使って、HTMLを素早く入力する 第3回 エディタのコードヒントよりも早い！EmmetのCSSの記法とは？ 第4回 Emme
レスポンシブデザインの進化はWebの常識を変えるか？ | ゆっくりと…
ある記事 によれば、レスポンシブ Web デザインを採用するサイトの 72% が、デスクトップとモバイルに同じリソースが使われているそうです。またそれらリソースの 60% 以上が画像 という統計や、モバイル用に画像を最適化すれば、データ量を 72.2% 削減できる という調査結果もあります。 ということで、レスポンシブ画像のことを調べていていましたが、その技術進化というか、紆余曲折も含めて色々とある様です。 最新技術を素早く取り入れることはもちろん大事ですが、特に過渡期においては、変化に強いサイトを作るためにも技術の先行きを見極めることが重要です。そこでタイトルのような視点で、これまでの経緯をつらつらと辿ってみました。 自分としてのテーマは、「じゃあ、今、どうするか？」だったのですが…。読んで下さる方の何かに役立つかどうかは甚だ心もとない記事です。 ちなみに今回記事で取り上げた話題について
マイクロデータとschemaの現状 – 構造化マークアップをSEOに活かすには - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
昨年行われたSMX Advancedで議論された構造化マークアップに関するセッションの書き起こし記事を。少し前のイベントになりますが、もちろん今でも十分通じる内容です。 — SEO Japan 先週、私はSMX Advancedセッション「マイクロデータ & Schemaからリッチスニペットへ: 高度なSEO向けのマークアップ」に参加した。このセッションでは、エリザベス・オスメロスキ氏が進行役を務め、Searchmetrics社を設立したマーカス・トバー氏、Scripps Network社でSEMディレクターを務めるジュリア・ゴース氏、そして、Koshkonong LLCJのCEO、スティーブン・スペンサー氏が、講演者に名前を連ねていた。 このセッションが始まる前、スポンサーのブルース・クレイ氏が、スティーブン・スペンサー氏と私に対して、複数のschema/マークアップのタイプをデータハイ
http://inputxoutput.com/html-doctype/
For full functionality of this site it is necessary to enable JavaScript. Here are the instructions how to enable JavaScript in your web browser.
HTMLの名前空間(namespace)について掘り下げてみる
2013/03/11 この記事は書かれてから1年以上が経過しており、最新の情報とは異なる可能性があります techHTMLnamespaceOpenGraphRDFa 例えば、 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml"> 『こういうのを HTML に埋め込んでください』とか、 <meta property="og:title" content="ソーシャル用のタイトルがここに入る"> <meta property="og:type" content="article"> 『この記述を入れておきましょう』とか、 <fb:like url="***" layout="button_count" widt
Markdown記法
HTMLは、手軽なマークアップ言語ですが、開始タグや終了タグなどあり、文章作成やちょっとしたメモ書きには不向きです。 今回紹介するのは、Markdownという軽量なマークアップ言語です。 GitHubのREADMEや、Tumblrなどでも採用されており、様々なCMSのプラグインも存在しています。 汎用性が高く便利な記法なので紹介します。 Markdownとは Markdown は、文書を記述するための軽量マークアップ言語のひとつである。 「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML(もしくはHTML)文書へと変換できるフォーマット」として、ジョン・グル―バー(John Gruber)とアーロン・スワーツ(Aaron Swartz)によって考案された。 Markdownの記法の多くは、電子メールにおいてプレーンテキストを装飾する際の慣習から着想を得ている。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コーディングなんかこわくない！ アレルギー克服講座
現場で使える効果的なHTML&CSS構造設計（Effective HTML&CSS）
