グリッドレイアウトブックマークレットを作りました : akiyan.com
グリッドレイアウトブックマークレットを作りました 2007-03-08 グリッドレイアウトのためのちょっと便利な背景画像 | S i M P L E * S i M P L Eが便利そうだったので、ブックマークレットを作ってみました。 ブックマークレットをを実行すると、背景画像がWeb Page Layout Grid | Smiley Cat Web Designで使われている画像に切り替わります。 ブックマークレットは以下からどうぞ。 [背景をグリッドレイアウトにする] 背景画像を切り替えてるだけなので、他にも応用がききそうです。 コメント / トラックバック コメント / トラックバック 3 件 *LOVE IS DESIGN* より: 2007-03-10 00:35 実用的！レイアウトで悩んだときに頼れるツール 計算された余白やレイアウト。美しいと感じるものには何か法則があるはず
CSSで「text-indent:-9999px;」や「display:none;」の画像置換は使ってはいけない - webデザイナーのナナメガキ
「text-indent:-9999px;」や「display:none;」でテキストをウィンドウ外に飛ばしたり非表示にして、代わりに背景画像を表示させる手法を「画像置換(Image Replacement)」というが、これには重大な欠陥があって、最近では使用が推奨されていない。 h5{ width:150px; height:50px; background:url('ir_test.gif') no-repeat; text-indent:-9999px; } <h5>SITE TITLE</h5> h5{ width:150px; height:50px; background:url('ir_test.gif') no-repeat; } h5 span{ display:none; } <h5><span>SITE TITLE</span></h5> 上記のようなCSSだと「CS
WEBデザインの際に使える５０のソース:phpspot開発日誌
50 sources for web design inspiration by Fuzzy Future When Fuzzy Future first got started, I said that our goal was to build content that other people can use to improve their own projects. WEBデザインの際に使える５０のソース。 当ブログでもいろいろと紹介してきましたが、カッコいいサイトをまとめているサイトがあったので紹介。 デザインに迷ったときはまず、他のデザインサイトを見ていろんなデザインを視覚に入れることが重要ですね。 The Best Designs Six Shooter Media’s Free Templates 2Advanced Studios Andreas Viklund Fre
Webdog - Uw Online Speurneus
Als je op zoek bent naar een betrouwbare partner voor je koeltransportbehoeften, kijk dan niet verder dan Petit Forestier. Met… Hallo, Willem hier! Welkom op mijn blog: Webdog! Ik heet Willem en heb dit blog vernoemd naar mijn hond Bram. Nou ja, niet vernoemd, maar toch wel een beetje opgedragen aan hem. Vandaar de woordspeling. Behalve mijn hond zijn andere belangrijke dingen in mijn leven: mijn
イマジネーションを刺激される変わった広告表現いろいろ
最近はWeb2.0的なバイラルマーケティング、いわゆるクチコミ的な広告手法が広告主には好まれるようになってきましたが、やはり広告の王道は「おもしろい」という点につきます。クチコミだろうが何だろうが、おもしろくない広告は価値が下がるわけです。 というわけで、いろいろと見ていてイマジネーションを刺激される広告をいろいろと見てみましょう。 閲覧は以下から。 人の顔っぽく見える ハインツのトマトケチャップですが、色は大切ですね これは禁煙の広告。誰がワトソン君を殺したのか？ 動物園の広告。ぬいぐるみを買うよりもホンモノを見に行く方が安い。 PSPの広告 牛乳の広告。よく牛乳を飲むのでこれはわかる気がする。 そのほかにも、以下のサイトにいっぱいまとめてあります。 Moronland.net - 50 Amazing Ads You Haven't Seen
CSS Rounded Corners 'Roundup' | Smiley Cat Web Design
This collection of techniques to create boxes with rounded corners using CSS has become quite popular. The problem now is there are so many choices it’s hard to know which one to choose. To that end I’ve provided some more information about each method in order to help people choose which best fits their needs. Some of these techniques use CSS and one or more background images, some use CSS, JavaS
Data Tables and Cascading Style Sheets Gallery
Current style: TagBox by TagBox Table design based on the fresh TagBox style.
CSSでデザインされたテーブルレスでクールなフォームサンプル:phpspot開発日誌
Tableless forms consider this a very important step in learning web design the right and straightforward way. CSS is no longer just a way of adding some simple styles to an element in your page. CSSでデザインされたテーブルレスでクールなフォームサンプル。 次のようなフォームのサンプルがダウンロードできます。 HTMLとCSS、画像がセットになっているので、ちょっと編集していろいろと応用できそう。 ログインの横にアイコンが表示されていると直感的かつ、オシャレなフォームになってますね。デザイン面で参考に出来そうです。 関連エントリ ブログのコメント部分やコメントフォームのデザインを色々集めたサイト
ちょっぴりオシャレな QR コードが作れる Web サービス | *LOVE IS DESIGN*
QR コードといえば、白と黒というイメージがあると思いますが、ちょっとオシャレでカラフルな QR コード作成サービスをご紹介します。 こちらの QR コードは携帯電話のバーコードリーダー機能を使ってデータを読み取ることができます。
過去のものがかすれていくというインターフェース | S i M P L E * S i M P L E
過去のものがかすれていくというインターフェース March 2, 2007 10:00 PM written by watanabe 以前読んだ三宅氏のコラムに、こんなことが書いてありました。 最近書き込まれた記事は普通に表示されるのに対して、古い記事になればなるほどフォントの色がセピア色にあせていき、最後には記事が消えてしまう機能があればいいかもしれない。 この記事での文脈とはちょっと違うかもしれませんが、指定したURLのFaviconを画像に自動変換できるFavicon APIでは、そんなアイデアの一つの実装例を見せてくれているのではないでしょうか。 » Favicon API ここの「最新の20件」のところにご注目。 ↑ 過去のものがだんだんかすれていってます。 「下にいくほど過去のもの」とは頭ではわかっていますが、かすれてくれると視覚的にわかりやすいですよね。ぱっと見たときの情報
キャズムを超えろ！-家電メーカーよ、今すぐその時代遅れのUIから脱却せよ
TVのリモコンやデジタルカメラの操作ボタン類は、なんでああも使いにくいものなのか。PCやケータイを使い慣れた層にとっては苦痛以外の何者でもない。商品企画を仕切っているコンサバティブなオヤジどもを今すぐシルバー層向け商品の担当に転向させ、PCやケータイに慣れたユーザにメインストリーム商品のUI設計，リモコン設計を任せるべきだ。 リモコンと画面を行ったり来たり... 家電のUI設計の基本は、もとが1ボタン1機能である。とはいえ多機能化するデジタルTVやDVDレコーダー、デジタルカメラといった機器をこの思想で設計すると、100個はくだらないボタンを備えたリモコンが必要になる。これらの機器は全てディスプレイを備えているため、カーソルキーと決定キーを用意し、PCライクなGUIによる操作体系を加えた。が、ここでどっかの誰かがぶっとんだ間違いを犯した。 『操作回数が少ないことは何を差し置いてもいいことだ
lockエラー | 月額200円からのレンタルサーバー JSN
まずは最近知って便利だと思ったCSSの小技をひとつ。 文章の最後に、「※（米印）」などで注釈を入れたいときに、CSSのみで行の開始位置を揃えるのにすごくシンプルなやり方がこれ。 .note { padding-left:1em; text-indent:-1em; } <p class=”note”>※米印を使う場合はこいつが便利。<br /> 改行してもこの通り。ちゃんと開始位置が揃ってる。</p> 「padding-left : 1em;」でまず１文字分右に動かして、「text-indent : -1em;」で最初の行だけ１文字分左に出す、ということらしいです。これ考えた人はえらいっすねぇ。 他には開始位置を揃えるいわゆる「ぶら下げ」をCSSでやる場合、<div>タグの入れ子を使ってもいいが、<dl><dt><dd>の定義型リストを使うのがおすすめ。Definition Listの略で
【レビュー】ColorJackがやってきた! - Firefox+JavaScript+Canvasでここまでできる!! (1) ColorJackとは | エンタープライズ | マイコミジャーナル
オンラインでカラーテーマを作成するサービスとしては、Adobe SystemsがAdobe Labsで公開したkulerを挙げることができる。kulerは同社の提供しているFlex2を活用して開発されたWebサービスで、Flex2でどういったことができるかを実証する、という位置づけにある。Flex2で開発されているので動作プラットフォームは当然Flash。Webサービスでありながらデスクトップアプリケーションのようにスムーズな動作が魅力だ。しかも同サービスで作成したカラーテーマは同社の他のプロダクトでも活用できるという優れもの。 図1 Adobe Labs – kuler kulerは興味深いWebアプリケーションだが、動作させるにはFlash Player 9.0.28.0が必要で、執筆当時はまだLinux版の同バージョンは提供されていなかった。2007年1月17日(米国時間)にLinu
CSSに見惚れてばかりじゃなくて、もっと私（HTML）を見てよっ！
と、htmlさんが嘆いている気がしたので、こんなサイトですがhtmlさんに付いて書きます。 ウチのサイトの一番の目的は「CSSって面白い！」って思ってもらい、興味を持ってもらう事にある訳ですが、次のSTEPに進む為にやっぱり通らなければならない道である（X）HTMLの正しい記述方法。 もちろん、CSSの勉強の前に（X）HTMLの理解をしてからが理想だと思いますが、ボクはソレがベストだとは思っていません。 何かを覚えるのに、「この順番で覚えなければ絶対にいけない。」なんて事は無いと思います。 ホントのビギナーさんは、CSSビギナー向けから、取りあえずCSSに触ってみるっていうのがボクのオススメです。 楽しんでナンボっす。 で、まぁ今回の対象となる方々は、テーブルレイアウトからCSSに移行した人で、（X）HTMLについては特に触れなかった人とか、Blogで初めてCSSに触れた人とか、CSSの魅
ウェブデザインコンプレックスは克服できるか - GIGAZINE
幽霊の正体見たり枯れ尾花。これが結論である。 デザインセンスや技術力は努力だけで90％まで到達できる。後残りの10パーセントがその人の持って生まれた才能やセンスの問題、後は好み。あるいは、生まれ育った生活環境や諸々のもの。とにかく、努力では変えようのないものが残り10パーセントを占めている。 だが、努力だけで到達可能な90パーセントまで達すれば、一流のプロとして通用するレベルである。今から定年までにこの技術を磨いておけば一つの芸として成立するし、あなたの老後はバラ色だ。そのためには、ほふく前進で努力をすることが必要となる。一体、デザインの現状というものはどのようなものなのか？以下、述べてみよう。そして、ウェブデザインコンプレックスを克服する方法を教えよう。 なんとなく、目に触れる美術環境が戦後の日本は貧しくなっている。大量生産で画一的なデザインがいっぱいになっている。日本の生活風習で「ひと
dtの方が高さが有る時のdt dd を横並び
久々に定義リストを横並びにしたら、IE7で上手くいかず、ちょっと苦戦したのでメモめもMEMO。 おそらく、ddがテキスト量などで高さがdtより多い場合は問題が無いんだろうけど、dtの方が高さがある場合、IE7だと上手い具合に回り込みが解決されない（っぽい dtの方が高さがある場合。っていうのは今回の場合は画像にdtが来て、ソレを定義付ける説明がちょろっとあるようなイメージ。 実際の表示は下のような感じ。 SQ Lifeのバナーです。 SQ Lifeのバナーです。 スタイルは以下のようになられます。 dl#sample_070228 dt { float:left; clear:both; width:125px; margin-right:10px; margin-bottom:20px; border-bottom:0; } dl#sample_070228 > dd { float:l
まとめのインテリア持ち上げるたび、テーブルに春。 SAKURASAKU glass サクラサク グラス
SAKURASAKUglass(サクラサクグラス)は、結露を楽しく演出します。 グラスの底が桜の形をしています。 結露したグラスを持ち上げるたび、テーブルの上に桜が咲きます。 邪魔に思えた水滴を、このグラスで演出してください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
hereticanthem co.,ltd. » なにかと使えるWebジェネレータのまとめ その２
12パターンのCSSテンプレート - youmos
//// COLOURlovers :: loving colours since 1981