はてなブックマーク

【deprecated】 -ms-high-contrast を CSS ハックに使ってはいけない、ただひとつの理由 2017 年 4 月 26 日 2025-10-02 記: この記事は非推奨 (deprecated) です ご存知の方も多いとは思いますが、この記事で紹介している -ms-high-contrast という Microsoft 独自のメディア特性は Edge v138 にて完全に廃止されました。Internet Explorer (IE) についてもすでに Microsoft のサポートは終了しておりますので、基本的にこの世の中にはもう -ms-high-contrast を理解するブラウザは存在しないということになります。 理解するブラウザがない以上、ここに書かれているようなハックは行いたくても行うことができませんので、もうこの記事でわざわざ「使わないように」と警告する

なんとなく React とかいうやつを試したくなって、とりあえず Hello World って表示するだけのものでも作るか…と思ったのだけど、まったく前提知識がないものだから完成するのにめっちゃ時間がかかった、という話でも書いておく。多少脚色はある。 いきなりつまづく まずは react と react-dom ってのがいるらしいんで入れるぞ、最近 npm にも慣れてきたしこれくらいは簡単…と、とりあえず適当なディレクトリ作って npm init -y してから $ npm install --save react react-dom とかやるんだけど、これがエラーが出てインストールできない訳だ。やる前に Node.js のバージョンを v6.10.0 に上げたのだがその辺が原因? とか思ったけど、前のバージョンに下げても同じだった1ので、そういう訳でもないらしい。何回試しても同じエラーが

少し前に Twitter などで触れてた話だが、Web Accessibility Advent Calendar 2016 5 日目の記事として出そうと思って置いておいたネタ。すでに最近では「いにしえのテクニック」となってしまった感もあるので、いまさらこんな話どうでもいいような気がしないでもないが、画像置換とアクセシビリティの話。 そんな訳で、先日たまたま、画像テキストのCSS置換に代わる2016年版のベストプラクティスという記事を読んだ。簡単に言えば「画像置換はやめて Web フォントや SVG、もしくは普通に img 要素使おう」という内容で、それ自体にはまったく異論がないのだけど、後半に書かれている次の一文だけはどうも引っかかった。 画像置換は、控え目に言っても少数の例でアクセシビリティの観点からいまなお妥当であるといえます。これは驚くことではないでしょう。なぜならこれらの手法を使

という訳で、Web Accessibility Advent calendar 2014 9日目の記事です。私も初日から公開される記事をずっと読んで勉強しておりますが、ここまで割と仕様とかガイドラインとか、あとは制作者としての気の持ちよう(?)とか、そういった話がずっと続いている気がしましたので、ここらでひとつ箸休めというか、実装に関する軽い話題をお送りしたいと思います。 さて、今ご覧のこのサイトですが、この数日ちょこちょことリニューアルを進めております。まだ制作途中で未完成な部分もありますが、概ねこんな感じにしようという部分はだいたい完了しましたので、見切り発車で公開しつつ直していこうかなという。まあその辺は本題ではないので後々ゆっくり触れるとして。 で、今回はロゴを PNG から SVG にしたんですが、まだもう少し IE8 からのアクセスがログに見られる以上、単純に img 要素では

「複数の画像ファイルをあらかじめ決めておいたいくつかのサイズにリサイズして書き出す」というアプリを探してみたんだけど、思ったようなのがなかなか見つからない（複数の画像を一気にリサイズして書き出すアプリはいくつかあるけど、指定できるサイズが大抵一種類しかなくて、違うサイズに書き出そうと思ったら結局何回も作業を繰り返さないといけないので、それが面倒くさい）ので、仕方ないから自作するかと画像操作系ライブラリの情報を色々と当たってみてたのだが、そんな中で Imager という Perl モジュールがあるのをつい最近知った。GD とか ImageMagick とかの有名どころしか知らなかった私を神様どうかお許しください。 まあ懺悔はさておき、知ったら知ったでとりあえずインストールしてみたくなるのが世の常というもの。なのでひと通りやってみたのだけど、そう簡単には上手くいかなかった（ここでいう簡単とは「

「フォームの button と img と Firefox 4」というエントリを去年書いてまして、要は Firefox だけ button 要素に CSS で消せないパディングが付いてて、中の要素（テキストも含む）との間に隙間が入ってしまうのが場合によっては困るかなあという話なんですが、たまたま今日なんとなく normalize.css のソースとそのコメント部分の翻訳記事を読んでますと、その辺を解決するコードがしっかり含まれているのに気が付きました。 該当部分は次の部分で、最新バージョンでいうと470行目以降。 /* * Removes inner padding and border in FF3+ * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */ b

Facebook でうっかり知らない人に友達リクエストを送ってしまったあなたに送る Unfriend Finder の（便利な方の）使い方 2012 年 3 月 6 日 Facebook にログインすると右側に「知り合いかも？」てのが表示されますよね。まあ大抵は実際に知り合いであったりその友達であったりなんですが、とにかくそういう場合は名前の下に「共通の友達○人」というのが表示されてて、そこから Facebook 上でのつながり（共通の友達のリスト）の確認ができるようになっています。 で、さらにそのすぐ下には「友達になる」というリンクが配置されていまして、ここからも友達リクエストを送信できるようになっています。ところがですね、この「友達になる」が他の友達リクエスト送信ボタンと違うのは、クリックすると何の確認もなくいきなりその人に友達リクエストを送ってしまうという、なんとも残念な仕様になって

W3C Markup Validator + Validator.nu をローカル環境で (1) 2010 年 8 月 29 日 すっかり音楽サイトではなく技術サイトになってしまった感のある我がサイトですが、今回も懲りずにそんなネタ。 ウチはご存知の通り（なのか？）Blosxom を使ってサイトの更新をしているので、Mac OS Web 共有を使ってローカル Web サーバを構築しておくとテストに何かと便利（最終的な Web ページとしての出力結果がローカルで確認出来るなど）なのでそうしているのですが、この最終的な出力結果の文法エラーをチェックしようと W3C Markup Validator で確認する際にだけは、一度サイトにアクセスしてページのフッタに置いてある「Valid HTML」をいうリンクからチェックする…という手間を踏んでおりました。 だからどうしても、アクセスログに自分がア

HTML5 + CSS3 で組む場合、IE8 以下では JavaScript 有効でないと表示が崩れる心配がある件を Media Queries で何とかしてみる 2011 年 5 月 14 日 IE9 も無事日本語版がリリースされ、HTML5 + CSS3 で全ての Web サイトを構築していけそうな環境も着々と整ってきているように感じる今日この頃ですが、当サイトへのアクセスログを見る限りまだまだ IE についてはヴァージョン7〜8が主流といったところ（5月以降に絞ってみても IE6 と IE9 のアクセスがほぼ同じという状況）ですので、さすがにもうしばらくの間は完全に無視する訳にはいかないのかな、と思っています。 しかし、HTML5 のセクショニング要素などもきちんと使って組んでいこうとなると、IE8 以下に関しては html5.js や IE9.js などをロードしない事には HTM

以下の件ですが、解決方法が分かりましたので追加エントリを書いております。合わせてお読み下さい。 過去に自分のやるプロジェクトではフォームのボタンのスタイルを弄る事がなかったので今まで知らなかったのですが、ここ数日ちょっとやってる検索フォームのデザインはテキストより画像の方が収まりが良くなるように感じたので、button 要素を使って画像を配置してみようと思いコードを書いてみてた訳です。 <form method="get" action="xxx"> <p> <input type="text" name="search" placeholder="キーワードを入力" value="" /> <button type="submit"><img src="button.png" alt="検索" /></button> </p> </form> 簡略化して書いてますが、ごく普通のコード。で

img:after { content: attr(alt); } としても何も表示されないのは、仕様的に正しい挙動です 2011 年 5 月 11 日 お分かりの方には何てことないというか今さらな話ですが、割と出来なくて悩んでる方が多いように見受けられたので。Twitter のツイートを検索してみてもたまに話題に上がってるっぽいし。 「画像にキャプションを表示する」などの名目でこの img:after { content: attr(alt) } のような[1] CSS 例を挙げているところがいくつかあるのですが、実際にこのような CSS を書いても alt 属性値が画像の後ろに表示される事はありません。Opera では表示されるようですが（あと私の記憶にはないのですが、どうやら古い Mozilla もこのような実装になっていたみたい[2]です）他のモダンブラウザでは基本的に全滅です。

CSS3 Radial Gradient を自分の望み通りのサイズや開始位置で配置するための方法いくつか (1) 2011 年 4 月 15 日 円形グラデーションで照明が当たったような効果を薄く掛けて背景にアクセントをつけるのは画像処理でも割とよく使われる手法ですが、同じ効果を CSS で body の背景に重ねたい場合は、背景色の上に CSS3 Gradient を使って透過した円形グラデーションを配置すれば、画像を使わずに同じ効果をつける事が可能です。 ただ、単純に body の中央や角を開始位置にするのであれば簡単なのですが、例えば先の画像のように可変あるいは固定幅でセンタリングしたボックス内にあるロゴ画像の中央辺りを基準位置にし、サイズはある程度の大きさを確保した上でウィンドウ幅を変えても固定、しかもボックス内で切れる事なく body の背景をベースにしてロゴの周辺に掛けたいのだ

CSS3 Radial Gradient を自分の望み通りのサイズや開始位置で配置するための方法いくつか (2) 2011 年 4 月 16 日 という訳で、前回は #wrapper が幅固定だったので、ウィンドウ幅を変えてもセンターからの距離が不変であるため単純にオフセット分移動すれば任意の位置に配置出来たのですが、今回は可変幅で同じ事が出来ないか？という話。 前回同様に基準となるサンプルを置いておきますが、前回との違いは #wrapper が width: 80% であるという部分。なのでウィンドウ幅を変更すれば中央からのピクセルオフセットも右端からのピクセルオフセットも変化しますし、また、 パーセント値で指定する場合、ボックスの左上端からの位置と画像の左上端からの位置を合わせます。たとえば、"0% 0%" の指定ではボックスの左上に画像の左上を合わせ、"100% 100%" の指定で

Office for Mac のインストールするフォントが Web サイトの表示にも使われてしまうのはユーザ・スタイルシートで回避できるよ、というお話 2011 年 2 月 1 日 Download: ＭＳ Ｐゴシック etc. をヒラギノ角ゴシックで置き換えるスタイルシートのサンプル Microsoft Office に Mac 版があるのは皆さんご存知かと思いますし（好き嫌いは別にして、もろもろの事情で）インストールして使ってらっしゃる方も多いと思いますが、利用されてる方はこの Office for Mac をインストールすると Windows で利用されているフォント（「ＭＳ Ｐゴシック」「メイリオ」等）も一緒にインストールしてくれるという、大変ありがた迷惑…いや、文書互換性にとても配慮の行き届いた仕様になっているのもご存知かと思います。 フォント名を忠実に表記するために「ＭＳ Ｐゴ

jQuery + lightBox Plugin 導入話（zenback との共存 etc.） 2010 年 8 月 19 日 前回書いた通り、zenback を入れてると Lightbox 2 が permalink で動作しなかった訳ですよ。 で、理由はおそらく Lightbox 2 に必要な prototype.js と、zenback が読み込む jQuery の衝突だろう…という結論。 色々調べて prototype.js と jQuery の衝突を回避する方法があるのは分かりましたが、zenback のスクリプトは提供元の方でコーディングされてますので、コチラが手を加えるのは不可能。あるのかもしれませんが、おそらく私の手には負えません。涙 という訳で、Lightbox 2 の利用は諦め、同様の機能を持つ代替スクリプトを探す事に。もしかして同じ jQuery を利用する jQue