ブラウザ上でワイヤーフレームが作れるFrametastic - lucky bag
ワイヤーフレームっつうと、デザインの前にページ内の構成要素を明確にするもので、作成に使うツールはイラレやフォトショップ、エクセルやパワーポイントなど、人によって違うのかもしれない。そんなワイヤーフレームをブラウザ上で簡単に作れるウルトラ ライトウェイトな Frametastic なんてのを見つけた。ちなみに、今のところは Firefox のみでしか使えないみたい。 In-Browser Wireframe Prototyping with Frametastic What I’ve really longed for is an ultra-lightweight, simple tool for producing wireframes right inside the browser. No flash, no java, darn it - no server even - just
CSS だけでフォトギャラリー - lucky bag
CSS だけでフォトギャラリーっぽいのを作ってみるテスツ。「stu nicholls | CSS PLaY | CSS photo-gallery hover and active」あたりを参考に、ちょっとやってみた。サムネールにマウスオーバーで拡大画像を表示。サムネールクリックで拡大画像を固定。別の場所をクリックすると元に戻る。ってな挙動。最低限のブラウザでしかチェックしてないんで、まともに動かない環境もあるかも知んない。 gallery.html (X)HTML は下記のように、画像を順不同のリストで並べている。 <ul id="gallery"> <li><a href="#empty-anchor"><img src="01.png" /></a></li> <li><a href="#empty-anchor"><img src="02.png" /></a></li> <li>
IE7 と CSS ハックと条件付コメント - lucky bag
IE に適用させないための各種 CSS ハックは、IE7 で修正される事になりそう。 IEBlog : Call to action: The demise of CSS hacks and broken pages 修正しておいた方が良い一般的なハック IEBlog では下記のハックを使用しているウェブページは修正しといた方が良いよってな事を呼びかけている。 Child Hack ( body > #foo ) StarHtmlHack ( * html #foo ) The Owen Hack ( head:first-child+body #foo ) head + body Selector ( head + body #foo ) こういったハックを使わずに、IE 独自実装の Conditional Comments を使うことを推奨しているんだけれど、head 内に記述するのは
Lucky bag::blog: dt と dd を横並び
定義リスト dl 内の dt と dd を CSS を使って横並びさせる方法ってのはいくつかあるんだけど、最近どうも記憶力が低下してきた気がするんで、完全自分用メモとして記しておく。 多分オーソドックスな方法 とりあえず最もオーソドックスであろう方法。これ意外にもあるのかもしれないけど、多分今んとこ自分は知らない。（margin を使った方法は前にも記事にしたことがあるけど、一応今回も入れておく） dl_sample01.html float を使った方法 margin を使った方法 position を使った方法 <dl> <dt>foo</dt> <dd>bar</dd> <dt>foo</dt> <dd>bar</dd> </dl> ちなみに margin を使った方法での margin 値の算出方法は、dt と dd それぞれの line-height 値の半分を足し、それに dt
Lucky bag::blog
実践 Web Standards Design が電子書籍になりました 概要 拙著「実践 Web Standards Design」通称ホップ本の電子書籍版が改訂新版として10月3日に発売になりました。 公開日 2011-10-03T19:31:53+09:00 URI https://www.lucky-bag.com/archives/2011/10/wsd-epub.html カテゴリ Misc タグ Book CSS HTML XHTML NAVER Japanにジョインしました 概要 10月1日付けでネイバージャパン株式会社に入社してましたというご報告です。 公開日 2009-11-01T17:56:23+09:00 URI https://www.lucky-bag.com/archives/2009/11/joined-with-naver.html カテゴリ Misc タグ
Firefox で閲覧中の画面を簡単に画像に保存できる機能拡張 - lucky bag
blog.tokyoace4.com - Firefoxで表示画面をpngにするextention (2005年9月 5日 17:53) screen grab! こりゃ便利だ。 とてつもなく便利だ。感動した。... 続きを読む 脳無しの呟き - Screen grab! (Firefox Extension) (2005年9月 5日 20:10) 『Firefox で閲覧中の画面を簡単に画像に保存できる機能拡張』（Lucky bag::blog）で知ったのだが、これはスゴイ。仕事でサイトのスクリーンショッ... 続きを読む Happy Hour - 続：WEBキャプチャツール (2005年9月 5日 20:13) ちょーどタイムリーな記事はけーん。 Firefox で閲覧中の画面を簡単に画像に保存できる機能拡張 FireworksのExtensionにもあるそうです。 素... 続きを読
ID の名前によって IE は印刷時にスクリプトエラー - lucky bag
どうやら、IE の新しいバグが見つかった模様。 Eric's Archived Thoughts: When Printing Kills 事の発端は、A List Apart のアーティクル「Facts and Opinions About PDF Accessibility」を印刷しようとすると、“Object doesn’t support this property or method” というスクリプトエラーが表示される不具合があると。んで、調べてみたところ、(X)HTML コード内のID 名に Tags と付与していた部分が引っかかっていたらしい。な、なんだってー！っつうことで、試してみた。 deth_by_id_testpage.html IE 6 で印刷しようとしたら、下記のエラーメッセージが表示された。 なんのスクリプトも使ってないのにスクリプトエラーですってよ。もしかし
Lucky bag::blog: Re: CSSの謎
CSSの謎 CSS によるレイアウトで躓いたことを書かれていて、その中で下記の部分に注目してみた。 コンテンツの中に画像が入ったサンプル２をIEで見て下さい。ウインドを縮小していって画像の幅が入りきらなくなると・・・画像がメニューBOXの下の高さまで落ちてしまいます。 上記サイトでは float を使った 2 段組の可変レイアウトでの解決方法がまだ見つかっていないような感じだったので、ちょっとサンプルを作って解決方法を提示してみる。 サンプルを用意する メインコンテンツ部分が可変幅で、ナビゲーションが固定幅のレイアウトをサンプルとして用意した。構造としては下図のような感じで、ネガティブマージンを利用して左のメインコンテンツが可変幅、右のナビゲーションが固定幅を実現している。ちなみにやっつけで作ったんで、かなり粗があったりするっつうか、かなりテキトー。 メインコンテンツに画像がある際の IE
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
