meta要素のname=color-schemeについて
ダーク・モードへ適応するなら、フォーム関連要素の色も切り替えるよう、CSSを書くだろう。しかし、それだけでは、例えばテキストエリアで出てくるスクロールバーが明るいままなので、かなり浮いてしまう。meta要素でname=color-schemeを適切に設定すると、そういったスクロールバーの色も含めたあらゆるものの色を暗く(明るく)できる。 書き方は特に難しくない。ダーク・モードへ適応しようと、prefers-color-schemeメディア・クエリーを使って、明るい背景と暗い背景を切り替えるなら、以下のようにHTMLファイルのhead要素以下に書けばいい。viewportと似たようなものだ。 <meta name="color-scheme" content="light dark"> lightとdarkの順序は、逆でも意味は変わらない。これだけでユーザーのOSやブラウザーでのダーク・モー
オンマウス、ボタン、コントラスト
オンマウスでボタンのコントラストを上げるために色を増やすのは嫌だなと考えていたが、filterプロパティーが簡単そうだ。色モードの変更にもそのままで機能する。ボタンの背景色が白や黒でない限り、汎用的に使える。 button:hover { filter: contrast(1.5); } ボタンをオンマウスでどう変化すべき(または変化させないべき)かというのは意見が一致しない。セケンではハイライトを当てる実装が多い。僕は、それだと白背景の場合に目立たなくなるので否定的だ。 ボタンを操作する時に指をのせるという行為のメタファーと考えると、指の影で暗くなるのが自然にも思える。しかし、そのままボタンを暗くし、ボタンの文字も暗くしてしまうと、操作しづらくなってしまうだろう。 ボタンに指をのせることで、そこに目の焦点が合い、相対的に強調されるというのが、実情に近い。それを考えるとコントラストを上げる
JavaScriptがなくなった
もう相対日時にするやつとutm_*を削除するやつしか動かしてなかったので、JavaScriptをなくした。再構築したので消えている。 最近はデフォルトでJavaScript無効でも生きていけるようなインターネットになってきた気がする。HTML Living Standardのおかげかなって思ったけど、どちらかというとSVGやFlexboxやなんやのおかげなのかもしれない。 話題の遅延読み込み(loading属性)もそういうやつっぽいけど、挙動としてどうにもならない問題があるような気がしてならない。回線が安定していて、無制限で、マシンパワーも余っているなら、遅延読み込みする必要はないけど、それをブラウザーが知ることは難しそう、というような話。「多分あと10分くらいはハードウェアやインフラをこれくらいまで使えますよ～」みたいなのがOSがブラウザーへ教えないといけないのかな。 遅延読み込みはペー
普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
2018年のウェブフォントについて
少しの間Noto Sans Japaneseを利用していたが、すぐに止めた。やはりFOITが気になる。かといってFOUT強制も苦肉の策という印象しかない。……このような記事を書いていたら、先にうまくまとまったfont-displayデスクリプターについての記事が広まっていたので、そちらを読むのが良い。 他が高速・即時化しつつある現在、1MBくらいを超えるウェブフォントはどうにもならない。動的なサブセット化はわからなくもないが、労多くして……という印象だ。自前で作るのも難しいし、安心して任せられる速さの提供者は知らない。 回線の状況(種別ではなく)に応じてうまいこと切り替える仕組みを導入しなければならないだろう。そうなるとデバイスから「今、回線あんま速くないです……」といった動的な情報を得たいが、プライバシーにかかわるので難しい。残る可能性はfont-displayデスクリプターのみだ。 @
脱出できるか
脱出できなさそうなものはなるべく使いたくないが、代わりがないと使わざるを得ない。古より継続中なのはAdobeプロダクトであり、少し前ならナントカeeScript (あまり書かずに逃げ切った)で、今ならカントカ-in-ナントカ(いずれ死ぬのは自分じゃないと思いながら書いている)かもしれない。 現実をどうにかしようと生まれたものなので、便利で役に立つのはしょうがない。それを将来置き換えることになるかもしれないウェブ標準技術を意識しながら書いてもつぎはぎだらけのものが出来上がるだけだ。そのように意識的にブレーキをかけながら使っても本来の力を発揮できないだろう。 そこで脱出できるかを知ることが重要になる。採用の判断基準にするべきではないが、採用が影響を与える範囲を知るためには、脱出できるかという観点がわかりやすい。 明日くらいにSassから脱出しよう、という決意表明のために書いておく。
スタイル・ガイド
はじめに このウェブサイトのHTMLや、CSS、JavaScriptについては、ほぼすべてをこのページで解説しています。それぞれに例も用意してあるので、挙動も確認できます。おおむね挙動の確認を優先しているため、言葉が足らなかったり、更新されていなかったりすることもあるので、詳細は開発者ツールなどを駆使してください。 このページのマークアップやスタイル、スクリプトには、おかしいところが多くあります。その多くは、解説や例を作る上でのやむを得ない事情によるもので、他のページではちゃんとしています。例示で使われている妙な文章は、雑記の過去記事からランダムに選択された文を組み合わせたものです。特に意味はありません。 また、このウェブサイトの完全なソース・コードをGitHubで公開しています。どのように生成されているかや、どのようなツールを利用しているかなどは、そちらを参照してください。 アイコン o
ウェブページにおけるバーティカル・リズム
いわゆるバーティカル・リズム(vertical rhythm)がウェブページでも重要なのではないかと言われてから随分と経つ。僕の記憶が確かなら10年にはなるだろう。しかし当初から僕は懐疑的だった。もちろん一貫性のある余白は重要だが、バーティカル・リズムにまでなるとウェブページでは思うように機能しないのではないだろうか。 バーティカル・リズムはページ単位でどのようにコンテンツが美しく、そして読みやすくレイアウトされるかというための概念だ。それは紙媒体のような固定寸法にコンテンツを流し込む時には非常に有効に働く。常に一定のリズムで視線を動かしていけばスラスラと読んでいけるからだ。 しかし、ウェブページは横に制限があるが、縦には制限がない。そのためスクロールという機能がカギとなっている。古くはスクロールバーをクリックやドラッグすることでしかその機能を使うことはできなかったが、ホイール・マウスによ
Yu Gothic UIの仮採用 - ウェブログ - Hail2u.net
Yu Gothic UIというフォントがある。ＭＳ Ｐゴシックに対するMS UI Gothic的なものの、游ゴシックに対するものだ。あまり大っぴらには使われていないが、Segoe UIとフォントリンクされているので、日本語のWindows 10では日常的に目にしているはずだ。これをフォント指定に追加してみている。 Windows 10でUIに使われることからか、Windows 10発売当初からも(雑に)改善されたようで、あの問題は起こらない。メイリオに比べるとやはり狭く、長文には向かないと考えられるが、游ゴシックと比べるとちょっと狭いくらいなのでギリギリ許容範囲なのではないかとも感じる。またmacOSには存在しない(と思う)ので使いやすいという利点もある。ウェイトもレギュラー(400)以外に200、300、600、700相当があり、使いでがある。 system-ui generic fam
均等割付した折り返しFlexboxの最後の行
Flexboxを使って折り返せる横並びのリストを作ることが増えてきた。大抵うまくいくのだが、項目間に溝をうまく確保しようとjustify-content: space-betweenを使ってしまうと、最後の行でおかしくなる困ってしまう。具体的には3列以上の横並びで最後の行に2つ(以上列数より下)しか項目がない場合、上図のように最後の行だけ項目が左寄せになってくれない。 この状況を修正する方法はあまりなく、少なくともFlexboxモジュールでは提供されていない。 まず考えられるのが溝の制御にjustify-contentプロパティーを使わない方法だ。しかしこれは列と列の間だけに溝を作りたい場合にかなり面倒くさい。次にわかりやすい方法は擬似要素を使い項目を追加する方法だ。今のところ擬似要素は最大2つまでしか作れないため、3列か4列でしか機能しない(4列ではorderも組み合わせることになる)。
スクロールは制御するな - Weblog - Hail2u.net
WWD Japanのウェブサイトがリニューアルして、スッキリした見やすそうな印象のものに変わった。しかし実際のところ見やすさは見せかけだけで、ナビゲーションをクリックしても見当違いのタブに切り替わったり、ニュース一覧からニュースをクリックしたら、要約ページへ移動するだけで、本文へはもう一度クリックしなければならなかったりする。中でもひどいのがMobile Safariでの閲覧だ。 このウェブサイトではスクロールをほぼ自前で制御しようとしているため、常にこのようにMobile SafariのURLバーとツールバーが上下にそれぞれ表示され続ける。その上、最上端にロゴとグローバル・ナビゲーション、最下端に広告がそれぞれ固定位置であるので、コンテンツの領域がかなり制限されている。iPhone 5SやSEどころか6+や7+でさえも致命的なのではないかと感じられる狭さだ。 とにかく文書を読ませようとい
CSSWring v4.2.2
CSSWringではfont-familyプロパティーでできうる限り引用符を削除しようとしている。逆に必要な場合は付けるようにもなっている。今までその値にvar()を使われることを想定していなかったため、var()が引用符で括られてしまうというバグがあったようだ。修正してv4.2.2をリリースした。 font-familyプロパティーの値で引用符が必要かどうかは簡単だが、誤解も多い。大まかにいえば識別子の連続のセットならば引用符はいらない。 .test { font-family: Helvetica, Arial, sans-serif; } 識別子の連続とは、ASCIIの記号を除いたものと考えると近い。つまりカタカナや漢字が含まれていても引用符で括る必要はない。ただし数字やハイフン2つ、そしてハイフンに続いて数字では始めることはできないというような規則もある。 .test { font
競合相手のプロモーションのため、公式プラグイン一覧からの削除されたこと
全世界的にPostCSSが盛り上がってきたので、他の最小化ツールなどは出てるのかなと公式のプラグイン一覧を参照したところ、全然関係のないことに気付いてしまった。確か以前はCSSWringがちゃんと載っていたように思ったが、消されていた。なんかやらかしたとか出来が悪いとかならばしょうがないというところだが、どうもcssnanoのプロモートのために消されたようだ。おっと。 こういう独自のプラグイン・エコシステムを持つツールでは、様々な理由でプラグインが粛清されることがある。ここのところだとgulpがブラックリストを作っていることが有名だろう。そういうスタンス自体にそもそも賛成することはできないけれども、ツールにもそれぞれ哲学のようなものがあるはずなので、それから外れていたらしょうがないのかなとは考えている。 今回のケースもそうであるのかもしれないが、後出しで消されるとなかなかショックは大きい。
CSS、レイアウト、現在、未来 - Weblog - Hail2u.net
floatプロパティーで柔軟なレイアウトを行うことは可能だが、それには熟練と標準化されていない知識が必要になる。Flexible Box Layoutは標準化されていないという問題は解決するが、限られた矩形を基準にレイアウトをすること由来の独特のおまじないという熟練は必要になる(heightプロパティーの工夫)。レイアウトには様々なパターンがあり、Flexboxが解決するのはその一部分でしかない。 問題はFlexboxの能力(とCSSにおける様々な単位の汎用性)が意外に高く、cross sizeが想定されているパターン以外にも流用できることだ。このことはfloatプロパティーが本来フローコンテンツが回り込むように浮かせるものだったのにも拘らず、その汎用性から万能ツールのように扱われてしまったことと似ている。ウェブ開発者たちからもそのもっとすごいやつといった扱いになっていると言って良いだろう
遅延読み込み用のぼやけた画像
Mediumでとある記事を高速にスクロールして読んでいたら、さりげなく画像を遅延読み込みしていることを知った。読み込み発火のタイミングがうまいのかあまり遅延読み込みの存在を感じさせないのもすごいと思ったが、プレースホルダー画像の実装方法が良さそうだった。単純に元の画像を幅30px程度まで小さくしてそれをブラウザーにリサイズさせることでぼやけた画像をプレースホルダーとして表示しているだけだが、十分に機能していそうで目から鱗だった。 画像の遅延読み込みはなかなか曲者で、読み込むタイミングやプレースホルダーとしている画像が悪いと大きくユーザーにストレスを与える。プレースホルダーでよく使われるローディング画像は読み込み中のインジケーターではあるが、同時に何か遅いことをやっていますというネガティブな印象も与えてしまう。ユーザーはローディング画像を見るとスクロールを止めなくてはならないのかと感じること
srcset属性を使ったSVGフォールバック・ハック
SVGをサポートする環境がほとんどになってきた。それでもなんとか8であったり、かんとか2.3であったりのことを考慮せざるをえないという状況はありうる。それにはonerror属性を使った対応が有力だが、srcset属性でSVGファイルを指定するだけというハックのことを知った。将来的に使えなくなるわけではないが、やりたいことと実装に食い違いが少なからずあるのでハックと言って良いだろう。 <img src="foo.png" srcset="foo.svg"> 表示したいSVGをsrcset属性で、フォールバックに使いたいPNGをsrc属性で指定するだけだ。これでsrcset属性をサポートしているブラウザーではSVGが、そうでないブラウザーではPNGが表示される。srcset属性のサポートに対して、より多くのブラウザーがSVGをサポートしていることから成立する。もちろん食い違いがあるのでSVGを
Sass変数の(ダメそうな)案
時代はとっくにSass 3.4なのでローカル変数メインにしたいということが前提にある。そうすることで変数名にBEM等のしっかりとした命名規則を使わずに済み、自己言及的な変数名と数文字の変数名でおおむね完結することになる。パーシャル間で共有したい場合はしょうがないので!globalを使ってローカル変数をグローバルへエクスポートするようなあきらめを許容して誤魔化す。 まずある程度はグローバル変数として定義しておく必要がある。それらグローバル変数は自己言及的なもの(それこそ$color-black: #000;といったようなもの)で、実際にウェブサイトで使われる要素やクラスとは無関係に定義していく。 // _variables.scss $ratio: 1.7; $ratio-text: 1; $ratio-text-large: 1.5; $line-height-default: $rati
Formspree
Infield Top Aligned Labelの実験がてら、Formspreeでコンタクト・フォームを作成して設置していた。Formspreeは登録不要で使えるメール・フォームの設置をサポートするウェブサービスだ。提供するのはほぼエンドポイントのURLのみで、それに自分のメール・アドレスを追加したURLへPOSTするフォームを作るだけで設置が完了する。 設置完了後に1回だけ自分で設置したフォームを使いメールを送信すると、設置したURLとメール・アドレスの紐付けを確認するメールが来る。その手順に従い確認すると、あとはそのフォームで送られた内容が指定したメール・アドレスへ転送されてくるようになる。 Infiled Top Aligned Labelの実装では多少複雑な形になっているが、それほどややこしくもしなかった。複数列にしたのでFlexboxを使う方が良さそうだったが、結局floatと
プレースホルダーのスタイルにおけるノーマリゼーション
テキスト入力コントロールにplaceholder属性を使って入力例を表示することができるようになってから、もうかなりの年月がたった。悪用されてもいるが、わかりやすいフォームには不可欠になりつつある程度には浸透したと言ってよいだろう。ただMozilla Developer Networkのグローバル・ナビゲーションに設置されている検索フォームのようにそのスタイリングに失敗しているケースはままある(Chrome 43だと入力済みかどうかまったく判断できない)。そういった失敗を極力減らすためには、Firefoxのようにopacityプロパティーを使ってノーマライズしてやるのが良いだろう。 ではFirefoxの挙動に合わせるようにノーマリゼーションする場合はどのようにCSSを書くことになるのだろうか。 Firefoxではユーザー・エージェントCSSでopacityの値に0.54を指定している(以前
CSS Transformによるセンタリングのベスト・プラクティス
上下左右のセンタリングには様々な手法が編み出されてきた。最近はCSS Transformを使う方法がメジャーになりつつある。コンテナーとセンタリングしたい要素のサイズが共に不明でもうまくいくところなど、そこそこ万能感があるのがポイントだろうか。このCSS Transformによるセンタリングは左下に動かしてから右上に戻すパターンと、その逆の右上に動かしてから左下に動かすパターンがある。どちらでも理論的には上手くいくが、ベスト・プラクティスとなりうるのは後者だけだろう。 Demo: Centering Unknown with CSS Transform (top/left) このデモは実際に不具合が起こりうるパターンになっている。センタリングする要素をtopとleftプロパティーで動かした後、transform: translate(-50%, -50%)で元に戻しているわけだが、Inte
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
