JavaScriptを使わずにPinterest風レイアウトにする
昨日はJavaScriptを使ってPinterest風レイアウトを実現するスクリプトを紹介しましたが、今日はJavaScript無しでスタイルシートで実現するテクニックを紹介します。 デモページ：幅900pxで表示 実装 HTML HTMLは非常にシンプルで、各パネルをdiv要素で実装し、それらをdiv要素で二重に内包します。 <div id="wrapper"> <div id="columns"> <div class="pin"> <img src="image.png" /> <p>テキスト</p> </div> <div class="pin"> <img src="image.png" /> <p>テキスト</p> </div> ... ... </div> </div> CSS Pinterest風レイアウトをCSSで実現するには、二つの方法が考えられます。 一つ目はfloa
画像のリサイズを処理する（IE6に対応させて、しかもハイクオリティ） - くらげだらけ
よくあるCSSの使い方ですが、画像をサムネイル表示するときにJSとかPHPとか書くのがウザイのでCSSでやるパターンのやつのメモです。 要は、CSSで画像のWidthとHeightを制御してやるわけですが、 今回はデカイ画像をサムネイル表示させるので、max-widthとmax-heightで制御してやります。 こんな感じ <style type="text/css"> .image-resize { max-width: 200px; max-height: 200px; } </style> <img src="images/test-image.jpg" class="image-resize" />これで、200pxより大きければ、200pxにしてくれる。もちろん比率はそのまま。 しかし、IE6ではmax-widthとmax-heightに対応していないので、だいぶ前に書いたエント
CSS - Clearing floats
A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way. The problem Let's try it. This is the CSS we'll use throughout the page: div.container { border: 1px s
Webベースですぐにデザインを反映できるCSSエディタ:phpspot開発日誌
Web-based CSS Editor Tamkey It is a very strong web tool for weblog owner. "Tamkey CSS Editor" can modify your current stylesheet and easily change it what you want. Styles will be updated with a single click and you can verify it at the same time. You can also find the CMS/BLOG special selector with "Red Mark". The current selector will be in a red box while you press the "Red Mark" button. Tamke
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
blueprintcss - Google Code
HTML・スタイルシート（CSS）の基礎 [ホームページ作成] All About
ADP: floatレイアウトでつまづかないためのTips
サービス終了のお知らせ
QrONE CSS Designer
http://www.styletype.jp/2004/10/post_2.html