Zebra Striping: More Data for the Case
I recently conducted a study into the helpfulness (or lack thereof) of zebra striping—the shading of alternate rows in a table or form. The study measured performance as users completed a series of tasks and found no statistically significant improvement in accuracy—and very little statistically significant improvement in speed when zebra stripes were implemented. These results were a surprise to
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
![ブロックレベル要素の高さを揃えるheightLine.js[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
人気ブログ型サイトのデザインと統計 :: gerenuk.crazyphoto.org/
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
メイリオ
shio さんのブログエントリにコメントを書き始めたのだけれど、やはり長くなってしまったので自分のブログに書くことにした。 メイリオとは、Windows Vista に新しく搭載された日本語フォントの名前。 私は漢字Talk7 に搭載された日本で最初の和文 TrueType フォントの開発を間近に眺め、その後 Mac OS X 搭載フォントの仕様策定、書体選定とヒラギノ OpenType の開発にかかわることができた。フォントを巡る人たちとの幸運な出会いを通じて文字というものが大好きになったし、書体やフォントの話は気になる。 なので、マイクロソフトが新しいフォントを作っていると知った時、ものすごく良いものが出てきたらどうしようという不安と同時に、どんないい書体を見せてくれるのかなという期待が膨らんだものだった。 残念ながら、Vista に搭載されたフォント、メイリオは期待はずれだった。うる
テックTシャツはセクシーじゃない
私はJavaOneには7回参加した。自腹で10,000ドル以上出している。参加費だけでだ。ちょっと考えてほしいのだが、彼らが私に、その、胸があるという事実を隠さない記念のシャツをくれたことが、一度でもあっただろうか。2000ドルの入場料の1%でも余計に使って、6フィート未満の人間に着られるシャツを作ったことが、一度でもあっただろうか。そしてこれはもちろんSunのJavaOneに限った話ではない。実質的にすべてのテクノロジー企業が有罪だ。ブースを構えるベンダが「ほら、寝るときに着れるよ!」と言って笑うごとに10セントもらえたなら、私は今頃これを海辺の別荘で書いているだろう。 (あのね、テクノロジー会社さん、女性の多くは寝るときに着るものは何でもいいってわけじゃない。ああ、話がそれた･･･) 私たちがこのブログで言い古した公式はいたってシンプルだ: あなたはユーザをクールにするためにどんなこと
スタイルシートを分けて管理する方法をまとめる - 2xup.org
comment 2006-10-17T21:15:00+09:00 お好みの言語が英語で無い場合は、日本語でどうぞ。 In this PDF file, the order of the set format rule and property's appearing was announced. This time, the method of separately managing the CSS file used on the site is announced. Why is CSS divided? I think that most reasons are the improvements of the work efficiency. The access to the revision part becomes early They are combined and co
無意識ナビゲーション
東京に住んでいたことのある、外国のグラフィック・デザイナーの方が、東京の鉄道システムを参考に新しいナビゲーション方法を提唱されています： ■ Ambient Signifiers - How I Learned to Stop Getting Lost and Love Tokyo Rail (Boxes and Allows) Ross Howard さんという方の論文なのですが、東京に住んでいた時に、中央・総武線ユーザーだったのだとか。僕も同じく中央・総武線ユーザーだったりするのですが、僕が気にも留めなかったことに着目して考察しています（見習わなきゃ・・・）。 Ambient Signifiers とは、直訳すれば「環境による通知」。いったい何なのかというと、例として挙げられているのは「ホームの発着ベル（発着メロディ？）」。最近、オリジナルな発着ベルを流す駅が増えましたよね。記事中で"
Jimmy Lin's Presence on the Web
JimmyLin.info, Jimmy Lin, Jimmy, Lin, JLin, JL, Free Templates, CSS Templates, Portfolio, About, Contact, Resources, Pixel, Perfection, Perfectionist Free Templates These templates are 100% valid CSS/XHTML and compatible with IE5.0+, FireFox 1.5, Opera 8.5, and Safari 2. They do not use any hacks of any kind, and can easily be modified. There are no copyright restrictions on these templates, but i
Photoshop でつややかな表現をわりと簡単に実現する
2006-05-05T20:05:06+09:00 Illustrator などを利用してベジェ曲線で書いた絵に Photoshop を利用してつややかな表現を加える方法は何通りもあり、すでにたくさんのノウハウが存在しますが、それなりのものならほんの少しの作業で実現できます。いつも違う方法でやってしまいあとで苦労する事があるので、自分自身の忘記録も兼ねてその Tips をまとめておきたいと思います。Photoshop CS で作成したデータですが、サンプルファイルも用意しているのでもしよろしければダウンロードして使ってみてください。 サンプルファイルをダウンロード(tsuyayaka-sample.psd) サンプルファイルはせっかく角丸の四角形で作成したので、Feed Icon として利用できるように、オレンジで描いたレイヤーと、アンテナ部分を描いたレイヤーも追加してあります。 レイヤー
GIGAZINE - 画像を使わず、角にアンチエイリアスをかけて丸くする「curvyCorners」
「curvyCorners」はフリーのJavaScriptで、角が丸いコーナーをDIV要素で簡単に作ることが可能。特徴は画像を使ったのと同じくらい角がなめらかに丸くなる点と、いたって利用が簡単な点。 どれぐらい丸くなるのかという実例とコードのダウンロード、設置方法は以下を参照。 例その1、3ピクセルの白いボーダーを使い、角は半径20ピクセルで丸くなってます 例その2、固定幅と高さで画像を固定し、角は半径20ピクセルで丸くしている例 ダウンロードはこちらから 使い方は以下を参照 http://www.curvycorners.net/ ほとんどのメジャーなブラウザをサポートしているので汎用性も高く、使い勝手もいい感じです。
多くのユーザーは一度に1本しかジュースを買わない ― ＠IT
ユーザビリティのヒント（1） 多くのユーザーは 一度に1本しかジュースを買わない 「自動販売機での不要な動作から考える」 ソシオメディア 上野 学 2006/6/2 Webアプリケーションのユーザーインターフェイスデザインに役立つさまざまなTips集。自動販売機でジュースを買うときの不要な動作から考える。（編集部） 今回からはWebアプリケーションのユーザーインターフェイスの続編の「Tips編」として、ウェブアプリケーションのユーザーインターフェイスをデザインするうえで役立つさまざまなヒントを、少し細かな視点から具体的に見ていきます。 複雑な構成物を作り上げるには、基本となるコンセプトやアーキテクチャといった抽象度の高い部分から考えていくトップダウン式のアプローチと、構成要素の細部から考えていくボトムアップ式のアプローチの両方が必要になりますが、前回までの経験則編はどちらかといえばトップダ
iv.xight.org - 情報視覚化
■ Information Visualization の用途 情報検索 データ解析 プログラムデバッグ ■ Information Visualization に必要な技法 必要なものだけ表示する技法 画面の表示可能領域に制限 情報を選択的に表示 ズーミング手法・フィルタリング手法・重要度計算手法・画面を歪ませて表示する手法 e.t.c. 全体と詳細を同時に見る技法 全体を概観しながら詳細も見ることが可能 ズーミングの応用 抽象データの画面へのマッピング技法 表示すべきデータがユーザ操作により変化 表示すべき情報をどのような位置，形，色で表示するか グラフの自動配置手法・階層構造の表示手法 e.t.c. 自動レイアウト技法 重なりがちゃんと見えるように グラフの自動配置手法の一つ？ インタラクション技法 直接操作によって画面を移動・拡大させたり，条件を変更して動的検索を行ったりする手法
全標準フォント一覧 / もうパンツはかない
標準で入ってると思われるフォントのリストです。日本語・英語以外の言語用のフォントも混じってます(ただしきちんと英数字が含まれるもののみ)。 フォントのキャプチャ画像の下に、CSSでフォント指定をしています。インストールされていればそのフォントで表示されるはずですが、ブラウザや設定によっては指定が効かないフォントもあります。斜体以外の文字の太さ・幅のバリエーションも拾いだしてみました。ページデザインの参考にどうぞ。 各枠右上の三角印をクリックするとCSSを表示し、×印のクリックで閉じます。また右側のピンク色の枠へドラッグして取り置きすることができます。取り置きを捨てたり並べ替えたりもできます。(IE9以前とスマホ・タブレットでは取り置きできません) なお、Mac用で枠の右端が赤いものは、必要に応じてダウンロードできるフォントです。(言語を日本語としてmacOSをインストールした場合は下のフォ
標準の日本語フォント / もうパンツはかない
各環境でどんな日本語フォントが使えるのか、まとめてみました。 それぞれのOSで標準添付されていると思われる日本語フォントをCSSの指定で表示させたものをキャプチャーしました。小さい方の字は16ピクセル、大きい方は 150% とCSS上で指定しています。使用ブラウザは主に各環境の標準ブラウザ(MacはSafari、WindowsはEdge)です。 Mac Windows Linux macOS Sonoma (14) ヒラギノ角ゴシック (ウェイト:W0〜W9の10段階) font-family: "HiraginoSans-W0","Hiragino Sans","ヒラギノ角ゴシック"; font-weight: 100; font-family: "Hiragino Sans","ヒラギノ角ゴシック"; font-weight: 400; font-family: "Hiragino S
CSS Remix
Cascading Style Sheets Explained If you’re new to Cascading Style Sheets, or CSS, then this short guide is for you. After a brief introduction to CSS and some of its benefits, we’ll move on to CSS frameworks to help you decide if you should use one and if so, which one would be best for your needs. What is CSS? CSS is a computer programming language used for describing the visual presentation of a
mixiをXHTML+CSSで組みなおす - 3ping.org
授業内で、既存サイトをXHTML+CSSで組み直す練習をするのですが、生徒が提出したのが「mixi」を書き直したもので、とてもよく出来てました。 mixiはテーブルレイアウトで組まれていて、基本は3カラムだけど、もとがテーブルなだけあって、ヘッダーのメニューが少し複雑だったり、セクションごとのビジュアル的なデザインや、細かい文字の余白のとり方が難しい。 現在のCSSは「どんな見栄えも出来てしまう」とは言えない。本当は言いたいのだけど、実際にはブラウザーのバグを回避するためにバッドノウハウを駆使したり、CSSの限界から、見栄えとは切り離すべきXHTML部分を調整しなくては再現できない見栄えがある。 けど、生徒の提出したものは、見栄えのためだけのdivも無ければ、ヴァリデーターだけを100点で通過するような機械騙しのXHTMLでもない。(一部、リストとしてマークアップできるところはある) もち
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
遠近法ノート:萌える和文フォントを探すのよっ！
Efficient data transfer through zero copy
配色事典
//// COLOURlovers :: loving colours since 1981