フロートした要素に続くリスト
通常フロートした要素とデフォルトの文書フローで配置された要素は重なります。CSS 2.1仕様書のフロートの解説にある図Dがその例です。なので、通常フロートした要素に続くリストはそのブレット(や数字等)がフロートした要素の下に隠れてしまいます。この挙動には結構困らされることが多いですが、実はoverflow: autoとすると簡単に回避できます。 Demo: ul after floated element デモのようにリストにoverflow: autoするだけで、キレイにリストが配置されるようになります。overflow: autoを使った場合と使わなかった場合でどう重なりに違いが出るかわかるように、outlineプロパティーでピンクの線を引いておきました。 これはブラウザの挙動がたまたまそうなったということではなく、実にさり気なくCSS 2.1仕様書にも記述があります。 The bor
link要素をhead要素外で使う
定期的にLiving Standardを読むことを趣味にしている人は多いと思います。僕もその一人なんですが、どうやら最近flow contentに属するものに変更が加わったらしくlinkやmeta要素が入っています。itemprop属性があれば……という注意書き付きなので、Microdataでの使用を考慮しての追加のようです。というわけでタイトルのようなことが条件付きで可能になりました。わーい。 例えばこれでブログのエントリー個別のページなどで自身へのリンクを張ることに耐えられない人が幸せになれそうです。 <article itemprop="blogPosts" itemscope itemtype="http://schema.org/blogPosting"> <link itemprop="url" href="/blog/example-post"> <h1 itemprop="
快い図のキャプション
画像に続けてfigcaptionをそのまま普通に表示するといまいちなことが多いです。それでも英語ならイタリック体にするとかでなんとなくその文字列がfigure要素に係っているものだということが表現できるような気がしますが、日本語の斜体はいろいろアレなので使いたくないです(よね！)。そこで画像にキャプションを綺麗に重ねる方法を模索してみました。 Demo: Smooth Caption まずは画像のHTMLです。 <figure> <a href="http://example.com/"> <img src="http://example.com/images/logo.png"> </a> <figcaption>Example.com's Logo</figcaption> </figure> このHTMLに対してどんなサイズの画像にも対応できるようにCSSを書いていきます。a要素には
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
