快い図のキャプション
画像に続けて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要素には
引用元のマークアップ
引用で引用元について明らかにすることは大切です。blockquote要素にはそのための属性としてciteが用意されていますが、ほとんど飾りのようなもので、効果的にその情報を表示することは出来ません。じゃどうすれば良いのかというような話です。 figcaption要素で引用元の情報をマークアップし、blockquote要素と共にfigure要素で括るというのがどうやら王道なようです。 <figure> <blockquote cite="http://example.com/"> <p>Lorem ipsum dolor sit amet.</p> </blockquote> <figcaption> <p><cite><a href="http://example.com/">Example Website</a></cite></p> </figcaption> </figure> bl
『figure要素』 / HTML5新要素一覧 | HTML5でサイトをつくろう
figure要素 図画・写真・コードリストなど、自己完結しているメイン・コンテンツから参照されるようなコンテンツを表します。 figure要素の特徴 figure要素は、単体でもコンテンツとして成り立つ自己完結型になりますので、参照用の別ページにあった場合でもメイン・コンテンツが成立する内容に使用しなければなりません。また、オプションでfigcaption要素を使いキャプションをつけることが可能です。 figure要素のマークアップ(キャプション無し) キャプションが無い場合のサンプルソースを確認していきたいと思います。 【画像を使用した場合の例 】 <p>京都の三千院では、美しい紅葉が見られます。</p> <figure> <img src="kouyou.jpg" alt="三千院の本堂から見える美しい紅葉"/> </figure> <p>今年の紅葉は例年より色鮮やかとのことです。</
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
