Robert’s talk Webページの制作で水平リストが必要な場合にはフローレイアウトを使って要素を配置していくということがある。しかし、水平フローにさらに可変の高さを持った要素が入っていたり、それを垂直方向に複数行展開するということになると、なかなか面倒なことになってくる。ブラウザの幅に対応したり、ブラウザごとにデザインを揃えるということになると、頭を抱えることになる。 Robert Nyman氏がそうした場合の代替方法のひとつにdisplay: inline-blockを使う方法があるとし、CSS display: inline-block: why it rocks, and why it sucks - Robert's talkにおいて簡潔な説明とサンプルコードおよびその欠点を紹介している。display: inline-blockは要素をブロックとして作成しつつ、インライン

クールなナビゲーションを実装したい。 そんなときにおすすめなのが、『30 Cutting Edge Examples Of CSS Navigation』。かっこいいCSSナビゲーション集です。 気になったのをいくつかご紹介しますね。 Pixlogix マウスオーバー時にツールチップが表示されるメニュー Thoughtbot 赤のグラデーションとラインの使い方がかっこいいThoughtbot Evan Eckard フォントサイズのコントラストが美しいEvan Eckard。カレント時の背景色も綺麗 Lonn Roth 上部のラインと連動した美しいメニュー Dragon Interactive アニメーションで切り替わるクールなメニュー 他にもいろいろあるので一度見てみてください。 30 Cutting Edge Examples Of CSS Navigation いろいろぱつぱつだけど

ちょっとしたトリックを使用して、テキストを画像の下に回り込ませないようにするスタイルシートをNO Margin No Errorから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <div class="content"> <img src="thumbnail.jpg" width="50" height="50" alt="Thumb!" /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ligula arcu, luctus nec elementum quis, condimentum a lectus. Suspendisse potenti. Proin neque diam, dictum ac elementum