aタグで#topにリンクするとページ先頭にスクロールするのは仕様 - hogashi.*
はてなエンジニア Advent Calendar 2022 - Hatena Developer Blog の 2023/1/5 の記事です。 id:hogashi です。 目次 目次 3行 こういうやつ 仕様を眺める 追記1: おまけ 追記2: id="top" な要素があるときは？ 3行 a タグの href 属性に #top と書くと、クリックしてページの先頭にスクロールできる、という話をしているのを見て、 それって仕様なんだっけ、と思って調べたところ、 仕様でした こういうやつ クリックしてこのページの先頭にスクロールする <a href="#top">クリックしてこのページの先頭にスクロールする</a> 仕様を眺める MDN の a タグのページにちょろっと書いてあって、 HTML の仕様に定義されているよ、とある <a>: The Anchor element - HTML:
CSS System Colors
In another episode of “I’ve been a web designer for how long and am only now learning about this?” let’s talk about CSS system colors. Background On my blog, I support light and dark mode which is all controlled by prefers-color-scheme in my stylesheet. However, the implementation might not be what you imagine. A common pattern for doing light/dark mode is to use CSS custom properties for color va
ContentEditable のハマりどころと対処法 - ボクココ
ども、@kimihom です。 前回の記事で、ContentEditable についての概要をざっと書いた。ContentEditable の持つ魔力については以下の記事を参照いただきたい。 www.bokukoko.info さて、本記事では実際に ContentEditable を使って実装しようと思った際に気をつけておいたほうがいい点をざっと挙げていく。もし今後 ContentEditable を使った実装をする方の参考になれば幸いだ。 タグ挿入後の罠 ContentEditable を使うなら、何らかのテキスト入力でリアルタイムに HTML タグの挿入をする(document.execCommand('insertHTML'))といった実装をしていくことになるだろう。 実際上記コマンドを実行するだけなら問題なく動作するが、問題はその後にやってくる。例えば <span> タグを動的に
WebComponentsへの気持ち - console.lealog();
この記事では、 ReactやVueではなくWebComponentsだけを使いたい気持ちを胸に、とある社内プロジェクトをやってみての学び 巷にあふれるWebComponentsに対する見方への違和感 についてメモっておきます。 ただ「WebComponents」の語がもつ意味をきっちり定義してるわけではないので、そのへんは雰囲気で察してください。 そのせいで勘違いされがちな概念なんかも、知らんけど。 まずは巷にあふれる意見に対する気持ちから。 (React|Vue|Xxx)はもう古い、これからはWebComponentsだ！ 勝手なイメージですが、こういう認識の人いるよね・・？ 個人的には、「いや、WebComponentsはそういう技術じゃない」と思った・思ってます。 以下、ReactもVueもAngularも「ウェブアプリケーションを作るための技術」であるが、WebComponents
WebSocket サーバの実装とプロトコル解説 - Block Rockin’ Codes
intro なんだかんだ WebSocket を使ってるのに、 WebSocket サーバを自分で書いたことが無かったので、RFC も落ち着いてきたここらで、仕様を読みながら実装してみようと思いました。 "WebSocket サーバ 実装" とかでググると、 Socket.IO とか pywebsocket で WebSocket アプリ作って、「WebSocket サーバを実装」みたいなタイトルになってることが多いみたいですが、 (Apache に PHP で HelloWorld して、「HTTP サーバ実装しました」とは言わないよね。) この記事では、 WebSocket プロトコルをしゃべるサーバ自体を実装します。 といっても、全部やるのはちょっと大変だったので、基本的なテキストメッセージのやりとりの部分だけやって、エコーサーバができるところまでやりました。 完成版のソースは以下で
プログラム組んだら負け！実はHTML/CSSだけでできること2015夏
2. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 平尾優典（ひらお ゆうてん） === 株式会社ディーゼロ Webエンジニア ## コミュニティ活動 - 福岡フロントエンド友の会 Fukuoka Frontend Frogs - 福岡マークアップ勉強会 - baserCMSユーザー会 Yusuke Hirao @cloud10designs 3. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 ## コミュニティ紹介 ### 福岡フロントエンド友の会 Fukuoka Frontend Frogs ### 福岡マークアップ勉強会 ### baserCMSユーザー会 「井の中の蛙」にはならないようにと集まった フロントエンドエンジニアのためのコミュニティ。 Webコーディング・アプリ開発の悩める蛙たちが その場で話題を決めて、アンカンファレンス形式で
Emmet Documentation
Emmet — the essential toolkit for web-developers Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow: <!doctype html> <html lang="en"> <head> <title>Demo</title> </head> <body> | </body> </html> ~~~ tooltip: Type CSS-like abbreviation type: ul#nav>li.item$*4>a{Item $} wait: 1000 tooltip: Run “Expand Abbreviation” action to expand it into HTML ::: “Expand Abbreviati
HTMLデザインを崩さないテンプレートエンジンの作り方
1. RubyKaigi 2010 HTMLデザインを崩さない テンプレートエンジンの作り方 makoto kuwata http://www.kuwata-lab.com/ English ver: http://slidesha.re/a3s2ZZ copyright(c) 2010 kuwata-lab.com all rights reserved. 1 2. はじめに 目的 ✤ テンプレートエンジン利用者に、正しい 知識を理解してもらう ✤ テンプレートエンジン設計者に、あるべ き姿を考えてもらう 動機 ✤ 間違った説明が蔓延しており是正したい ✤ eRubyは決して理想解ではないことを 知ってほしい 対象者 ✤ テンプレートエンジンの利用者と設計者 copyright(c) 2010 kuwata-lab.com all rights reserved. 2 3. お詫び ✤
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
emmet-vimの使い方 | Memo on the Web