ブラウザ上でワイヤーフレームが作れるFrametastic - lucky bag
ワイヤーフレームっつうと、デザインの前にページ内の構成要素を明確にするもので、作成に使うツールはイラレやフォトショップ、エクセルやパワーポイントなど、人によって違うのかもしれない。そんなワイヤーフレームをブラウザ上で簡単に作れるウルトラ ライトウェイトな Frametastic なんてのを見つけた。ちなみに、今のところは Firefox のみでしか使えないみたい。 In-Browser Wireframe Prototyping with Frametastic What I’ve really longed for is an ultra-lightweight, simple tool for producing wireframes right inside the browser. No flash, no java, darn it - no server even - just
Lucky bag::blog: CSS Reboot に見るウェブデザインのトレンド
以前にも取り上げた事があったけど、CSS Reboot ってのは、ウェブサイトのリデザインを期日を決めて一斉に行なうイベント。多分もう 3 回目くらいだと思うんだけど、5 月 1 日に 2006 Spring が行なわれたばっか。CSS Reboot のサイトでは、リデザインしたウェブサイトが紹介されてて、誰でも気に入ったサイトに投票できるようになっている。ちなみに、CSS Reboot のその場でクリックするだけで評価できる vote 機能は、シンプルで良いな。送信した後に、Total score も表示されるし。 んで、Christian Montoya が今回の Reboot でのデザインのトレンドについて書いていたんだけど、大雑把に書き出してみると下記のような感じ。 1024px の幅 Silk Icons の使用 暗い背景に明るい色のテキスト 大きめのフッタ 1024px の幅
line-height の値には単位なしが良いとされる理由
CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位なし (number) で指定した方が良いのにとか思ったりする。その理由は Eric's Archived Thoughts: Unitless line-heights でも分かりやすく説明されているんだけど、ちと劣化コピーしてみる。 単位ありと単位なしの違い 手っ取り早く説明するために、サンプルを作ってみた。p 要素があって、その中にインライン要素の em で一部分を強調している。分かりやすいようにそれぞれの font-size
Lucky bag: : blog: CSS デザインギャラリー
世の中には (X)HTML + CSS の素ん晴らしいデザインでレイアウトされている方なんつうのはそりゃ沢山いるわけで、そんなサイトを集めたデザインギャラリー（ショーケース）サイトってのを見ていると、おいおいフォトショップ腕自慢かよって感もあるけど、結構インスパイアされたりされなかったり。そんな CSS デザインギャラリーサイトで自分が知っているものをちょっとまとめてみた。（ちなみに順不同） CSS Vault » The Web's CSS Site CSS Beauty | CSS Design Showcase Unmatched Style | CSS Design Gallery and Design Inspiration. CSS Drive css thesis: sites, that's all. » screenspire.com | the leading full
Lucky bag::blog: CSS の習得度レベル 5
あらゆる言語がそうであるように、プレゼンテーション言語である CSS にも習得度の段階がある。自分が思うレベル 5 を挙げててみた。とか、それらしく始めてみたけど実はかなりネタ気味な内容。ここ最近のあまりの忙しさに現実逃避で思いつくまま書き連ねてみただけ。当然の事ながら、この内容が万人に当てはまるわきゃないですよ ;-P CSS 習得度レベル 1 色とか簡単に変えられるらしい事を知っている CSS を使うのはフォントサイズの指定くらい CSS を使うメリットが良く分からない レイアウトには table 要素を使えば良いと思う まず、何から覚えれば良いのか分からない CSS 習得度レベル 2 外部 CSS ファイルのメリットを知っている ある特定の要素にスタイルを適用するには (X)HTML の方に ID かクラスを割り当ててから CSS で指定する CSS ハックでブラウザごとに指定を振り
Lucky bag::blog: CSS を作成する際のお約束
CSS を作成している際に、当然の如くブラウザによって描画結果に違いが出てくるわけで、ムキーとか言いながらその差異を埋めていく作業が一番面倒っちゃあ面倒。んで、ボックスモデルやその他ブラウザごとのバグ以外で、極力そう言った差異を少なくするためには、一番最初に全称セレクタを使ってブラウザのデフォルトスタイルを消してしまうのが手っ取り早い。 * { margin: 0; padding: 0; font-style: normal; font-weight: normal; } ここらへんは基本だと思ってたんだけど、未だにこれをやっていなくて、あのブラウザとこのブラウザで見た目が違うんですけどってのは結構いたりする。上記に text-decoration: none; や font-size: 100%; なんかを加えても良いかも知れないけど、最低限マージンとパディングは無くしておくことをお薦
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
