Lucky bag::blog: IE で min-width を指定する方法
IE は min-width に対応していないんだけど、「Stu Nicholls | The CSS Playground」でスクリプトを使わず CSS だけで擬似的に min-width を指定する方法が紹介されていたんで、ざっくりとご紹介。この方法は、Win IE のみに効く方法で、Mac IE では機能しない模様。サンプルとして下記の (X)HTML を使用してみる。 <div class="container"> <div class="box"> <div class="contents"> 内容 </div> </div> </div> これに対して、幅 90% で最小幅 400px の指定をしてみる。IE5.5 と IE6 に対応したパターンと IE5.01 と IE5.5 と IE6 に対応したパターンの２種類の方法がある。 実際に試してみたサンプル IE5.5 と IE
フッタを常に下部に配置 - lucky bag
コンテンツの内容が少なくても、常に下部にフッタを配置させるための方法。ちなみに Safari とマック IE では動作しないっぽい。 footerサンプル 実際にサンプルを見てみれば分かりますが、ウィンドウを下方に広げても、フッタは常に下部に張り付いたままな筈です。また、ウィンドウを上部に縮めていってもコンテンツ部分の所でピタッと止まり、それ以上は移動しません。 html と body への指定 サンプルのソースを大雑把に分けると下記のような構造になっています。 <div id="container"> <div id="contents"> <div id="header">ヘッダ</div> 内容 </div> <div id="footer">フッタ</div> </div> まず、html と body の高さを 100% と指定しておきます。 container への指定 次に、
ブラウザ上でワイヤーフレームが作れる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
グリッドレイアウトのための背景画像 - lucky bag
ウェブページをグリッドレイアウトするのであれば、あらかじめ CSS で背景画像にルーラーみたいな画像を指定しておけば制作時に便利じゃね？ってアイデア。 Subtraction: Grid Computing… and Design Airbag - Ruler. Using a Background Image Grid to Lay Out Your Web Site | Smiley Cat Web Design つうことで、自分が使いやすいと思う方眼画像をちゃちゃっと作ってみた。 gif画像（ご自由にどうぞ） grid.gif (GIF 画像, 200x200 px) 実際に適用してみたサンプル グリッドレイアウトのための背景画像のサンプル ルーラーの最小単位は 5px で、それより若干濃い線が 10px 、さらに濃い線が 50px、んでもって薄いグレーの背景が 100px 単位って
カラー関連の情報を CSS 内に記述 - lucky bag
CSS ファイル内に Color Glossary を記述しておくってのは、複数人で CSS を管理する際はもちろん、自分にとっても明快なんで、とても良いアイデアだと思う。 Garrett Dimon / CSS Maintenance Tip: Use a Color Glossary Glossary をもとに CSS ファイル内を検索・置換で色の変更なんかも簡単にできるし、メンテナンス性が高まるのは言うまでもない。こういった記述は、自分（またはグループ）が分かりやすいように関連づけて明記しておくのが良いと思う。例えば、ヘッダの色とか、見出しの色とかのパーツ単位でも構わないんじゃないかと。 んでもって、ウチの場合はちょっと拡張して、CSS 内に下記のようにカラーネーム、Hex 値と RGB 値の記述をしている。 /*================ColorScheme========
CSS で垂直センター配置
table で、テキストをセル内の縦のセンターに配置する時は vertical-align: middle; で簡単にできるのですが、例えば、ナビゲーションで 3em の高さのメニューがあったとして、CSS で文字をボックス内の縦のセンターに配置しようして vertical-align: middle; を指定しても実現出来ません。vertical-align の適用対象は、行内レベル要素及び'table-cell'要素だからです。 #menu li { display: block; width: 8em; height: 3em; float:left; list-style-type: none; text-align: center; background-color: #eeeeee; border: 1px solid #ccc; vertical-align: middle;
追記のマークアップ - lucky bag
一度公開した記事に対して後から追記した事を明示するための ins 要素と、後から削除した事を明示するための del 要素がある。これらはちょっと特殊で、マークアップの仕方によってインライン要素になったりブロック要素になったりして、例えば p 要素の外側に記述すればブロック要素、内側に記述すればインライン要素になる。 んで、当サイトでは del （削除）と ins （挿入）のセットではなくて単純に追記だけの場合、ins 要素をブロック要素としてマークアップしていて、「追記」という文字と datetime 属性（修正時刻）の内容を CSS の before 疑似要素と content プロパティで生成している。（CSS コードは「contentプロパティの文字化け」を参照） これ思ったんだけど、「追記」という文字を生成しちゃってるのってあんまよろしくないのかなぁと。もちろん、 IE が bef
Lucky bag::blog: CSS を作成する際のお約束
CSS を作成している際に、当然の如くブラウザによって描画結果に違いが出てくるわけで、ムキーとか言いながらその差異を埋めていく作業が一番面倒っちゃあ面倒。んで、ボックスモデルやその他ブラウザごとのバグ以外で、極力そう言った差異を少なくするためには、一番最初に全称セレクタを使ってブラウザのデフォルトスタイルを消してしまうのが手っ取り早い。 * { margin: 0; padding: 0; font-style: normal; font-weight: normal; } ここらへんは基本だと思ってたんだけど、未だにこれをやっていなくて、あのブラウザとこのブラウザで見た目が違うんですけどってのは結構いたりする。上記に text-decoration: none; や font-size: 100%; なんかを加えても良いかも知れないけど、最低限マージンとパディングは無くしておくことをお薦
Lucky bag::blog: Firefox で開いているタブを Expos
ここ最近のマックの UI では Exposé が最強って思ってるんだけど、その機能を Firefox のタブで再現できる foXpose がいい感じ。 ネットで何か調べもんをしていると、Firefox のタブを余裕で 10 個以上開くなんて事がある。タブが増えればそれだけタブ幅が狭くなってくるわけで、そうなってくると当然ページタイトルが判別できなくなって、どれがどれか分かんなくなってくる。そんな時 foXpose をインストールしてれば、ステータスバーにある foXpose ボタンで今開いている全てのページをサムネール化、目的のページを選択っつうまさに Exposé な機能。スバラシス！ Ctrl（command) + Shift + X のショートカットも用意されているんだけど、Web Developer Extension 入れてると「ページの縮小」とバッティングしちゃうんで、Web
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>
フォトショップのチュートリアルサイト - lucky bag
フォトショップ持ってるんだけど、イケてるっぽいウェブ用素材の作り方が分からないとか、フィルターを使った加工方法が分からないって人は何下に多いのかもしれない。かと言って、教則本は値段もそれなりにするし、必要としないチュートリアルも載ってるんで、なんだかなぁって思っている人は Tutorial Select.com を一回覗いてみると良いかもしれない。 無料のチュートリアル このサイトではフォトショップだけでなく PHP や Flash などのチュートリアルを様々な人たちが投稿してくれているんだけど、一番多いのはフォトショップ関連。もちろん海外サイトなんで解説は英語なんだけど、画像付きで解説しているんで英語分かんなくてもなんとかなっちゃう。多分。恐らく。もしかしたら。 とりあえず、上部メニューから「Top viewed tutorials」へ行くと、閲覧されている数が多い順にソートしてあったり
iTunes ミュージックビデオをダウンロードする方法
iTunes ミュージックストア上のミュージックビデオをローカルに落とす方法ってのを試してみた。 How-To: Download music videos from iTunes ミュージックストアの左メニューに『ミュージックビデオ』メニューがあるんだけど、日本のミュージックストアにはまだまだビデオが揃ってない。一方、米国の方とかだと今日現在で 596 本あったりするんで、そっちで試してみた。 ミュージックストアの左メニューから『Music Videos』を選択する。 登録されているビデオがサムネールで表示されるんで、落としたいビデオを選択する。 small もしくは Large 上で右クリック -> "iTunes ミュージックストア URL をコピー" 「.:UNEASYsilence:. - iTunes Music Videos」へアクセスし、URL をペーストして "submi
訪問済みリンクを一工夫する - lucky bag
リンクの色によって、訪問済みなのか否かの判別を出来るようにするってのは、ユーザビリティ的には必要なことだとは思う。そう言った意味では、拙サイトなんかは全くもって許し難い設計な訳だけど、まぁそれは置いておく。んでもって、ただ色を変えるだけではなく、画像を使ってもうちっと視覚的に分かりやすくするのもありなんじゃないのかなぁって思ってみた。そして、サンプルを作ってみた。 visited_link_sample.html サンプル内のリンクが既に訪問済みであれば画像がチェックマークに変わるはず。CSS は下記のような感じで、a 要素に対してそれぞれ a:link、a:hover、a:visited で一つの背景画像の位置を変えることで見せ方を変えている。 li a { padding-left: 25px; line-height:180%; background:URL(mark.png) no
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Lucky bag::blog: Appendix
リンクに関する疑似クラスの記述順 - lucky bag