はてなブックマーク

-ms-high-contrast を CSS ハックに使ってはいけない、ただひとつの理由 公開日: 2017年4月26日 タグ: css, ie, accessibility 事情があって游書体関連の話題をいろいろ読み漁っていたところ、「游ゴシックにすると IE では数ピクセル上にずれてしまうので、CSS ハックを使って別のフォントを適用する」という手法を紹介しているのがあった1。どういうハックかと思って見てみたら次のようなもので、ちょっとこれどうなのよ? とか思ったのであった。 @media (-ms-high-contrast: none) { /* IE10/11 に適用する*つもりの*フォント指定 */ } 試しに “ms high contrast” で検索してみると同じコードがけっこう出てくるので、もしかしてある程度広く認知されてる手法なのだろうか…あまり信じたくはないのだけ

おじさんが React で Hello World するのに 3 時間弱かかった話 公開日: 2017年3月19日 タグ: javascript, react なんとなく React とかいうやつを試したくなって、とりあえず Hello World って表示するだけのものでも作るか…と思ったのだけど、まったく前提知識がないものだから完成するのにめっちゃ時間がかかった、という話でも書いておく。多少脚色はある。 いきなりつまづく まずは react と react-dom ってのがいるらしいんで入れるぞ、最近 npm にも慣れてきたしこれくらいは簡単…と、とりあえず適当なディレクトリ作って npm init -y してから $ npm install --save react react-dom とかやるんだけど、これがエラーが出てインストールできない訳だ。やる前に Node.js のバージョ

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

object 要素で配置した SVG ロゴをスクリーンリーダーに読ませる 公開日: 2014年12月10日 タグ: memo, tips, html, accessibility, svg という訳で、Web Accessibility Advent Calender 2014 9日目の記事です。私も初日から公開される記事をずっと読んで勉強しておりますが、ここまで割と仕様とかガイドラインとか、あとは制作者としての気の持ちよう(?)とか、そういった話がずっと続いている気がしましたので、ここらでひとつ箸休めというか、実装に関する軽い話題をお送りしたいと思います。 さて、今ご覧のこのサイトですが、この数日ちょこちょことリニューアルを進めております。まだ制作途中で未完成な部分もありますが、概ねこんな感じにしようという部分はだいたい完了しましたので、見切り発車で公開しつつ直していこうかなという。まあ

OS X Lion に Imager をインストール（しようとしてライブラリ関係で嵌まる） 公開日: 2012年3月6日 タグ: macosx, perl, imager, install, memo 「複数の画像ファイルをあらかじめ決めておいたいくつかのサイズにリサイズして書き出す」というアプリを探してみたんだけど、思ったようなのがなかなか見つからない（複数の画像を一気にリサイズして書き出すアプリはいくつかあるけど、指定できるサイズが大抵一種類しかなくて、違うサイズに書き出そうと思ったら結局何回も作業を繰り返さないといけないので、それが面倒くさい）ので、仕方ないから自作するかと画像操作系ライブラリの情報を色々と当たってみてたのだが、そんな中で 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, tips Facebook にログインすると右側に「知り合いかも？」てのが表示されますよね。まあ大抵は実際に知り合いであったりその友達であったりなんですが、とにかくそういう場合は名前の下に「共通の友達○人」というのが表示されてて、そこから Facebook 上でのつながり（共通の友達のリスト）の確認ができるようになっています。 で、さらにそのすぐ下には「友達になる」というリンクが配置されていまして、ここからも友達リクエストを送信できるようになっています。ところがですね、この「友達になる」が他の友達リクエスト送信ボタンと違うのは、クリックすると何の確認もなくいきなりその人に友達リクエストを送ってし

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

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

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

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

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

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

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

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