Scroll To Text Fragment と :~:text | blog.jxck.io
Intro ページ内の特定の位置へのスクロールは、 URL フラグメントと HTML の ID 属性を用いて行われていた。 しかし、 ID を持たない要素へのスクロールというユースケースをカバーするために、フラグメントの拡張仕様が提案されている。 Chrome がフラグ付きで実装しているため、この仕様の特徴について解説する。 id 属性とフラグメント 従来の仕様では、 HTML 内にある ID 属性を URL フラグメントに付与することで、その要素まで自動でスクロールするという仕様になっていた。 https://html.spec.whatwg.org/multipage/browsing-the-web.html#try-to-scroll-to-the-fragment https://html.spec.whatwg.org/multipage/browsing-the-web.ht
普通の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
フロントエンドチェックリスト（日本語訳） - Qiita
GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau
RSSが衰退し、SNSが繁栄する時代に改めて考えたい、ニュースリリースのマークアップ
7月下旬のことですが、またひとつフィードリーダーが終了してしまいました。 【重要】Live Dwango Reader/LDR Pocketサービス終了のお知らせ(blog.livedoor.jp) 終了の理由はこの数年で利用者も大幅に減少しており、サービスとしての役割を終えたとのことですが、ユーザーが別サービスに移行したというより、RSS/Atomフィードで新着をチェックする需要そのものが減っているのでしょうね。代わりに今はSNSで更新告知をしたり、プッシュ通知ができるサービスも増えたりしています。 RSS/Atomフィードでの更新チェックは、10分に1回、30分に1回などの間隔で巡回をするため、 リアルタイム性に劣る 更新頻度が少ないサイトほど無駄な通信の割合が高い など時代遅れの面もありますが、サイトの新着情報を確実に把握するという意味で総合的に考えると、その特性は未だ捨てがたいもの
本家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
An alt Decision Tree
This decision tree describes how to use the alt attribute of the <img> element in various situations. For some types of images, there are alternative approaches, such as using CSS background images for decorative images or web fonts instead of images of text. Does the image contain text? Yes: … and the text is also present as real text nearby. Use an empty alt attribute. See Decorative Images. … a
ราคาบอล 0.5/1 เจอราคานี้อย่าหนี เจอแล้วต้องเล่น - Sport tips
หากท่านคิดว่าท่านจะไม่ชนะเดิมพันฟุตบอลแลย ท่านก็ไม่ต้องเล่นมัน แต่ถ้าท่านอยากจะเล่นแล้วได้กำไร ท่านต้องกล้าลอง กล้าเสี่ยงที่จะเล่น ซึ่งเราจะแนะนำให้รู้จักกับ ราคาบอล 0.5/1 ราคาบอลที่จะทำให้ท่านทำกำไรจากการแทงบอลได้ ราคาบอล 0.5/1 คือราคาบอลของทุกคน ราคาบอล ครึ่งควบลูก เป็นราคาที่ใครๆก็เล่นได้ มันเป็นราคาบอลของมหาชน ที่อยากจะทำกำไรจากการแทงบอล ราคานี้มีให้เล่นทั้งแบบ แฮดนิแคป และ สกอร์สูง-ต่ำ ที่เรี
WEBページに設定しておくと良いHTTPヘッダとかメタタグとか - Qiita
header('Vary: User-Agent'); header('Vary: Accept-Encoding'); header('Vary: Accept-Language'); header('Vary: Cookie'); プロキシサーバなどのキャッシュを適切に行ってもらうために必要 UserAgentなどの条件によってコンテンツの内容が変わる場合は、別々にキャッシュしてもらう。 HTTP圧縮に対応しているなら、Accept-EncodingをつけるとブラウザがHTTP圧縮したコンテンツを受けてくれる。 参考 http://web-tan.forum.impressrd.jp/e/2013/05/17/15269 http://kaigai-hosting.com/opt_site-specify-vary-header.php Cache-Control: Webサーバから返
HTMLとXMLにおける言語タグ
HTMLとXMLはまた、空の文字列を使用することで言語の継承を防ぐ手段を提供します。すなわち、xml:lang=""。これは本質的に、この情報にどの言語も関連付けないことを表します。 以下の文書は、どのように言語タグを組み立てるかについての追加の詳細を提供します。 言語タグを組み立てる RFC 3066のような、RFC 5646とそれ以前の仕様との間の主な相違点は、以下の通りです： 有効なサブタグを探すただ1つの場所、新しいIANA registryがあります。 サブタグは固定された位置と長さを持ちます。これは、言語タグのマッチングをより簡単にします。 言語タグの潜在的な構成要素の周りにより多くの柔軟性を持ちます。 RFC 3066は基本的に、そのままの言語コードか、言語コードに国コードを加えたもの、あるいはIANA language tag registryで特別に登録されたごく少数の値
IE では利用できない機能、IE を切り捨てる事で得られるメリットの一覧 - Qiita
このエントリでは、Web Developer が IE 対応を止めた場合に得られるメリットがどれ位あるのかを示します。 前提として IE 7, 8, 9, 10 のサポートは 2016-1-13 に終了し、IE 11 が残りました。 IE 11 は IE でしか動かないシステム(特定企業向けに書かれたシステムなど)を利用するためのブラウザとして2023年までサポートが継続するそうです。 ずるずるとサポートを強要するビジネス層、エンジニアとの対話の不在、揃わない各社の足並み、繰り返される10年前の記憶 ES6 が本格的に活用される段階(2017年後半〜)になると、 多くの Web Developer が ES6 をサポートしない古いブラウザを「コストをかけて今後もサポートする」か「切り捨てる」か… を真剣に検討する事になります。 Babel などの補助ツールを使う事で部分的に対処療法も可能で
ヘッダーを固定した表のアクセシビリティ - Qiita
この記事は Web Accessibility Advent Calendar 2015 8日目の記事です。 ヘッダーを固定した表のアクセシビリティについて、最近調べる機会があったので、その内容を報告します。 ヘッダーを固定した表とは、表のボディセルだけがスクロールし、ヘッダーはスクロールしない表のことです。 ヘッダーが行の場合はこんな感じ: ヘッダーが列の場合はこんな感じです: まず考えるべきこと 実装にもよるため一概にはいえませんが、ヘッダーを固定した表は往々にしてアクセシビリティを低下させます。 後述するように、アクセシビリティを向上させる方法はありますが、ハックに近く、推奨できる方法ではありません。 まずはヘッダーを固定しない表を使えないか検討してください。 よくある実装とその問題点 ヘッダーを固定した表でよくある実装は、ヘッダーとボディセルをそれぞれ別々のtable要素とする実装
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コードレビュー なんてしてられるかッ!!
HTML 5.2 Implementation report
Know it all
コーディングなんかこわくない！ アレルギー克服講座
