An HTML Switch Control
We’re very excited to introduce a new HTML form control as part of Safari 17.4: a switch. Two switches as seen on iOS, with the second switch using a custom CSS accent-color. The HTML for this example looks roughly like this: <style> .special { accent-color: papayawhip } </style> <input type=checkbox switch checked> <input type=checkbox switch checked class=special> Switches are a popular control
JS+SVGで液晶画面風の表示をつくる | tech - 氾濫原
液晶風の画面は決まった形をオン・オフするだけなので、canvas にコードで描くのは大変なだけで無駄が多い。かといってセグメントを1つ1つ画像にわけて座標指定で配置していくのも面倒くさい。 と考えていくと SVG を埋めこんで、SVG の要素を JS で操作するのが効率が良い。ワークフローとしては SVG の作成と JS の実装で綺麗に境界を作ることができる。 Inkscape Inkscape の良いところは以下の点 XML エディタが UI と連動している レイヤーやオブジェクトを選択すると該当箇所にエディタ上で跳べる 構造をコントロールしやすい 画像を編集するというより SVG の XML を編集するUIというイメージ Inkscape でオブジェクトに名前をつけると、svg 上では inkscape:label 属性に入る。これを利用して JS から操作すれば Inkscape で
マークアップのわかり方
この記事は、2022年10月28日に開催されたDIST.37「マークアップな夜」での発表「マークアップのわかり方」をもとにしたものです。当日は話せなかった内容も大幅に追加しています。 現代における「マークアップ」とはどのような行為なのか。いかにそれと向き合っていけばいいのか。そういったことについて考えてみます。 マークアップの議論においては、「マークアップには正解がない」という意見が決まって出ます。正解がないと言うならば、たいていなんであってもそうです。たとえばCSSやJavaScriptの書き方には「正解」があるのかと考えてみると、必ずしもそうではありません。 しかし、ことさらマークアップにおいてこれがよく言われる理由としては、妥当性を判断する基準がわからない、ということでしょう。 というのも、CSSなら望む通りの見た目になればとりあえずOKだし、JavaScriptでも意図した通りの振
HTMLのa要素にはhref属性を指定しなくてもよい: Days on the Moon
HTMLのa要素はハイパーリンクを表す要素であり、リンク先のURLをhref属性に指定します。しかし、a要素の役割はそれだけではありません。HTML標準によれば、a要素は「リンクとなりうる箇所のプレースホルダー」として使うこともできます。この場合はhref属性を指定しません。 リンクとなりうる箇所の例として、ナビゲーションやタブUI、パンくずリストなどでの「現在の項目」があります。 <nav> <ul> <li><a href="/">ホーム</a></li> <li><a>最新記事</a></li> <li><a href="/archives">アーカイブ</a></li> <li><a href="/settings">設定</a></li> </ul> </nav> ReactなどJSXでa要素を生成する場合、href属性を指定しないためにはhrefプロパティにundefinedを
「HTMLでは環境依存文字（①や©など）を文字参照にしなければいけない」という誤解と、本当に置換すべき文字
HTMLファイルで特殊記号を使う際、① は ①、© は © のように置き換えて書かないといけないものだと思いこんでいないでしょうか。 現代ではそれは誤解です。 UTF-8では特殊記号の文字参照は不要 そもそも環境依存文字とは、データを扱う機種・ソフトウェアなどの違い（文字コードの割り当ての違い）により表示に違いが出てしまう文字のことでした。 例えばShift_JISには © が含まれておらずそもそも保存できなかったり、 ① などの丸数字は含まれているものの、WindowsとMac OS（当時）の割り当ての違いにより正しく表示できなかったりしました。[1] しかし現在ではUnicodeによって文字コードは統一化されており、その問題はほとんど起きなくなっています。 近年では多くの場合 UTF-8 でファイルを記述すると思います。 HTMLファイルの文字エンコーディングが
開発・運用しやすくするHTMLコーディングのTips - NRIネットコムBlog
スパゲッティ はじめまして こんにちは、高須賀 淳と申します。中途採用で入社して8年目です。 普段は、HTML・CSS・JavaScriptを用いてWebサイトの設計・実装を中心に活動をしています。 今回のお話は 「開発・運用しやすくするHTMLコーディングのTips」と題して具体的なソースコードを交えてお話ししたいと思います。 HTMLは、なんとなく書いてなんとなく出来てしまう一見すると簡単な言語です。 それ故に闇雲にコードを書いてしまうといつの間にかスパゲッティーコードになったり、 何のコードか意味がわからなくなり、いざ修正しようとした時にどこから手をつけてよいか分からない状態になっていたりと困ることはないでしょうか。 それらを解決する第一歩として、HTMLコーディングのコツをまとめます。 HTMLコーディングを始めたばかりの方や普段アプリ開発メインでHTMLを片手間で書いている方のヒ
絵文字をファビコンとして表示する簡単な方法
2021/5/17追記 2021年5月現在、Safariではこの方法に対応していません。Safari用に別途ファビコンを用意する必要があります。 ちょっとしたWebサイトを作るときに地味に面倒なのがファビコンです。わざわざ画像を作るのも、どこかからちょうど良い画像素材を持ってくるのも、アップロードするのも面倒だったりします。 そんなときは絵文字をファビコンとして使いましょう。 やり方 先にやり方を載せておきます。これをHTMLの<head>の中へコピペすればファビコンとして絵文字が表示されます。 <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text x=%2250%%22 y=%2250%%22 style=%
HTML Sanitizer API - Web APIs | MDN
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that thi
ai2html
ai2html is an open-source script for Adobe Illustrator that converts your Illustrator documents into html and css. Here are examples of how we’ve used the script at The New York Times and examples of how others have used it. Share your ai2html projects on Twitter, Delicious, etc. using #ai2html. Table of contents How to install ai2html How to use ai2html Frequently asked questions Settings Point t
HTML Tree
Downloaded {{ stats.size }}. From server cache. Took {{ stats.took }} seconds. {{ stats.took_download }}ms to download, {{ stats.took_parse }}ms to parse, {{ stats.took_process }}ms to process. Tip! Type in a URL in the box above and hit Enter. For example
GitBook·Markdownで書いて電子書籍/HTMLを生成 MOONGIFT
電子書籍を作るのは大変というイメージがあります。ePub自体は単なるZipファイルですが、その内容がXML/XHTMLなのが若干面倒さを感じさせます。専用のエディタもありますが、書き慣れたエディタの方が筆も進むというものです。 そんな訳で使ってみたいのがGitBookです。Markdownで書いて、ePub/PDFに変換するGit/GitHub連動型電子書籍作成ツールです。 GitBookの使い方 早速サンプルの電子書籍を見てみましょう。HTMLにも変換できます。 JavaScriptの勉強です。左側に目次、右側にコンテンツという形式になります。 ページ切り替えは矢印キーでもできます。ページの内容が1画面に収まっているのがいい感じです。 目次を隠すことが出来ます。 検索はインタラクティブにできます。 JavaScriptをWeb上で実行できます。今後、RubyやPythonにも対応させる予
HTML の構造を YAML で吐き出すスクリプトを書いた - ヤルキデナイズド
pixiv の HTML がどんどん変わって pixiv gem が追従できなくて困った。ので楽するやつを書いた。 HTML を読み込ませると要素の親子関係と各要素の属性を YAML にして書き出す。テキストノード他は無視する。 XPath か CSS Selector で不要な要素を取り除くことができる。 !omap で書き出してあるから map の順序が固定されていて diff しやすい。 pixiv の画像一覧ページなどを定期的に取得して HTML で保存しておき、最新の2つから広告やワンタイムトークンを削除しつつ YAML 化して差分を取る。で構造に変化があれば対応する。テストも自動化したいけどそれはいずれ。 使い方： html2yaml.rb [-x, --exclude=<xpath or css>] \ [-i, --include=<xpath or css>] \ <UR
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - orf/html-query: jq, but for HTML
GitHub - vercel/satori: Enlightened library to convert HTML and CSS to SVG
GitHub - github/jtml: Write HTML in JavaScript, using template-tags.
Qiitaで使えるHTMLタグは？ - Qiita