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

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」の発売を記念して、兄弟メディアであるギズモードのこちらの記事より、... 続きを読む

俗に言う 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: 「実践 Web Standards Design」という本を書きました

2007/02/20 81 users Blog 実践 共著 org 執筆

この記事が属するカテゴリー Misc お知らせというか宣伝。九天社より出版される「実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips」の執筆をさせて頂きました。3ping.org の wu さんと hxxk.jp の真琴さんとの共著です。2007 年 2 月 23 日頃 から書店に並び始めるみたいです。Amazon にはまだ載っていないようです... 続きを読む

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

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

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

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

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

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

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: 背景画像に使える透過 GIF

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

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

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

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

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

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

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

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

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: カラー関連の情報を CSS 内に記述

2006/06/20 81 users CSS 置換 記述 Blog もと

この記事が属するカテゴリー CSS CSS ファイル内に Color Glossary を記述しておくってのは、複数人で CSS を管理する際はもちろん、自分にとっても明快なんで、とても良いアイデアだと思う。 Garrett Dimon / CSS Maintenance Tip: Use a Color Glossary Glossary をもとに CSS ファイル内を検索・置換で色の変更なんか... 続きを読む

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: line-height の値には単位なしが良いとされる理由

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

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

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: 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: Ajax を利用したアクセス解析ツール mapsurface

2006/03/06 76 users Ajax Blog

この記事が属するカテゴリー web&blog 非常にライトウェイトなアクセス解析ツール mapsurface 。ベータテストの申し込みしをしてから約 10 日ほど、忘れていた頃にアカウントが貰えたんでちょっと使ってみた。 mapsurface | web page activity widget mapsurface is a web page activity widget that helps... 続きを読む

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

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

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

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/26 187 users 邦訳 プロパティ CSS 当該箇所 各プロパティ

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

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: Firefox からウィジェットを起動できる機能拡張「Firefoxit」

2005/10/25 51 users Firefox ウィジェット 仮想 Blog 機能拡張

この記事が属するカテゴリー Firefox Firefox の機能拡張「Firefoxit」は、新しい試みととして面白い機能を提供してくれる。「Firefoxit」をインストールすることによって、仮想のデスクトップ上にウィジェットや小さいウェブアプリを Firefox から起動させることができるようになる。 Firefoxit の使い方 Firefoxit をツールメニューから起動すると、仮想のデ... 続きを読む

Lucky bag::blog: 維持しやすい CSS を考える

2005/10/21 71 users CSS Blog 好み 維持 保守性

この記事が属するカテゴリー CSS wg:Maintainable CSS CSS を維持・管理していく上で、保守性の高い CSS を作成するにはどういったことを意識して作成するだろうか。上記サイトでは個人的な好みと前置きし、いくつかアイデアを述べている。コメント欄なんかでもちょっと盛り上がってて、激しく同意できる部分もあったりそりゃ違うなとか思ったりと、色々と考えさせられた。 CSS を作成する... 続きを読む

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/09/22 293 users Blog

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