図画・写真・コードリストなど、自己完結しているメイン・コンテンツから参照されるようなコンテンツを表します。figure要素の特徴figure要素は、単体でもコンテンツとして成り立つ自己完結型になりますので、参照用の別ページにあった場合でもメイン・コンテンツが成立する内容に使用しなければなりません。オプションでfigcaption要素を使いキャプションをつけることが可能です。figure要素のマークアップ(キャプション無し)キャプションが無い場合のサンプルソースを確認していきたいと思います。】<p>京都の三千院では、美しい紅葉が見られます。alt="三千院の本堂から見える美しい紅葉"/></figure><p>今年の紅葉は例年より色鮮やかとのことです。】<p>CSS3では、角丸を表現するプロパティが追加されました。</code></pre></figure><p>また、その他にもグラデーションやボックスシャドウなど多数のプロパティが追加されています。</p>上記2つは基本的なfigure要素のマークアップ方法です。figure要素の特徴を確認していきます。figure要素は無くてもコンテンツとして成り立たなければなりませんので、純粋にfigure要素を無くして考えてみてください。二つの例共に成り立つと思います。別ページにあった場合でもメインコンテンツを損なわないということなので、下記のようにテキストをa要素で囲みid属性をfigure要素につけ参照させてみます。href="#kouyou">美しい紅葉</a>が見られます。alt="三千院の本堂から見える美しい紅葉"/></figure><p>今年の紅葉は例年より色鮮やかとのことです。href="#kadomaru">角丸を表現するプロパティ</a>が追加されました。</code></pre></figure><p>また、その他にもグラデーションやボックスシャドウなど多数のプロパティが追加されています。</p>上記のように、a要素で参照先のfigure要素を指定することで、別ページにあった場合でも問題がないかを判断することができます。(※a要素は必須ではありません。確認するために仮でつけました。)figure要素のマークアップ(キャプションあり)キャプションをつける場合は(※)figcaption要素を使用します。※figcaption要素は、親のfigure要素のキャプションを表しfigure要素の最初もしくは最後の子要素として使用します。figure要素以外での使用はできないので注意が必要です。href="#kouyou">美しい紅葉</a>が見られます。<figcaption>三千院の紅葉</figcaption></figure><p>今年の紅葉は例年より色鮮やかとのことです。href="#kadomaru">角丸を表現するプロパティ</a>が追加されました。</code></pre></figure><p>また、その他にもグラデーションやボックスシャドウなど多数のプロパティが追加されています。</p>上記2つの例ではfigcaption要素の入れる位置が異なりますが、一番最初の子要素、もしくは一番最後の子要素ならばどちらでも問題はありません。figure要素のカテゴリーfigure要素はフロー・コンテンツに属していますが、セクショニング・ルートにも属しています。HTML5マークアップ時の基本≫で勉強したとうりセクショニング・ルートに属する要素はそのドキュメントのアウトラインには現れません。figure要素内でh系要素などを使用してもアウトラインに表示されません。href="#kouyou">美しい紅葉</a>が見られます。<figcaption>三千院の紅葉</figcaption></figure><p>今年の紅葉は例年より色鮮やかとのことです。</p>少し無理やりですが、figure要素内にh2要素を記述しました。figure要素はセクショニング・ルートに属しているので、このh2要素はドキュメントのアウトラインにはあらわれません。以上で、figure要素の勉強を終わろうと思いますが、figure要素は使うタイミングがなかなか難しそうですね。徹底解説HTML5マークアップガイドブックHTML5の新要素や基本的なマークアップ方法について丁寧に解説が書かれています。HTML5でサイトを構築する際やこのBlogの記事を書く時の参考にしています。他にもビジュアル系API編もcanvas要素の勉強用に持っています。してverが変わりました。同じ本を持っている場合は追加で買わなくても大丈夫だとおもいましたがなにがなくなって追加されたか興味がありましたので両方買って見ました。ブログを作成する際に参考にした本はこちらにまとめてあります。JAPANというサイトを作りました。このプロジェクトでは、日本各地の素晴らしい風景やイベントを動画で伝えていきたいと思ってます。トレーラーとして京都でのムービーをアップしましたのでよかったら見てください。※PCでご覧の方は是非4Kのフルスクリーンで見てください。ハヤシユタカ2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。詳しいプロフィールはこちら最近書いた記事2016/10/23まずはここから始めよう!作業効率を早めるPhotoshopとIllustratorのショートカットまとめ(ファイル操作・コピペ・ズーム関連)2016/07/19Instagram(インスタグラム)の基本的な運用やマーケティング、活用事例の勉強に参考にしたサイトや記事まとめました。WordPressカスタマイズFacebookページで2つのブログの更新情報をチェック「HTML5でサイトをつくろう」と「WEBデザインクリップ」の更新情報やWEB制作に役立つ情報を更新しています。System」の使い方をまとめました。System」に画像対応などしてレスポンシブWEBサイトをつくろう(カスタマイズ編)最新のエントリー2016/10/23まずはここから始めよう!作業効率を早めるPhotoshopとIllustratorのショートカットまとめ(ファイル操作・コピペ・ズーム関連)2016/07/19Instagram(インスタグラム)の基本的な運用やマーケティング、活用事例の勉強に参考にしたサイトや記事まとめました。勉強しながら調べたサイト情報やサンプルの作成。そのほかweb制作に役立つ情報を共有し、情報交換できるサイトになればうれしいです。