![TableとCSSいろいろ - DesignWalker](https://cdn-ak-scissors.b.st-hatena.com/image/square/4ff1f0b6088f4085799229c562dcb3525e2a3b27/height=288;version=1;width=512/https%3A%2F%2Fg.twimg.com%2FTwitter_logo_blue.png)
こんにちは、櫛井です。 webディレクターという仕事は色々な職種の方たちの間に入って調整をすることが多いのですが、一口で「調整」といっても結構難しいものです。webサイト開発に限らず、「言われたまま、言われた順にこなしている」という人が担当だと予定通りに物事は進みません。そこで今回は、webサイト開発時に頻繁に用いられるスケジュール作成方法についてお話してみたいと思います。 山ほどあるタスク、どれから手をつけるべきかを考えるためのヒントになれば幸いです。 ■ステップ.1 タスクに優先順位をつける まずはそれぞれのタスクに優先度をつけ、種類を決めて考えます。 ・クリティカル・パス (絶対に遅らせてはならないもの。最優先として認識すべきもの) 参照記事:プロジェクトマネジメントOS本舗 ・やらなければいけないこと (バグ解消、トラブル対策で必須なもの、社外との交渉など) ・やっておくといいこと
画像に鏡面効果を与えるreflection.js reulection.jsは画像に鏡面効果を与えるjsライブラリになります。 このライブラリを使用すれば、画像を加工することなく画像の下に鏡に反射したようなエフェクトが追加されます。 設置方法 ダウンロードしたreulection.jsをhead要素などで読み込みます。 <script tyle="text/javascript" src="./reflection.js"><script> エフェクトを追加したい画像のclass名にreflectを設置します。 <img src="[画像]" alt="" class="reflect" /> これだけで鏡面効果が与えられます。 サンプル 初期段階で画像が作るのが困難な場合や、背景が設定されている場合はこのライブラリを使えば効率的に作業ができるでしょう。 rheight20~80のクラス名
テーブルをソートできるようにするjsライブラリ-table sorting table sortingはテーブルをソートできるようにするjsライブラリです。 テーブルの内容でソートしたり、奇数行、偶数行にそれぞれ異なるclassをつけたりが可能です。 設置方法 ダウンロードしたsortable.jsをhead要素内なので読み込みます。 <script type="text/javascript" src="sortable.js"></script> ソートの対象のtable要素のclass属性をsortableに設定して、任意のID名をid属性につけます。 <table class="sortable" id="foo"> ソートの対象にしたくない列がある場合はth要素のclass属性にunsortableを設定します。 <th class="unsortable"> ソートの対象にした
A Pattern Library for Interaction Design This site contains a lot of best practices in Interaction Design. Over the years I have collected examples and insight on their applicability that I share with you here on this. So there is really no 'original' design to be found here, sorry. It has all been done before... See it as a reference or basic 'toolkit' you can use when design user experiences. It
こんにちは、ディレクターのほうの谷口です(余談ですが、ライブドアには3名の谷口がいて、私はプログラマーじゃないほうの谷口です)。今回は、ユーザーテストについてお話したいと思います。 ユーザーテストは、ウェブサイトの新規立ち上げやリニューアルの際、ユーザーがウェブサイトやプロトタイプを実際に操作してもらう様子を目の当たりにすることで、問題点を発見する方法です。 ライブドアのサービスは、作る側とユーザー像が近いことが多かったので、頻繁にはユーザーテストをしてきませんでした。しかし、今後は自分たちと違うユーザー像も対象としていきたいことから、ユーザーテストの数を増やしていきたいと思っています。 ユーザーテストの専門会社に頼むという手もあり、そうすることで厳密に調査をしてくれます。しかし、ポイントをしぼって外注せずにすむ方法もあるので、ここに紹介します。 1. 被験者は友人か知り合いでいい 専門会
画面設計書について,前回に引き続き,それを書くツールや手法について考えてみましょう。 画面設計書の基本 まずは,画面設計書の中にあるべき情報から見てみましょう。これらすべてがそろっていなければならない,というわけではありませんが,望ましいのではないかと私自身は考えています。 header ページIDやタイトルなど,一目でそのページがどの画面仕様を記述しているかがわかるような「ヘッダー」部分。細かく書くならば,文字コードや対象ブラウザまで記述する場合もある。また,プロジェクトの名前(プロジェクト・コード)や版番号なども記し,似たようなドキュメントの中からも引き出せるようにしておく。 footer 制作サイドのコピーライトやページ番号などを記す。最終的には,クライアントのコピーライトに置き直して,最終納品とする場合もある。 Page Layout 画面内に配置する「ユーザー・インタフェース(U
こんにちは。yamazakiです。 前回はレイアウトなどについて非常にざっくりとですが書いてみたわけですが、いかがでしたでしょうか。 そろそろ「グラフィック」のほうも少し書いてみようかという気になってきたので、グラフィック品質を高めるベーシックな技術についても少しずつ書いていってみようと思います。 基本のき 具体的な話に入る前に、まずは基本的な話から。 とりあえず、ざっとあなたの周囲を見回してみてください。壁にしても、PCにしても、「単なる一色のベタ塗り」にはなっていないのではないかと思います。光の加減などで、「影」や「グラデーション」がついていると思います。また、ものの表面には「つるつる」「ざらざら」といった「質感」があるのが当たり前、という中で私たちは生活しています。 そのため、人の目はそういう「グラデーション」や「影」、「質感」がある状況を「見慣れて」います。 グラフィック上
Webサイトを構築する場合,通常は「設計書」を作成します。サイト全体の設計書であったり,ページ単体の設計書であったりするわけですが,今回は後者である「画面設計書」について考えてみましょう。 画面設計書を読むのは誰か Webサイトの構築では,対象ユーザーをできる限り具体的に決めてから開発を進めていきます。同様に,画面設計書にも「対象読者」を見定める必要があります。結論から言えば,かなり属性の異なる二種類の読者が存在します。 まず,発注者である「クライアント」です。クライアントは,技術的な難易度ではなく,自分たちのビジネス要件を満たすものが作られるかどうかを確認するために画面設計書を読みます。開発(プロジェクト)のゴールや,プロジェクトのメリット/デメリット,リリース後の顧客満足の予想などを,その設計書から読み取ろうとします。したがって,できる限り具体的なイメージが伝わるものが要求されます。
Have a Slice This is an example of creating a semi-dynamic pie chart without the use of server-side imaging libraries CSSだけで円グラフを表示するサンプル。 次のような円グラフをCSSのみで実現するサンプルが公開されています。 HTMLコードは以下のようにシンプルに表現できます。 <div class="shadow"> <div id="example"> <div class="pie size35"></div> <p class="percent">37%</p> </div> </div> 次のような1個の円グラフを並べた横長画像のbackground-positionをずらして、必要な部分だけ表示することで実現しているようです。 サーバサイドでもクライアントサ
Man with no blog : CSS Debugging Tools - Gary Barber Seems lately that we are now starting to get a good spread of CSS and JavaScript (DOM Scripting) debugging tools available. CSSデバッギングツール10選。 便利な各種ブラウザ用CSSデバッギングツールがまとまっていました。 XRay - ブックマークレット登録後、ページ内をクリックで情報を表示 YSlow - 先日Yahoo!がリリースしたパフォーマンス測定&アドバイスツール (for Firefox) Dust-Me Selectors - 不要なCSSを調査して表示してくれるFirefox拡張 Web Developer - おなじみ、CSS用に便利機能を提
リンクホバーを超カッコよくアニメーションするJavaScriptライブラリ「Scrollovers」 2007年08月07日- Scrollovers - A New Way of Linking Scrollovers are a way to quickly and easily add flair to your web pages, giving your users an experience they weren't expectin g. リンクホバーを超カッコよくアニメーションするJavaScriptライブラリ「Scrollovers」。 例えば、次のアンカーにカーソルを合わせて みてください。 [YOUR TEXT HERE] Scrollovers を使えば、こんなリンクの貼り方が出来ます。 普通のリンクより 分かりやすいだけでなく、訪問者に驚きを与えることが出来ますね
先日、diggでVitamin Features » Make your site mobile friendlyというエントリーが上がってきてました。見てみると、非常にうまい具合に携帯向けのCSSやHTMLの書き方などが紹介されていました。僕も携帯向けCSSの書き方には興味があったので、勉強がてら重要なポイントを抜き出して、和訳してみました。 和訳文は次からスタートです。(上記サイトの「mobile」は携帯電話やPDAを含めたモバイル機器が正確な訳ですが、ここでは話を分かりやすくするために「mobile」を全て「携帯」と訳しています。) 基本からスタートしよう。 既に論理的でセマンティックなHTMLを構造化しているんだったら、携帯を含めたどのデバイスでもきれいに、使いやすく、アクセシブルになっています。携帯によっては、WAPに準拠しているかもしれないし、もしかしたらWAP2もいけるかもし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く