秀逸なユーザビリティのボタンをデザインするための5つの秘伝 - GIGAZINE
ユーザビリティを考える上でかなり重要なのがボタンのデザイン。聞いた話だと、某どこかのローンお申し込みページではボタンのサイズを極端に大きくして目立つようにして、ボタンに「OK」とか「投稿」ではなくデカデカと「今すぐ申し込む」というようにラベリングしたところ、数百パーセント増しで申込みがあったとのこと。ほんの少しのデザインの差でもバカにはできません。 というわけで、いろいろな有名サイトのアイディアが詰まって練り込まれたボタンのデザインを見てみると、どれもこれも一見すると普通に見えるようでも、実はそうではないことがわかります。それらには共通して5つのルールが適用されています。 秘伝の法則は以下から。 ■秘伝その1：色 ボタンの色はページの他のものよりも目立たせ、より明るく、そしてコントラストを効かせてページのカラーとは対照の色を使いましょう。 ■秘伝その2：場所 ユーザーがすぐに見つけることが
Advanced CSS Menu - Web Designer Wall
Last tutorial, I showed you how to design a watercolor effect menu in Photoshop. This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let’s take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position property. View Demo CSS men
[ CSS ] pre でも改行を生かしたまま折り返す
pre 要素で囲んだ一行が長い場合、親要素の幅に収まりきらず、スクロールバーが出てしまいます。 なんとか親要素の幅内で収めたい。 で、適当な位置で改行するように、 pre { overflow: auto; white-space: normal; } なる CSS を追加したのですが、今度は、私が追加した任意の改行まで無くなってしまいました。 調べてみると、下のようなコードを追加すると、改行を生かしたまま折り返してくれます。 pre { white-space: -moz-pre-wrap; /* Mozilla */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: pre-wrap; /* CSS3 */ word-wrap: break-word;
![[ CSS ] pre でも改行を生かしたまま折り返す](https://cdn-ak-scissors.b.st-hatena.com/image/square/4859fdea696635237235f320155e9d5ee90f1a78/height=288;version=1;width=512/https%3A%2F%2Fbowz.info%2Fwp-content%2Fuploads%2F2015%2F10%2Fpre-wrap-win-ie7.gif)
CSSで色指定が可能な立体的でクールなボタン実装サンプル:phpspot開発日誌
Liquid & Color Adjustable CSS Buttons - CSS/XHTML/Photoshop Tutorial When working on a large site with multiple buttons, it can be quite tedious to make all the buttons in Photoshop.CSSで色指定が可能な立体的でクールなボタン実装サンプル。 次のようなクールなボタンが作れます。background-color の指定でボタンの色が変えられるのでなかなか良いです。 だめかと思われたIE6でも動作してます。 追記） CSSのみでIE6.0対応しているわけでなく、一部ＪａｖａＳｃｒｉｐｔを使用しているみたい。 ご連絡いただきましてありがとうございました。 関連エントリ CSSでクールなボタンを作るまとめ
MOONGIFT: » 複雑な段組みを可能にするCSSフレームワーク「Emastic」:オープンソースを毎日紹介
雑誌や新聞などでは複雑な段組みを行って、情報を見やすくしている。ネット媒体の場合、あまりそうした点は考慮されず、二段または三段のカラムで構成されることが多い。しかも幾つかのカラムはメニューなどに使うので、文章自体は殆ど組版が施されていない。 CSSだけとは思えないほど細かく制御されている Webはそういった媒体ではない、と言い切ってしまえばそれまでだろう。だが今後情報の電子化は進み、紙媒体は現状維持ないし衰退していくのは間違いない。そうした時に、Webもやはり読ませる形式を求められるようになるのではないだろうか。それを実現するのがこれだ。 今回紹介するオープンソース・ソフトウェアはEmastic、複雑なカラム構成を実現するCSSフレームワークだ。 Emasticはまるで雑誌のような段組みをCSSで実現している。二段、三段、四段の表示を行い、固定幅または表示サイズに合わせて変化とを組み合わせ
CSSで背景画像をリサイズするテクニック:phpspot開発日誌
How To: Resizeable Background Image - CSS-Tricks Is there a way to make a background image resizeable? CSSで背景画像をリサイズするテクニック デモサイトを見ると、驚くべきことに、背景画像のサイズがビローンと伸びて表示されます。 記事中では３種類の手法について書かれていますが、JavaScriptなしで、CSSだけで実現する３つ目の方法がスマートです。 background-image ではなく、画像に次のようなCSSを宛てることで実現しているみたい。 #img.source-image { width: 100%; position: absolute; top: 0; left: 0; } body { overflow: hidden; } 背景が伸びるというと、ちょっと珍しいので
CSSで「font-family: “メイリオ”」を指定するのはやめた方がいいかも
スタイルシートで font-family: “メイリオ”; と指定しているサイトをちょくちょく見かけるが これは今の時点ではやめておいた方がいいんじゃないかと思う。 確かに Windows XP にもメイリオを入れられるようになったが、 こないだ書いたように Windows XPでメイリオを使う方法まとめ – 頭ん中 メイリオをダウンロードして XP に入れるだけでは 綺麗な縁で表示されない。 から。 ブラウザの設定で、 サイト側で指定されたフォントを使わないようにしている人や そもそもメイリオを入れてない人なら問題ない。 その場合はデフォルトのフォントで表示されるから。 が、メイリオをインストールしたけど ClearType を使う設定をしていない人が メイリオ指定のサイトを開くと、 ギザギザだったりつぶれていたと きったないメイリオで表示されてしまう。 これならMSゴシックの方がマシ。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
blueprintcss - Google Code
よく使われているCSSハック12選（＋おまけ） | IDEA*IDEA
CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記