スクロールは制御するな - Weblog - Hail2u.net
WWD Japanのウェブサイトがリニューアルして、スッキリした見やすそうな印象のものに変わった。しかし実際のところ見やすさは見せかけだけで、ナビゲーションをクリックしても見当違いのタブに切り替わったり、ニュース一覧からニュースをクリックしたら、要約ページへ移動するだけで、本文へはもう一度クリックしなければならなかったりする。中でもひどいのがMobile Safariでの閲覧だ。 このウェブサイトではスクロールをほぼ自前で制御しようとしているため、常にこのようにMobile SafariのURLバーとツールバーが上下にそれぞれ表示され続ける。その上、最上端にロゴとグローバル・ナビゲーション、最下端に広告がそれぞれ固定位置であるので、コンテンツの領域がかなり制限されている。iPhone 5SやSEどころか6+や7+でさえも致命的なのではないかと感じられる狭さだ。 とにかく文書を読ませようとい
Infield Top Aligned Labelパターン
Why Infield Top Aligned Form Labels are Quickest to Scanという記事を読んだ。Infield Top Aligned Labelとは上記スクリーンショットのように入力ボックス内の上端に置かれたラベルのことだ。記事ではラベルと入力ボックスを上下に並べるごく一般的なパターンとプレースホルダーをラベル代わりにするゴミ大人気のパターンと比較している。確かにわかりやすく、スムーズにフォームを埋められそうな印象を受ける。 記事では紙媒体の書類でもこのようになっていることがよくあり、それがメタファーとして機能することも強く後押しすると書かれており、なるほどと感じた。書類やテスト(もう記憶はあやふやだが)などの詰め々々のフォームにはあまり良い印象はないが、間違いなく慣れてはいるので、わかりづらさとは無縁だろう。それを考えると効果的なラベル・レイアウトだ
色覚多様性を再現するSVGフィルター
多くのウェブ制作者達が色覚多様性について考えることはまずない。せいぜいコントラストを確保したり、リンクの下線を消さないようにしたりすることで、グレースケールでもそれなりに識別できるように注意するくらいだろう。それで十分とも言えそうではあるが、それ以上考えようにも取っ掛かりがないためそれで止まっているとも言える。その取っ掛かりとして色覚多様性を再現するSVGのフィルターを作った。 Repository: Color Blindness Emulation filters.svgに含まれる8つのフィルターは、そのアルゴリズムはともかく、feColorMatrix要素を使ったごく簡単なものだ。 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" version
right: 100%か負のマージンか
これまでCSSにはレイアウト方法があまりなかった。これからはFlexible Box LayoutやMulti-column Layout、Grid Layoutを始め、positionプロパティーに使える値の拡充などもあり柔軟に行えるようになるだろうが、それはけっして既存のレイアウト方法が不必要になるということではない。選択肢が増えると受け止めるべきだ。例えばright: 100%や負のマージンを使って親要素の外側左にレイアウトする手法はそのまま使い続けることになるだろう。 ほとんど同じレイアウトを実現するright: 100%と負のマージンの使い分けを通して、レイアウト方法の選択をどう行うべきかという基本的な思想を解説することにより、今後増えてくるレイアウトの選択肢にどう相対すべきかがわかるのではないかと思う。そしてそれはCSSプロパティーの意図された使い方を理解するということでもある
ID使っても別に問題ない
CSSでID使うの良くない……どころか、ID使うのはゴミクズカスみたいな風潮で辛い。その根拠はいくつかあり、それらはCSSだけをただそのまま書く場合には納得出来ないこともないかなーと思うので余計に辛い。特にOOCSSのようなアプローチではIDは混ぜるな危険。だからといってIDを使わないのがベスト・プラクティスなわけじゃない。 CSS Lintの利用が広まり、これがID使うなって怒るのも原因の一端な気がする。Disallow IDs in selectorsではIDの問題点として以下のようなものを取り上げている。 However, IDs have a downside: they are completely unique and therefore cannot be reused. つまりユニークなため再利用できないというマイナスの面がある、と。確かに再利用できない。でもこれはマイナス
::beforeによる(画像)置換の終焉
なんだか最近のGoogleのペンギン先生は::beforeや::after擬似要素で仕込まれるモノもバッチリ解釈するとかいう噂(本当か嘘かは知らない)を聞いた。スクリーンリーダーも読んじゃうらしい。ここのロゴは::before擬似要素でHを一文字挿入して実現していたので、もし解釈されるとなるとウェブサイトのタイトルが「Hhail2u.net」になってしまう。 特に::beforeや::after擬似要素に限った話ではなく、古き良きtext-indentプロパティーによるものやattr()関数とかでも問題が起こるという話だと思うので、画像置換とその類のテクニックはもう本格的にアレな時代なのかもしれない。別の方法を……といってもCSSが解釈されて隠したり改変したりするのもチェックしてるという話なので、CSSでどうにかしようというのは無理がある。::before擬似要素でcontentプロパティ
Google Chromeのスーパーリロードのメニュー
Crl+F5やCtrl+Shift+Rでのスーパーリロードは有名だけど、開発者ツールを開いているページだと更新ボタンの長押しでメニューが出てくるのは知らなかった。キャッシュ破棄からのスーパーリロードはすでに便利さを体験した。 ハード再読み込みとか普通に通じないと思うので、スーパーリロードにラベル変えて欲しい。
Drawic
フッターのアイコンをSVGにした。GitHubにリポジトリも作っておいた。ぴくせる・ぱーふぇくとってなんでしたっけ……。 暗い背景向けの白いアイコンのみだけど、まぁそこは普通のSVGなのでエディターで開いてfillプロパティーの値を変えれば好きな色に変更できる。二種類ある矢印系には全方位を用意しなかったけど、transform属性でrotate()関数を利用して方向を調節できるのでそれで(若干中心をずらしてあるのでtranslate()も併用した方が良い)。 shape-rendering: crispEdges with crispEdges (Left) vs. w/o crispEdges (Right) Deliciousのアイコンはrect要素を組み合わせたものなので、そのままでは拡大・縮小すると端がぼやけることがある。そういう時はみんなが独自実装したCSSのimage-rend
オールドスタイルな数字を普通のものに
オールドスタイルな数字っていうのはGeorgiaとかで見るオシャレなあの数字のこと。Corbelというx-heightが高めでオープン・カウンターという読みやすさ重視のなかなか優秀なサンセリフ体もオールドスタイル。ただ和文とは相性が良くないので、どうにかして数字だけ普通のものに差し替えてみようという試み。 unicode-rangeプロパティー @font-faceディレクティブのunicode-rangeプロパティーでカスタム・フォントを作成するテクニックを使ってCorbelの数字をCalibriに置き換えてみる。 Demo: Use non oldstyle numbers for Corbel Chrome 20とInternet Explorer 9で反映される。それ以外ではunicode-rangeプロパティーが無視されるので、アルファベットや記号も含めて完全にCalibriにな
IE10でのSVGのファビコン
SVGのファビコンで試した奴のWindows 8 Release Preview上のInternet Explorer 10での実験。Metro版とデスクトップ版共にSVGのファビコン自体は表示できるけど、単純にlink要素で指定してもダメで、ドメイン・ルートにfavicon.icoというファイル名でSVGファイルを置く必要がある。 IE10はMetro版では32x32を、デスクトップ版では16x16をそれぞれ使う。そのためSVGのようなスケーラブルなフォーマットだとより幸せになれるんじゃないかと思う。「faviconは16x16！」という時代の終わりの始まり。 Chrome 20やSafari 5、Opera 12がちゃんと対応しておらず今すぐ採用できるわけじゃないので、しばらくは32x32と16x16のマルチ解像度なアイコンで乗り切るのが無難。最終的にはiOS向けのアイコンやMetro
media="only all"
SVGやMedia Queriesのサポートのこととか考えて嫌になってきたので、<link media="only all">でばっさりすることにした。media="not print"にした時に思いつかなかった……。456 Berea Streetでも@mediaディレクティブの方でonly screenを利用することで簡単な分岐を実現するというほぼ同じアイディアがつい最近取り上げられており、こちらもかなり便利。 <link rel="stylesheet" media="only all" href="style.css"> とするとonlyキーワードを解さないブラウザーは読まなくなる。media="not print"と違って印刷用スタイルシートを混ぜても大丈夫。 The keyword ‘only’ can also be used to hide style sheets fro
SCSSファイルの整理
SCSSファイルの整理をしてた。Sass 3.2を使い始めて以降、%セレクターをとりあえず使ってみる感じが多かったけど、ようやくどういうものに使うべきでどういうものに使うべきではないのかがわかってきたような気がする。というわけで現在のこのWebサイトのスタイルの構成のメモ。 関数 変数 Webフォント プレースホルダー・セレクター IDやクラス指定のないHTML要素 normalize.css ページを構成する要素のデコレーション ページを構成する要素のレイアウト その他ウィジェット 印刷向け 関数はどこで使われるかわからずプライオリティが高いので最初にインポート。それから変数を定義して、それを使ってスタイルを書いていく。Webフォントは変数のところでインポートして定義するようにした。Sass 3.2ではCSSの@importディレクティブを自動的に先頭に移動してコンパイルしてくれる機能が
::first-letterをぶら上げる
ぶら上げるってなんだ。段落の一文字目だけを左に飛び出して配置するというテキスト・レイアウトの話。margin-leftプロパティーで負の値を使っても良いのだけど、文字によって要調整なので面倒くさい。position: absoluteを使う場合は、親でposition: relativeが必須になるのでこれもちょっとアレ。他にもいくつかあったと思うけど、floatとmargin-right: 100%を組み合わせて行うのが一番位置合わせが簡単になる。 Demo: Hanging :first-letter 英文ではメジャーなドロップキャップをアウトデントするもの。たまに見る気がするけど気のせいな気もする程度のタイポグラフィー知識……。 .test::first-letter { margin-right: 100%; margin-bottom: -999em; float: right;
line-height: normal !important
たまに忘れてFirebugで調査して「あーそうだった！ これだよ！ クソが！ 俺か！」みたいな。これはFirefoxのフォーム系の置換要素に設定してあるデフォルト・スタイルで、入力ボックスとボタンの高さを揃えるのが面倒くさい原因のひとつ(もちろんこれだけではない)。これはかなり昔からあるけど「置換要素がline-heightプロパティーで高さ変わるわけねーだろクソが」という理由によりWon't Fixなので、死ぬまで付き合うことになりそう。 !importantなため制作者スタイルからはどうあがいても上書きするのは無理なので、他のブラウザー向けにline-height: normalを設定してやるのがまず必要。その上で入力ボックスとボタンのbox-sizingプロパティーが違うことに気をつけ、高さを指定する。 input[type="text"] { height: 1.75em; lin
等幅フォントが使われる要素の扱いがブラウザー間でまちまちな問題
少し前にFixing browsers’ broken monospace font handlingをNice Web Type経由で読んだんだけど、「単純に初期設定が違うだけだろ……%指定すれば大丈夫じゃね？」とか高をくくってたら大間違いだった。font-size: 100%がうまく動かなかったり、pre要素はともかくcode要素辺りでの実装のずれとか、monospaceだけだとWebKitでおかしくなるバグとかも絡んできてかなりの魔窟のようだ。この記事では触れられていないけど、言語設定によって等幅フォントの初期サイズが違うこともあるので更なるカオス。 記事で最初に挙げられているコードでも良いのだけど、normalize.cssではこの問題への対処がちゃんとなされているので、細かいことは余り考えずにnormalize.css使うのが手っ取り早い。記事の最後に挙げられているコードのように
ディテール
Webページにおける細かいパーツを正しく実装することがユーザー経験の向上につながるということについて書かれたUI: Getting the Details Rightを読んだ。WordPressの結構な人気テーマでもタブがあたかもパンくずリストのように表示されていたりするし、頭ではわかってても実践にまでは至らないことも多そう。 Getting the Details Rightではいくつかの有名なパターンを例に、こう実装するとユーザーが混乱しにくいという説明をしている。例えばスライドショーでは切り替えの矢印以外にも「いくつくらい画像が用意されていて、今何番目を表示しているのか」を示すドットを使ったインジケーターが重要であるとしている。また、画像や画面の切り替えにも簡単なアニメーションを導入することによって、ユーザーに「どう切り替わったのかをアニメーションで示すことによって戻る方法を示唆でき
hr要素を文字で入れ替える
HTML5になってhr要素はセクション内での区切りに使うものなどと役割が割りとはっきりと決められました。今までもそんな感じで使ってた人が多いですけど。ただhr要素のCSSによる装飾はなかなか難しいところがあります。そこを擬似要素を利用してゴニョゴニョすることにより、あまり罫線々々してない区切りを作って頑張ろうとかそういうお話です。 Demo: Swap HR Element with Character(s) 単純に元のスタイルを消して背景を透明にし、そこに擬似要素を重ねてやるという最近良く使われるテクニックです。 hr { margin: 2em auto; border: none; position: relative; clear: both; width: 100%; height: 48px; background-color: transparent; box-sizing:
Grid Overlay: The Lasy Way
before擬似要素を利用したグリッド・オーバーレイを作成してみました。pointer-eventsプロパティでnoneを指定することによって、グリッド画像が手前にあるのにも関わらず普通に文字列を選択したりリンクをクリックしたりできるようになります。 Demo: Grid Overlay: The Lazy Way 詳しくはデモページを読んでください。グリッド画像はCSSグラデーションなので、最後にちょろっと書いてあるようにグリッドサイズは変更可能です。溝とカラムの比率は変更できませんが……。 poiner-eventsプロパティはなかなか奥が深そうです。 追記 ダブルクリックでグリッドをトグル出来るようにしてみたのでデモにも反映させました。 <style> body.hide-grid::before { background-image: none; } </style> <scrip
フレキシブルなボタン
ほぼ全てのCSSプロパティの値を相対値やrgba()カラーを利用して指定することによって、コピペしてフォント及び色の調整をするだけで使い回せる基本的なボタンを作ってみました。完成度は85%くらい。 Demo: Flexible Button ベースとなるCSSは以下のようなシンプルなものです(もちろんベンダー拡張は省略していますが)。完全なコードはデモのページにあります。 button { padding: 0 1em; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 0.75em/1em; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7); height: 1.9em; background-image: linear-gradient( top, rgba(255, 255
Sass、そしてSassy CSS (SCSS)
CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入れ替え SCSSで完結することの意義 まとめ 最後に CSSフレームワーク 960.gsやBlueprint、BlueTripなどCSSフレームワークと呼ばれるものは色々ある。フレームワークと名乗るだけのことはあって、それらの生産性はとても高い。テンプレートで適切にクラス名やIDを埋め込むだけなので、複雑怪奇なCSSコーディングを意識することなく誰でも簡潔にきれいなカラム・レイアウトを作成できる。 HTML 4
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
