Lucky bag::blog: line-height の値には単位なしが良いとされる理由

2006/04/10 492 users line-height length 単位 ナビゲーション

この記事が属するカテゴリー CSS CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位... 続きを読む

hxxk.jp - CSS の記述ルール記事のまとめ

2006/08/16 433 users CSS 最大公約数 明文化 正解 hxxk.jp

いまだに私自身「これだ ! 」という答えを見出していないのですが、 CSS の記述ルールって絶対的な正解ってありませんよね ? ちょっと私が知っている範囲で明文化されている CSS の記述ルールを集めてみましたので、それを元に絶対的な正解のルールではなく、最大公約数的なルールを模索してみたいと思います。 ちなみに、今回模索するのは Lucky bag::blog: CSS を作成する際のお約束やデ... 続きを読む

Lucky bag: : blog: 背景画像に使える透過 GIF

2006/09/05 338 users gif Blog secondlife 背景画像 斜線

この記事が属するカテゴリー CSS 斜線やストライプの背景画像を Photoshop とかで作ると、色を変えたくなった時にそのたび作り直しってのが面倒。便利で使ってる人も多いかもしれない secondlife さんの Background Image Maker でもそれは同じかな。んで、Photoshop とかで作る場合に、線に色を付けて作るんではなくて、色を付けたい部分を透過にして作っておいて... 続きを読む

Lucky bag::blog: CSS を作成する際のお約束

2005/08/04 296 users CSS Blog margin ムキー デフォルトスタイル

この記事が属するカテゴリー CSS CSS を作成している際に、当然の如くブラウザによって描画結果に違いが出てくるわけで、ムキーとか言いながらその差異を埋めていく作業が一番面倒っちゃあ面倒。んで、ボックスモデルやその他ブラウザごとのバグ以外で、極力そう言った差異を少なくするためには、一番最初に全称セレクタを使ってブラウザのデフォルトスタイルを消してしまうのが手っ取り早い。 * { margin: ... 続きを読む

Lucky bag: : blog: CSS デザインギャラリー

2005/09/22 293 users Blog

この記事が属するカテゴリー CSS 世の中には (X)HTML + CSS の素ん晴らしいデザインでレイアウトされている方なんつうのはそりゃ沢山いるわけで、そんなサイトを集めたデザインギャラリー（ショーケース）サイトってのを見ていると、おいおいフォトショップ腕自慢かよって感もあるけど、結構インスパイアされたりされなかったり。そんな CSS デザインギャラリーサイトで自分が知っているものをちょっとま... 続きを読む

デザイン担当のジョナサン・アイヴが語る「アップルのデザインの進め方」 : ライフハッカー［日本版］

2013/01/02 206 users ジョナサン・アイヴ アップル ライフハッカー iPhone

先日お伝えした通り、今日1月2日は2013年Apple福袋「Lucky Bag」の発売日。この記事では、「Lucky Bag」の発売を記念して、兄弟メディアであるギズモードのこちらの記事より、MacBookやiPhone、iPadといったプロダクトのデザイン担当者ジョナサン・アイヴ氏の「アップルのデザイン」についてのインタビューを転載します。アップル製品がなぜ愛されるのか、その一端がここから見えて... 続きを読む

デザイン担当のジョナサン・アイヴが語る「アップルのデザインの進め方」 : ライフハッカー［日本版］

2013/01/02 206 users ジョナサン・アイヴ ギズモード アップル ライフハッカー 通り

Apple , GIZMODO , iPad , iPhone , iPod , メディアジーンサイト デザイン担当のジョナサン・アイヴが語る「アップルのデザインの進め方」 2013.01.02 11:00 先日お伝えした通り、今日1月2日は2013年Apple福袋「Lucky Bag」の発売日。この記事では、「Lucky Bag」の発売を記念して、兄弟メディアであるギズモードのこちらの記事より、... 続きを読む

Lucky bag::blog: グリッドレイアウトのための背景画像

2006/07/19 200 users グリッドレイアウト Blog 背景画像

この記事が属するカテゴリー CSS web&blog ウェブページをグリッドレイアウトするのであれば、あらかじめ CSS で背景画像にルーラーみたいな画像を指定しておけば制作時に便利じゃね？ってアイデア。 Subtraction: Grid Computing… and Design Airbag - Ruler. Using a Background Image Grid to Lay Out ... 続きを読む

Lucky bag::blog: dt と dd を横並び

2005/10/04 193 users margin CSS Blog カテゴリー CSS 記憶力

この記事が属するカテゴリー CSS 定義リスト dl 内の dt と dd を CSS を使って横並びさせる方法ってのはいくつかあるんだけど、最近どうも記憶力が低下してきた気がするんで、完全自分用メモとして記しておく。 多分オーソドックスな方法 とりあえず最もオーソドックスであろう方法。これ意外にもあるのかもしれないけど、多分今んとこ自分は知らない。（margin を使った方法は前にも記事にしたこ... 続きを読む

Lucky bag::blog: プロパティから CSS 仕様書（邦訳）へのリンク

2005/11/26 187 users 邦訳 プロパティ CSS 当該箇所 各プロパティ

 プロパティ -> CSS 仕様書（邦訳）へのリンク 各プロパティから仕様書（邦訳）の当該箇所へのリンクです。( en | ja ) 続きを読む

Lucky bag::blog: 個人的に気に入ってるユーザースタイルシート

2006/08/07 186 users Blog ユーザースタイルシート moz URI ガチ

この記事が属するカテゴリー CSS 今んとこ、ガチで不動のレギュラーメンバーな自分のユーザースタイルシートを晒してみる。userstyles.org で見つけたやつとか、自分で書いたやつとか。ちなみに、ユーザースタイルシートの管理は　Firefox の 拡張 Stylish で。 livedoor Reader 用 各記事タイトルの下にある"元記事"って部分を URI に置き換えて表示 @-moz... 続きを読む

俗に言う clearfix と言われるコードのバリエーション色々 - lucky bag

2007/05/26 166 users clearfix visibility both clear

clearfix ネタに乗っかってみる。 スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る －モダンブラウザ編－ clearfixはちゃんと考えられてた .clearfix:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } .clearfix { _he... 続きを読む

Lucky bag::blog: CSS で画像ポップアップ

2005/09/11 166 users CSS Blog hover マウスオーバー 最初

この記事が属するカテゴリー CSS JavaScript を使わずに、CSS を使ってサムネール画像の拡大画像をマウスオーバーで表示せる方法「CSS ~ Image Pop UP」を参考に、拡大画像をその場で表示させるサンプルを作ってみた。 popup.html 最初に拡大画像を高さ 1px 幅 1px に指定しておき、hover で正寸を指定させることによって実現させている。ちなみに、hover... 続きを読む

Lucky bag::blog: 訪問済みリンクを一工夫する

2005/09/10 164 users Blog 訪問済みリンク

この記事が属するカテゴリー CSS リンクの色によって、訪問済みなのか否かの判別を出来るようにするってのは、ユーザビリティ的には必要なことだとは思う。そう言った意味では、拙サイトなんかは全くもって許し難い設計な訳だけど、まぁそれは置いておく。んでもって、ただ色を変えるだけではなく、画像を使ってもうちっと視覚的に分かりやすくするのもありなんじゃないのかなぁって思ってみた。そして、サンプルを作ってみた... 続きを読む

Lucky bag::blog: CSS だけで Mac OS X の Dock 風ナビゲーション

2006/03/07 162 users Dock CSS Blog Weblog ギミック

この記事が属するカテゴリー CSS Paul Armstrong Designs - Weblog - CSS マウスオーバーした時にグニュって拡大する Mac OS X の Dock っぽい動きを CSS だけで実現させるってアイデア。このギミックがユーザビリティ的にどうかは置いておくとして、隣接セレクタを使ってフォントのサイズを段階的に変えるってのは面白いなぁ。試しに自分でもサンプルを作ってみ... 続きを読む

Lucky bag::blog: CSS の習得度レベル 5

2006/01/31 148 users CSS 現実逃避 言語 Blog 段階

この記事が属するカテゴリー CSS あらゆる言語がそうであるように、プレゼンテーション言語である CSS にも習得度の段階がある。自分が思うレベル 5 を挙げててみた。とか、それらしく始めてみたけど実はかなりネタ気味な内容。ここ最近のあまりの忙しさに現実逃避で思いつくまま書き連ねてみただけ。当然の事ながら、この内容が万人に当てはまるわきゃないですよ ;-P CSS 習得度レベル 1 色とか簡単に変... 続きを読む

Lucky bag::blog: CSS Reboot に見るウェブデザインのトレンド

2006/05/05 139 users ウェブデザイン トレンド Blog

この記事が属するカテゴリー web&blog 以前にも取り上げた事があったけど、CSS Reboot ってのは、ウェブサイトのリデザインを期日を決めて一斉に行なうイベント。多分もう 3 回目くらいだと思うんだけど、5 月 1 日に 2006 Spring が行なわれたばっか。CSS Reboot のサイトでは、リデザインしたウェブサイトが紹介されてて、誰でも気に入ったサイトに投票できるようになって... 続きを読む

Lucky bag::blog: Firefox で開いているタブを Expos

2005/12/02 137 users Expos Firefox マック タブ タブ幅

この記事が属するカテゴリー Firefox ここ最近のマックの UI では Exposé が最強って思ってるんだけど、その機能を Firefox のタブで再現できる foXpose がいい感じ。 ネットで何か調べもんをしていると、Firefox のタブを余裕で 10 個以上開くなんて事がある。タブが増えればそれだけタブ幅が狭くなってくるわけで、そうなってくると当然ページタイトルが判別できなくなって... 続きを読む

Lucky bag::blog: CSS だけでフォトギャラリー

2005/11/05 132 users フォトギャラリー CSS Blog

この記事が属するカテゴリー CSS CSS だけでフォトギャラリーっぽいのを作ってみるテスツ。「stu nicholls | CSS PLaY | CSS photo-gallery hover and active」あたりを参考に、ちょっとやってみた。サムネールにマウスオーバーで拡大画像を表示。サムネールクリックで拡大画像を固定。別の場所をクリックすると元に戻る。ってな挙動。最低限のブラウザでし... 続きを読む

Lucky bag::blog: 印刷用 CSS に必要なこと

2005/08/18 115 users ｒｙ Blog 需要 紙媒体 カテゴリー CSS

この記事が属するカテゴリー CSS 拙サイトにおいて印刷用 CSS の需要と必要性がどれほどあるのかは微妙だけど、とりあえずは用意していたりする。んで、作成した当時にこうした方が良いかなってな事がいくつかあったんで、何となく書き残しておく。いや、別にネタがないとかそう言うことじゃ (ry 基本的に紙媒体を対象とするもんだから、通常のスクリーン用 CSS を作成する時とは考え方が変わってくる。 不必... 続きを読む

Lucky bag::blog: ピュア CSS なプレゼン用スライドショー

2006/11/02 114 users Blog 脚注 target 疑似クラス 文書

この記事が属するカテゴリー CSS 前回の「CSS3 の target 疑似クラスで脚注を動的に表示する」に引き続き、:target 疑似クラスを使ってスライドショーみたいなんを作ってみた。ひとつの HTML 文書なんだけど、画面が切り替わっていくかのように見せる。ピュア CSS とか言いつつも、前回同様、:target 疑似クラスに未対応な IE でも動くように JavaScript を使ってい... 続きを読む

Lucky bag::blog: 使用中のブラウザの CSS セレクタ対応状況をチェックできる CSS Selectors testsuite

2006/10/10 114 users CSS Selectors testsuite Blog

この記事が属するカテゴリー CSS タイトル長っ！ まぁ、そのまんまなのだけれども、今使用しているブラウザが、CSSのセレクタ（CSS3も含む）にどれくらい対応しているかチェックできる CSS Selectors testsuite - CSS3 . info が便利っぽい。 Start testing... をクリックでチェックが開始され、各セレクタの結果が緑色であれば対応、赤色であれば未対応っ... 続きを読む

Lucky bag::blog: CSS3 の target 疑似クラスで脚注を動的に表示する

2006/10/28 112 users 脚注 target foo URI 疑似クラス

この記事が属するカテゴリー CSS 文書の URI の後に #foo などの識別子（id）をつけたアンカーから、その文書内の当該箇所へジャンプできるのは周知の通り。ただ、スクロールもせずに移動するんで、閲覧者が一瞬戸惑ったりるすわけで、CSS3 では、そのターゲットとなる要素をハイライト表示させたりすることが可能な :target 疑似クラスってのが用意されている。現在、:target 疑似クラス... 続きを読む

Lucky bag::blog: Appendix

2006/03/30 100 users Blog

今まで作ったサンプルなどを集めたページです。リンク先を閲覧済みの場合は、チェックマークがつきます。 もしかしたら誰かの役に立つかも知れないもの プロパティから CSS 仕様書へのリンク プロパティから CSS 仕様書（邦訳）へのリンク xsl.zip RSS1.0、RSS2.0、Atom0.3 それぞれに対応した XSL ファイル 実際に適用したサンプル xml Atom0.3 RSS1.0 RS... 続きを読む

Lucky bag::blog: Firefox で閲覧中の画面を簡単に画像に保存できる機能拡張

2005/09/07 99 users Firefox Blog extensions 機能拡張 画面

この記事が属するカテゴリー Firefox うほっ、Firefox の機能拡張「Screen grab! 」がかなりヤバス。便利すぎ！ Mozilla Update :: Extensions -- More Info:Screen grab! - All Releases インストールすると、右クリックから閲覧中のページを png 画像に保存できるようになるんだけど、これが 3 種類の中から選択... 続きを読む