[B! webdesign] cs508のブックマーク

[CSS]サイズがばらばらで無指定の画像を一定サイズで表示するスタイルシート

画像を大量に配置するECサイトなどに便利そうな、スタイルシートのテクニックをCSSplayから紹介します。 CSS play - F.a.S.T - Fit and Shrink Technique デモサイズはばらばらで、しかもサイズの指定をおこなっていない画像を一定の幅と高さのボックスにアスペクト比を維持したまま真ん中に表示します。上記のキャプチャはスケールを変えているので、ぜひ元サイトのデモをご確認ください。対応ブラウザはIE7/8, Fx, Op, Safari(PC), Chromeなど主要なブラウザのほとんどで動作します。 IE6では画像の元サイズで表示されてしまい、しかもボックスの真ん中には表示されない、とのことです。

cs508 2010/04/15

リンク

やってしまいがちなユーザビリティのミスとその解決方法

ユーザビリティでやってしまいがちなミスや見落とされがちな10の罪とその解決方法をLINE25から紹介します。 10 Usability Crimes You Really Shouldn't Commit 下記は、やってしまいがちなユーザビリティの10のミスとその解決方法を意訳したものです。はじめに 1. ラベルがないフォーム 2. トップページにリンクしないロゴ 3. 訪問済みリンクの指定がない 4. アクティブなフィールドが明示されない 5. altの記述がない画像 6. 背景色がない背景画像 7. 長い長いテキスト 8. 下線付きだがリンクではない 9. ココをクリック 10. 均等割付「justified」の使用はじめにここで紹介している10のユーザビリティのポイントは、ありがちなミスだったり見落とされがちなものを集めました。あなたのウェブサイトのユーザビリティを拡張する手

cs508 2009/12/03

リンク

【CSSについて】 firefoxで上下のpaddingが効かない(IE6では効く)です、、原因教えて下さい。…

【CSSについて】 firefoxで上下のpaddingが効かない(IE6では効く)です、、原因教えて下さい。ソースは以下です。 <div class="contents"> <img src="#"> <div class="leftbox"> <ul> <li>AAAA</li> <li>BBBB</li> </ul> </div> <div class="rightbox"> <ul> <li>AAAA</li> <li>BBBB</li> </ul> </div> </div> .contents { margin: 0; padding: 10px 0 15px 0; width: 665px; } .leftbox { margin: 0; padding: 0; text-align: left; width: 332px; float: left; } .rightbox

cs508 2009/11/19

リンク

css-lecture.com

cs508 2009/11/19

リンク

[CSS]スタイルシートの実用的なテクニック集：エレメント・CSS3・Tips編

先日紹介した「レイアウト・ナビゲーション・画像・タイポグラフィ・アイコン・ボタン・リンク編」の続編となる、リスト・カレンダー・表・フォームなどのエレメントの実装や進歩したスタイルシートのテクニック集をSmashing Magazineから紹介します。

cs508 2009/08/27

リンク

一つの要素で、テーブルレイアウトのように列を揃える

的確なタイトルが浮かばなかったんですが、一つの要素、例えばリストなどで常に日付が先頭に表示され、その後タイトルが続く場合や、リストのマークとは意味合いが違う場合などに複数行になった場合、日付の下にタイトルが来て欲しくない、列を揃えてくれと言ったことが有ると思います。うまく説明できないので、実際の感じだと下記のような。 ※ ああああああああああああああああああああああああ ※ ああああああああああああああああああああああああいいいいいいいいいいいいいいいいいいいいいいいいいいいいい ※ ああああああああああああああああああああああああいいいいいいいいいいいいいいいいいいいいいいいいいいいいい ※ あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああいいいいいいいいいいいいいいいいいいいいいいいいいいいいい ↑こん