RedLine Magazine : 印刷用CSSのお話
印刷用CSSのお話 最近担当したサイトでは印刷用CSSをたいがいセットにしてます。同業者の方だと経験あるかもしれないですが、昔の鬼級テーブルレイアウトの頃は言われた事なかったんですがCSSを使い始めてから「背景が印刷できない」と、よく言われました。「ブラウザの設定で『背景も印刷する』にチェック入れると出てきますよー。デフォルトではインク節約仕様になってるんすねー（嘘かホントかは知らない）あはははー」とか返してました。 デフォルトの状態で印刷できないってのは問題あるだろってのはもちろんちゃんと分かってたんですよ。ここは背景扱いにしたらデフォ状態で印刷したらエラい事になるぞ、とか使い所の選別はしてましたし。まぁでも「あなた、なんでもかんでも画像化するの大好きなクセに検索対策っ！検索対策っ！さっさと検索対策～！って言うじゃん」とか鬱憤も溜まってました。 印刷用のCSSを用意するようになってからは
CSSでクールなタブUIを作成するサンプル:phpspot開発日誌
OSResources - How to create CSS overlapping tabs? Sometimes simulating a real desktop interface for your web application can be a real challenge, especially when dealing with tabs. CSSでクールなタブUIを作成するサンプル。 次のようなタブUIを作ることが出来ます。 サンプルのCSSを定義しておけば、後は次のようにシンプルなHTMLをコーディングするだけで上記画像のようなタブUIが作れます。 HTMLもクリーン。 <ul class="obtabs"> <li class="first"><span><a href="#">Jack</a></span></li> <li><span><a class="new
検索手順ツール (Dark-I.com) | 100SHIKI
サイトデザインをするときは、たいてい他のかっこいいサイトを眺めながらインスピレーションを得ることにしている（真似にならない程度にね）。 そうした場合、たいてい色合いだけは決まっているので「青系でなんかいいサイトないかなぁ」と探すことになる。これはこれで結構面倒で、色合いで探せるデザインサイト検索サイト（ややこしいな・・・）がないかなぁ、と思っていたところ、あった。 Dark-iのサイトではまさにそのような検索を実現してくれている。これを使えば今までの作業が大幅に効率化されそうだ。 無意識に行っている検索手順をツール化してみる。デザインサイト検索以外にも応用ききそうですね。
デフォルトのフォームをクールにカスタマイズする方法:phpspot開発日誌
maratz.com archive Fancy checkboxes and radio buttons Many young guns ask about how to style custom checkboxes and radio buttons in forms. I prepared a typical markup, a few lines of CSS and some JavaScript functions (Safari label behavior fix included). デフォルトのフォームをクールにカスタマイズする方法。 以前、「Niceformでエレガントなフォーム生成 」というので独自フォームにデザイン変更する方法をお伝えしましたが、どういう仕組みか気になっていました。 独自フォームデザインの実装方法について書かれているサイトを発見したので仕組みを説
IT戦記 - FireBug の新しいバージョンが便利すぎる件について
FireFox の拡張機能 FireBug を更新したらすごいことになっていたので共有します。 まずこれを見てください http://Sample.ECMAScript.jp/20060331.html ぱっと見の機能 HTML のソースを見ながら、属性値を直接編集できる。 影響のある CSS を即時に表示 レイアウト情報を即時に表示 インスペクト中の要素に浮上したイベントをキャプチャ インスペクト中の要素の JavaScript オブジェクトを表示 Ajax レスポンスのヘッダも確認できるようになった。 FireBug のインストール https://addons.mozilla.org/extensions/moreinfo.php?application=firefox&id=1843
Ajaxな有用コンポーネント集:phpspot開発日誌
TurboWidgets, presented by TurboAjax Group TurboWidgets are JavaScript client-side controls that provide a rich user-interface experience for AJAX-style web applications. 以前紹介した、AjaxなphpMyAdmin のページで、TurboWidgetsというAjax部品集がリリースされていたので紹介。 例えば、次のイメージはTurboGridというコンポーネント。かなりクオリティ高いです。 その他にも、次のようなプログレスバー(ぐんぐん伸びるイメージがカッコいい) 高品質なボタンコンポーネント集(一見デスクトップ風) ツリービュー(アイコン表示できる) タブコンポーネント(Appleのサイトっぽい) ドラッグアンドドロッ
すでに入り口にいるのに、ホームに導くボタンは親切か ― ＠IT
Webアプリケーションのユーザーインターフェイス[7] すでに入り口にいるのに、ホームに導くボタンは親切か 「可視性とフィードバック」 ソシオメディア 上野 学 2006/2/15 前回の「『戻る』で入力データが消えてしまうフォームはいらない」では、経験則その2として「寛容性とユーザーコントロール」の話をしました。システム側がユーザーを信頼し、ユーザーのコントロール下でユーザーの思いどおりの振る舞いをすることで、ユーザーとシステム（あるいはサービスの提供者）との間に信頼関係が生まれ、利用効率や生産性が高まっていきます。 そこで今回は、どうすればユーザーが思いどおりにシステムをコントロールできるのか、どうすればユーザーはシステムが自分の思いどおりに動いていると感じるのか、ということを考えたいと思います。これが経験則その3、「可視性とフィードバック」です。
koyachiの日記 - Joshua Schachter(del.icio.us)による大規模アプリケーション構築の注意点
del.icio.us/tag/del.icio.usを眺めていたらFlickrのときみたいに面白い資料を見つけたの紹介します。 Things to look out for when building a large application.というタイトルでサーバーサイドの管理等の話が中心かと思って読んでいたらそれ以外のインターフェース、実装すべき機能、spam対策、アプリケーションを如何に広めるかといった話にも触れていて面白いです。 以下にまとめてみました。 スケーリング 早期の最適化を避ける。SQLでスケーリングするのではなく、データを複数マシンに分散させる方法を考慮すべき。SQLプロファイリング重要。Nagiosがお勧め。 タグはSQLと相性がよくない。インデックシングの仕組みを理解し、その方針を決定する。最初の数ページに限定すれば小規模で高速なインデックスを保てる。 Apache
ブラウザ幅に応じて変わるレイアウト | 秋元@サイボウズラボ・プログラマー・ブログ
via clagnut ブラウザの幅が狭いと2段、広いと3段になるようなページレイアウトをいくつか紹介している記事。 見てもらうのが一番早い。以下のページを開いて、ブラウザの幅を狭くしたり広くしたりすると、縦列の数が変化する。 UX MAGAZINE Redesign Notes 1: Width-based layout 著者自身のサンプルは、幅によってはあまり美しくならないが、何段にも可変にできる。 画面の大きな人でも小さな人でも、それなりのページが返せるというのはいいかもしれない。もっとも、逆に表示サイズがどうであれ同じレイアウトになることを望む人もいるだろうが。 日頃、だいたいブラウザの幅なんて一定で使ってるので、こういうレイアウトのサイトがかなり普及してたとしても気づいてないわけだが。こうやってブログで特集されてはじめて気づいた。僕は横にスクロールさせるよりはこっちの切り替えのほ
naoyaのはてなダイアリー - サーバーを増やせばいいんじゃない、サーバーを増やすだけで解決できるように努力するのだ
ライブドアの技術の話について書いた、その記事のコメント欄。最初は感情的な批判などがあって話題とは別の方向で炎上し気味だったんでうーんと思ってたんですが、後半になってきて少し面白い議論が出てきました。 こんな反応があった。 アクセス数が増加している段階で、ApachやAppServerのスレッド数をいじろうが、ヒープサイズを増やそうが、DBのパラメータをいじろうが、はてまたアプリを書き直そうが、性能要求にミートするには相当のワークが発生しますし、どう最適化、チューニングしても追いつきません。そのようなチューニングにお金をかけるならサーバーを追加したほうが安く上がるのではないかと思うのですが、如何でしょう? それに対する僕の返信は、 確かに何千万もするファイルサーバーとか、ロードバランサーとかで問題が解決できる機会っていうのは存在すると思います。なので ”負荷が高ければ、結局サーバーを単純に増
yohei-y:weblog: 良い URI の設計
URI は綺麗であるべき、と常々思っているんですが、よいページを発見しました。 Michael Eakes のこのエントリです。 Tanya Rabourn がリストアップしている文献一覧からエッセンスをまとめてくれています。 曰く、よく設計された URI とは 変らない(don't change) 人間が推測可能(are human guessable) 論理的(ファイルシステムを反映する必用がない) (are logical (no need to mirror a filesystem)) サイト構造をビジュアライズするのに役立つ(help visualize the site structure) 短い(are short) 小文字を使う(use lowercase) 予期されない記号を使わない(don't use unexpected punctuation) 問合せパラメータな
クールなURIは変わらない -- Style Guide for Online Hypertext
クールなURIとは？ クールなURIとは変わらないもののこと。 どんなURIが変わってしまう？ URIは変わらない：人がそれを変更するのだ。 理屈の上では、人々がURIを変更するべき（もしくはドキュメントのメンテナンスをやめてしまう）理由は全くありません。しかし、現実には山ほど理由があります。 理論上では、ドメイン名空間の所有者はその空間を所有しており、したがってその中に含まれるURIも所有権を持ちます。ドメイン維持料が支払えない場合を除いて、その名前を保有し続けることを妨げるものはありません。そして理論上は、あなたのドメイン名のもとにあるURIは、完全にあなたの管理下にあり、望む限りそれを安定的に保つことができるのです。 ウェブからあるドキュメントが消えてしまう唯一の納得できる理由は、そのドメイン名を保持していた会社が廃業してしまうか、サーバーを維持できなくなったという場合ぐらいでしょう
「戻る」で入力データが消えてしまうフォームはいらない ― ＠IT
Webアプリケーションのユーザーインターフェイス[6] 「戻る」で入力データが消えてしまうフォームはいらない 「寛容性とユーザーコントロール」 ソシオメディア 上野 学 2005/12/22 前回「入力情報を預かる責任を果たせる画面デザインとは？」は、あらゆる経験則の土台となる価値観として、「ユーザーを尊重する」というユーザー中心の姿勢について述べました。今回からは、Webアプリケーションのユーザーインターフェイス（UI）・デザインを行ううえで有効な経験則を、少し具体的に考えていきたいと思います。 その前にまず、連載の第1回「ユーザーにとっては“ユーザーインターフェイス”こそが製品そのもの」で触れた HCI（Human-Computer Interaction）の分野でよく挙げられる、コンピュータを用いた対話型システムの設計原則を紹介しておきます。ここでいう「対話型システム」とは、ユーザー
川o・-・）＜2nd life - web2.0なアプリケーションで使えるアイコン
http://www.famfamfam.com/lab/icons/ 自分でwebアプリケーションを作ってる場合、外観がどうしても疎かになりがちです。CSSでの見栄えならそこそこ頑張ればいけるのですが、あとちょっとインパクトが欲しい、そういうときに小型のアイコンが欲しい！といつも思ってしまいます。で、時たまそれっぽいアイコンを探してたのですが、有料なライセンスだったり、デザイン的にいまいちぱっとしなくて、これだ！という物がありませんでした。 上記famfamfam.comではそんなweb2.0なwebアプリケーションに似合うアイコンを合計すると1000個ぐらい、FreeもしくはCCライセンス帰属 2.5 で公開しています。今度から作るWebアプリケーションで効果的に使っていこうと思います。 あ、他にライセンスが緩くて素敵なアイコンを公開しているサイトを知っている方がいましたら教えて下さい
Collection & Copy - 画像 CSSを使った角丸
画像 + CSSを使った角丸 技術 wg:Introducing DomCorners 上記ページを読んだ。 Nifty Corners 作者はCSSのみで角丸を実現する記事を書いている。当ブログでも、これを利用している。 その上で異なるアプローチの角丸を紹介している。 上のような画像を、1コマずつずらしながらCSSを利用して貼りこんで行く。 対象となる領域のHTMLは以下。 <div id="box"> <b class="btop"><b></b></b> content here... <b class="bbot"><b></b></b> </div> CSSの定義は以下。 b.btop, b.btop b, b.bbot, b.bbot b{ display: block;height: 10px;font-size: 1px; background-image:url(rc.
Passion For The Future: Web開発を支援するツールバー Internet Explorer Developer Toolbar Beta
« マインドマップ読書術―自分ブランドを高め、人生の可能性を広げるノウハウ | Main | ドラッグアンドドロップでテキスト整形 簡単！一発改行ツール » 書評：脳・こころ ｜書評： 企画・発想｜ 書評：文化・文明｜書評：経済・経営 ｜書評：子 供・教育｜書 評：小説・戯曲｜書評：ネット活用 ｜書評： 仕事・管理｜書 評：メディア論｜書評：その他｜書評：思想・哲学 ｜書評 ：文章・表現｜書評：認知・心理 ｜書評：神 話・宗教｜書 評：科学・技術｜書評：社会・世間 ｜書評：教養 ・雑学 2006年度 年間オススメ書籍ランキング ノンフィクション部門 2006年度 年間オススメ書籍ランキング フィクション編 2005年度 書籍売り上げラン キング ベスト20 2005年度 年間オススメ書籍 ランキング ベスト20冊 2004年度 人気記事ベスト10 アクセス数が多かった記事とは？ 2004年
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
caramel*vanilla - 色に関する便利ツールいろいろ
https://labs.cybozu.co.jp/blog/kazuho/archives/2006/02/utilizing_cache.php
Open Source Web Design - Download and upload free web designs.
文書集 :COULD