はてなブックマーク

HTMLのチェックボックス（<input type="checkbox">）やラジオボタン（<input type="radio">）をCSSで装飾したいというのはよく聞く話です。2024年現在は、HTMLの記述は簡単なまま、CSSで自由度の高い装飾も実現できるようになっています。 結論 従来の手法 appearanceプロパティを使う手法 外枠の配置 未チェックとチェック済みの切り替え 強制カラーモードへの対応 透明なボーダーやアウトライン 内向きの影や背景グラデーション 画像やテキスト ブラウザ組み込みの外観 状態に応じたスタイルの指定 参考文献 結論 単に色調を整えられればよいという場合は、accent-colorプロパティを使います。 input[type="checkbox"], input[type="radio"] { accent-color: #d31; } くだもの や

この記事はCSS Advent Calendar 2022の9日目の分です。 CSSのボックスモデルにおいては、ボーダーの内辺とパディングの外辺の間にスクロールバーが配置されます。最近はどのOSでもオーバーレイスクロールバー（スクロールバーが内容の前面に覆いかぶさるようなもの）が主流となり、スクロールバーが存在してもしなくても内容の幅が変わらないようになっています。一方、クラシックスクロールバー（スクロールバーが常に表示されるようなもの）が使われる環境では、overflow: autoな要素において内容がはみ出すときとはみ出さないときで内容の幅が変わってきます。 クラシックスクロールバーが使われる環境でも内容の幅を一定に保ちたいという場合は、scrollbar-gutterプロパティを使います。scrollbar-gutter: stableを指定すれば、スクロールバーが表示されないときで

この記事はCSS Advent Calendar 2022の9日目の分です。 CSSのボックスモデルにおいては、ボーダーの内辺とパディングの外辺の間にスクロールバーが配置されます。最近はどのOSでもオーバーレイスクロールバー（スクロールバーが内容の前面に覆いかぶさるようなもの）が主流となり、スクロールバーが存在してもしなくても内容の幅が変わらないようになっています。一方、クラシックスクロールバー（スクロールバーが常に表示されるようなもの）が使われる環境では、overflow: autoな要素において内容がはみ出すときとはみ出さないときで内容の幅が変わってきます。 クラシックスクロールバーが使われる環境でも内容の幅を一定に保ちたいという場合は、scrollbar-gutterプロパティを使います。scrollbar-gutter: stableを指定すれば、スクロールバーが表示されないときで

この記事はCSS Advent Calendar 2022の1日目の分です。 HTMLのdialog要素を使うとモーダルダイアログを表現できます（使い方によってはモードレスダイアログも表現できます）。ただし、そのままだとモーダルダイアログを開いているときに、マウスホイールなどによってダイアログの背景（文書全体）までスクロールしてしまいます。 モーダルダイアログの背景をスクロールさせたくない場合、これを書いている現在のCSS仕様草案によれば、以下の記述で実現できるはずです（デモ）。 dialog { overscroll-behavior: contain; } しかしながら、この方法はChrome canary 110では期待通り動作しますがマウスホイールによるスクロールは防げますが、矢印キーやPageUp/PageDownキーによるスクロールは防げず、Firefox nightly 10

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 アドベントカレンダーの 22 日目の分、兼 JavaScript アドベントカレンダーの 22 日目の分です。 Web Platform Tests をご存じでしょうか。Web ブラウザ間の相互運用性を高めるための、様々な Web 標準技術に関するテストスイートです。主要 Web ブラウザは Web Platform Tests を開発プロセスに取り込み、互換性の向上やリグレッションの防止を図っています。 Web Platform Tests はあなたが今閲覧に使っているブラウザで実行できます。試しに HTML 標準に関するテストを実行してみましょう。https://wpt.live/ からディレクトリをたどって https://wpt.live/html/syntax/parsing/ に行くと、数多くのテストファイルが並んでいます。 ファイルリストの先頭にある D

この記事は HTML アドベントカレンダーの 20 日目の分、兼 JavaScript アドベントカレンダーの 20 日目の分です。 HTML のタグといえば、要素の開始位置、終了位置、そして属性を指定する記述のことですね。開始タグは小なり記号 (<) の後に要素名が続きます。しかしながら、タグに既述した名前とは別の名前の要素が生成される場合があります。 以下の JavaScript コードを実行すると、JavaScript コンソールには (IMAGE ではなく) IMG と出力されます。タグに記述された名前は image なのに、img 要素が生成されているのです。 const div = document.createElement('div'); div.innerHTML = '<image src="" alt="">'; console.log(div.firstChild.

この記事は HTML アドベントカレンダーの 19 日目の分、兼 Perl アドベントカレンダーの 19 日目の分です。 Perl で HTML をパースするモジュールはいくつもあります。 HTML::Parser そのままの名前ですね。HTML コードをパースしていき、開始タグ、終了タグ、テキストなどを認識するとそれをイベントとして知らせてくれる、プッシュ型のパーサーです。 HTML の要素の内容モデルや、ある要素のタグが省略可能かといった知識は持っていません。あくまでもタグやテキストなどの出現を知らせるだけで、文書木を構築するわけではないからです。 逐次的なパースに対応しています。HTML 文書全体を表すコードを一気に入力として与えなくてもよく、HTTP 通信中に受け取った分からパースしていくといったことが可能です。 Web 製作者の意図を汲み取ろうと努めており、「壊れた」HTML コ

この記事は HTML アドベントカレンダーの 14 日目の分です。 HTML の属性値のパース規則は、(一般的な要素の内容として出現する) テキストのパース規則とは少し異なります。 わかりやすいところでは、属性値においては小なり記号 (<) をそのまま書けます。以下の HTML コードにおいて、span 要素の title 属性の値も内容のテキストも結果的には " < " という値になりますが、テキストに関しては内部的にパースエラー (invalid-first-character-of-tag-name; タグの名前の 1 文字目が無効) が発生しています。 <span title=" < "> < </span> 文字参照の扱いにも差異があります。以下のように amp という文字参照の名前の後に ASCII の英数字が続く場合、属性値においては "&ampm" という値に解釈されます。

この記事は HTML アドベントカレンダーの 13 日目の分です。 その昔、HTML 4 の時代には以下のようなコードは仕様違反でした。a 要素はインライン要素であり、その内容にブロックレベル要素である h3 要素は取れなかったからです。 <a href="url"><h3>見出し</h3></a> 現在の HTML 標準では、a 要素、ins 要素、del 要素などは内容モデルが透過的 (transparent) であるとされ、上述のコードも仕様に適合しています。 透過的内容モデルの要素は、その子要素から見ると透過的です。言い換えると、透過的内容モデルの要素が取れる内容は、その親要素が取れる内容を引き継ぎます。ある a 要素の親要素が div 要素なら、その a 要素の内容はフローコンテンツ (flow content) となります。親要素が p 要素なら、内容は記述コンテンツ (phr

この記事は HTML アドベントカレンダーの 10 日目の分、兼 JavaScript アドベントカレンダーの 10 日目の分です。 HTML 標準では、HTML 文書を JavaScript などのプログラミング言語から扱うためのインターフェイスも定義しています。そのひとつが HTML 要素の innerText プロパティ、要素の内容を文字列として取得・設定するプロパティです。かつて Internet Explorer が独自に実装し、他の Web ブラウザも追従した結果として標準化されたものですね。 innerText プロパティの値の取得 innerText プロパティで取得できる値は、ブラウザにレンダリングされたようなテキスト内容となります。CSS で display: none; が指定された要素の内容は含まれませんし、display: block; が指定された要素の内容の前

この記事は HTML アドベントカレンダーの 5 日目の分です。 HTML 標準では、誤りのある HTML コードを Web ブラウザがどう解釈すべきかも定められています。例えば、span 要素の終了タグを書き忘れた場合、 const c = document.createElement('div'); c.innerHTML = '<p><span>foo</p><p>bar</p>'; console.log(c.innerHTML); // => "<p><span>foo</span></p><p>bar</p>" 最初の段落が終了する地点で span 要素も終了すると解釈されました。ここで span 要素を b 要素に変えてみるとどうなるでしょう。 const c = document.createElement('div'); c.innerHTML = '<p><b>foo<

この記事は HTML アドベントカレンダーの 7 日目の分です。 HTML の属性値の先頭または末尾にスペースなどの空白文字を記述したとき、それらの文字がそのまま扱われる場合と無視される場合があります。例として form 要素の属性を見ていきましょう。 <form method=" post " action=" /edit " target=" _blank " rel=" noopener "> method 属性の値は特定のキーワードであり、空白文字を含む値は指定できません。" post " は無効な値として無視され、デフォルト値である "get" を指定したのと同じ扱いになります。 action 属性の値はスペースで囲まれる可能性のある空でない妥当な URL であり、先頭と末尾の空白文字の並びは無視されます。この場合は "/edit" を指定したのと同じ扱いになります。 targe

この記事は HTML アドベントカレンダーの 4 日目の分です。 HTML の dl 要素 (説明リスト、いわゆる定義リスト) は、名前と値 (用語と説明) からなるグループの連なりを表します。ひとつのグループには dt 要素と dd 要素がそれぞれひとつ以上含まれます。 よく見るのは dl 要素の直下に dt 要素と dd 要素が来る形でしょう。以下の例では dl 要素にふたつのグループが含まれます。 <dl> <dt>琥珀</dt> <dd>寒天を使い透明感のある菓子の総称。</dd> <dd>琥珀糖のこと。</dd> <dt>琥珀糖</dt> <dt>干琥珀</dt> <dd>寒天を煮て固め表面を乾燥させた菓子。シャリっとした表面とプルっとした中身の対比が癖になる。</dd> </dl> スタイルシートを適用したり、マイクロデータの項目を作成したりするために、グループひとつずつを表す

この記事は JavaScript アドベントカレンダーの 4 日目の分です。 今やあちこちで使われている絵文字ですが、その中には 1 文字に見えるのに複数の文字 (符号位置) から構成されるものがあります。例えば「👨‍👩」という男女が並んだ絵文字は、U+1F468 MAN、U+200D ZERO WIDTH JOINER、U+1F469 WOMAN の 3 つの符号位置からなります。 JavaScript の正規表現でこのような絵文字にマッチさせようとすると正規表現パターンが長大になってしまいます。また、文字クラス [...] 内にこのような絵文字を記述すると、「U+1F468、U+200D、U+1F469 という符号位置の並び」ではなく「U+1F468、U+200D、U+1F469 のいずれかの符号位置」にマッチしてしまいます (/u フラグが有効な場合)。 これを解決するための提案

結論 type X = 'foo' | 'bar' | (string & {}); のように、文字列リテラル型の共用体型に | (string & {}) を付け足した型 X を定義します。X 型は任意の文字列を受け付けますが、IDE (Visual Studio Code など) で X 型の値を入力するときには 'foo' と 'bar' が自動補完の候補として提示されます。 解説 単純に type X = 'foo' | 'bar' | string; と書いてしまうと、共用体型の各要素がまとめられて、X は単なる string 型になってしまいます。{} 型は null と undefined を除く任意の値を受け付けるので、string & {} 型は実質的に string 型と同一なのですが、TypeScript 4.4 の時点では同一扱いされず、共用体型の各要素がまとめられ

Web ブラウザで使われる JavaScript ライブラリの中には、グローバル変数 (window オブジェクトのプロパティ) をはやすものがあります。Google Tag Manager の window.dataLayer や、Canva ボタンの window.Canva などです。 そうしたグローバル変数をあちこちのモジュールから直接操作していると保守性が下がってしまうので、ラッパーとなるモジュールを用意したいところです。グローバル変数を直接操作するのはラッパーモジュール内のみにとどめ、他のモジュールはラッパーモジュールを介して外部ライブラリにアクセスするという仕組みです。 このとき、ラッパーモジュール内でグローバル変数にアクセスしつつ、他のモジュールではそのグローバル変数にアクセスできないようにするには、どうしたらよいでしょうか。 TypeScript でのグローバル変数の宣言

Windowsで一時的にプロキシ自動設定ファイル(プロキシ自動構成スクリプト、pacファイル)を利用したいとき、 プロキシ自動設定ファイルを配信するHTTPサーバーを立てなければいけない。(以前はローカルファイルが使えたが、Windows 10 Creators Updateから使えなくなった。) Windowsの「プロキシ」設定画面で「スクリプトのアドレス」を指定しなければいけない。 という手間があります。 そこで、プロキシ自動設定ファイルを配信するHTTPサーバーを立ち上げ、そのURLをWindowsのプロキシ設定に指定するPowerShellスクリプトを書きました。 上記リンク先のスクリプトをローカルに保存し、Explorerでスクリプトファイルのコンテキストメニューから「PowerShell で実行」を選択すると、コンソールウィンドウが開き、スクリプト中に記述されたプロキシ自動設定

ECMAScript 2018で正規表現の戻り読み(lookbehind)が追加されました。 /(?<=foo)bar/.test('foobar'); // => true 'foobar'.replace(/(?<=foo)bar/, 'baz'); // => 'foobaz 正規表現の戻り読みと言えばPerlでは1998年7月リリースのバージョン5.005からサポートしており、そこから20年もたってと思いたくなるかもしれません。しかし、ECMAScript (JavaScript)のそれはPerlのものとは一味違います。なんと戻り読みの中で量指定子(*、+、?、{n}など)を使えるのです。 // JavaScriptなら(?<=...)の中で+が使える。 /(?<=fo+)bar/.test('foobar'); // => true # Perlでは(?<=...)の中で+を使お

この記事の内容は古びている。この記事が最初に執筆されたのちに、CSS Overflow Module では line-clamp プロパティが定義された。この line-clamp プロパティは max-lines、continue、block-ellipsis プロパティに対する一括指定プロパティである。 結論からいうと、CSS の -webkit-line-clamp プロパティは使わないほうがいい。現状および今後の Web ブラウザでのサポートが望めないからである。 -webkit-line-clamp CSS プロパティとは何か 複数行でも3点リーダーをきかせることができるというもの。 このプロパティはどうやって使うか -webkit-line-clamp プロパティ単体では効果を持たず、他のプロパティと組み合わせて使う。 selector { display: -webkit-b

Kyoto.js #10で「知られてそうで知られてない少し知られてるECMAScript 2015 (ES6)の新機能」というライトニングトークをしたので、そのスライドに当日しゃべった内容や補足を追記して以下に掲載します。 自己紹介 nanto_vi 情報規格調査会SC 22/ECMAScript Ad hoc委員会 editional issueの報告 ECMAScript 2015 (ECMA-262 6th Edtition) クラス構文 アロー関数 ブロックスコープ Promise etc... 2015年にECMAScriptが大幅に改定されました。クラス構文やアロー関数の追加はあちこちで取り上げられているので皆さんご存知でしょうが、ここではあまり取り上げられていない地味な新機能を紹介します。 Unicodeの符号位置 // 🍣 '\uD83C\uDF63'; // ES5 '

「flex box layoutで中に長いテキストなどを含む幅可変要素のレイアウト - くらげだらけ」という記事が興味深いです。過去に「長い英単語を途中で折り返したいときの CSS の指定方法」にて、word-wrap: break-word と display: inline-block などの組み合わせには注意が必要 (word-wrap の指定が効かないように見えることがある) と述べたのですが、似たようなことが display: flex にも言えるようです。 この挙動は認識していなかったので CSS Flexible Box Layout Module Level 1 (flexbox 仕様草案、2016 年 4 月 2 日時点のもの) を見てみたところ、「4.5. Implied Minimum Size of Flex Items」(flex アイテムの暗黙的な最小サイズ)

Windows の操作全般および MS-IME で Emacs のようなキーバインディングを利用するための個人的なメモ。 Ctrl キーの位置調整 Change Key を利用。管理者として実行する。 CapsLock → Ctrl (左) カタカナ/ひらがな → Shift (右) 半角/全角 → Esc XKeymacs の設定 XKeymacs のスナップショットバージョンを利用。Explorer を「管理者として実行」し、その上で C:\Program Files にフォルダをコピー。 dot.xkeymacs 以下の内容でファイル %APPDATA%\dot.xkeymacs (たいていは C:\Users\{user}\AppData\Roaming\dot.xkeymacs) を作成。 (fset 'browser-back [browser-back]) (fset 'br

たまに漢字にマッチする正規表現パターンを書きたいときがあります。Perl の正規表現だと Unicode のスクリプト名を使って \p{Han} で漢字にマッチさせられるのですが、JavaScript ではそうはいきません。JavaScript の正規表現には以下のふたつの問題があります。 Unicode スクリプト名の指定 (\p{...}) に対応していない。 そもそも Unicode の符号位置に対してマッチさせられない (UTF-16 における符号単位に対するマッチになる)。 BMP 外の文字にマッチさせたいときは、サロゲートペアの符号単位を記述する必要がある。 これに関しては ECMAScript 2015 で導入された /u フラグで解決する見込み。 とはいえ、解決不能な問題というわけでもないので、Perl の \p{Han} を JavaScript に移植してみましょう。\

この「いくつかのブラウザ」とは IE のことを指していると思われますが、href プロパティに絶対 URL を設定しなおすことで、URL のスキーム部分を取得できるようになります。 // http://www.example.org/ 上で実行しているものとする。 var elm = document.createElement('a'); elm.href = '/foo?bar#baz'; // IE 6 / 7 で絶対 URL を設定。 // elm.href = elm.cloneNode(false).href でもよい。 elm.href = elm.getAttribute('href', 4); // IE (少なくとも 8 ～ 11) で絶対 URL を設定。 elm.href += ''; elm.protocol // => "http:" elm.hostname

集え変態プログラマ！JavaScriptの最短コードに挑んだコードゴルフ大会 in Code 2013 | DX.univ 呼ばれてないけど、ボクもコードゴルフしてみたよ - latest log Code 2013 というイベントで出されたというコードゴルフのお題「JavaScript でデジタル時計」を見ているうちに、自分でもやりたくなったので挑戦してみました。 基本方針 出力が複数行にわたるなら 1 行ずつ処理していくのが素直な手ですが、このお題においてはそれだとひとつの文字に対する処理が細切れになってしまいます。 そこで、ある文字の出力処理をまとめてやってしまいましょう。行ごとにではなく列ごとに処理を進めていくのです。 20 分 方針が決まれば早速コーディング。以前、渋谷から 10 分のゴルフ場で似たようなお題「banner」に取り組んだときは三十六進数表記を使いましたが、とりあえ

ヨーロッパ系の言語では基本的に単語の途中に折り返しを入れません。しかし、幅の狭い領域に長い英単語を記述するときや、笑いを表す「www…www」のように欧文文字を表現に組み込むときなど、欧文文字同士の合間で折り返したいと思うかもしれません。そのような折り返しの制御を CSS で行うにはどうすればよいのでしょうか。 2013 年 6 月時点の結論 word-wrap: break-word を使うとどうなるのか word-break: break-all を使うとどうなるのか word-wrap: break-word と word-break: break-all を両方使うとどうなるのか なぜ word-break: break-all ではなく word-wrap: break-word を勧めるのか どこに word-wrap: break-word を指定するのか position: