
スキルアップ
2021.01.27
給料が高い仕事の特徴や年収を調査。高収入を目指す方法も紹介
「給料が高い仕事に就きたい」「今の給料に不満がある」など、給料についての願望や悩みは、多かれ少なかれ、持っている方も多いのではないかと思います。この記事では、給料が高い仕事の業界や特徴、年収を上げるための具体的な取り組み […]
ITコラム
2017.01.10
HTML5の新要素の1つにfigure要素があります。figure要素は、同じくHTML5の新要素であるfigcaption要素でキャプションを伴って、画像などをグループ化することができます。
今回は、このfigure要素の機能や書き方などを紹介します。
1.figure要素とは
2.figure要素で画像をグループ化
3.figure要素でソースコードをグループ化
4.figure要素でテキストをグループ化
5.figure要素でテーブルをグループ化
figure要素は、コンテンツをグループ化する要素です。
figure(フィギュア)という名前から考えると、画像や図形などimg要素をマークアップする要素のようなイメージを持つかもしれませんが、img要素だけでなく、ソースコード、リスト、テキストなど何に対してもグループ化する際に使用できる要素です。
それでは、他のグループ化要素であるp要素やdiv要素とfigure要素とは、何が違うのでしょうか。
figure要素の一番の特徴は、「figure要素でグループ化されたコンテンツは、本文から参照されるコンテンツとなる」ことです。
そのために、グループ化される内容は、独立した内容である必要があります。そのページのどこに置いても、他のページにあってもOKな内容のモノで、メインコンテンツから参照されるのに妥当な内容でなければfigure要素でグループ化するのに適しません。
メインコンテンツの一部で、他の場所に移したら無意味になるものなどをfigure要素の中に入れるのもNGです。
そして、figure要素の中に、figcaption要素を使って、画像やソースコード、リスト、テキストなどにキャプションや注釈を付けることができます。
figcaption要素でキャプションや注釈を付けることによって、本文から参照される内容をより明確に表すことができます。
figure要素で画像をグループ化してみます。
HTMLは下の通りです。
<figure> <figcaption>日本三景</figcaption> <img src="img/fig_1.jpg" width="250" height="150"> <img src="img/fig_2.jpg" width="250" height="150"> <img src="img/fig_3.jpg" width="250" height="150"> </figure>
写真を3つ並べてグループ化していますが、複数必要なわけではなく1つでもOKです。
また、キャプション<figcaption>は、写真の上部でなくても、写真の下に入れてもOKです。
ただし、<figcaption>は<figure>の中に1つだけしか入れられません。
<figure>でソースコードをまとめてみます。
この部分のCSSのソースコードは次CSSソースコード3のとおりです。
|
HTMLは下の通りです。
<p>この部分のCSSのソースコードは<a href="#03">CSSソースコード3</a>のとおりです。</p> <figure id="03"> <figcaption>CSSソースコード3</figcaption> <blockquote><code>figure {border: 1px solid #CCC; padding: 20px; margin:0.5em 0 0.5em;} figcaption {display:block; font-weight: bold;} article section p {margin: 2em 0px 0px; padding: 0px;}</code></blockquote> </figure>
ここでは<pre>と<code>によるコンテンツが、<figure>要素によってまとめられています。
<figure>の前の段落<p>で、この<figure>にリンクを設定しておきました(a href=”#03″)。これで、この<figure>が、他のどの場所にあっても参照できます。
<figure>でテキストをまとめてみます。
山のあなたの 空遠く
幸住むと 人のいふ
噫われひとと 尋めゆきて
涙さしぐみ かへりきぬ
山のあなたに なほ遠く
幸住むと 人のいふ山のあなた(カール・ブッセ)
HTMLは下の通りです。
<figure> <p> 山のあなたの 空遠く 幸住むと 人のいふ 噫われひとと 尋めゆきて 涙さしぐみ かへりきぬ 山のあなたに なほ遠く 幸住むと 人のいふ <figcaption>山のあなた(カール・ブッセ)</figcaption> </p> </figure>
ここでは<p>によってまとめられた詩を<figure>でまとめています。このサンプルは<p> ~ </p>による段落がひとつですが、<p> ~ </p>が複数あっても、それが詩などのひとまとまりのものであればOKです。そして、<figcaption>でそのタイトルを付けられます。
<figure>でテーブルをまとめてみます。
figure要素のまとめ
figure要素は画像以外にも、コードや表など色んな挿しコンテンツに使える キャプションが付かないものはfigure要素を無理に使わなくて良い figure要素を使う時は、それが文書に取ってどんな意味を持つのかを考えることが大事
HTMLは下の通りです。
<figure> <figcaption> figure要素のまとめ </figcaption> <table> <tr> <td>figure要素は画像以外にも、コードや表など色んな挿しコンテンツに使える</td> <td>キャプションが付かないものはfigure要素を無理に使わなくて良い</td> <td>figure要素を使う時は、それが文書に取ってどんな意味を持つのかを考えることが大事</td> </tr> </table> </figure>
スキルアップ
2021.01.27
「給料が高い仕事に就きたい」「今の給料に不満がある」など、給料についての願望や悩みは、多かれ少なかれ、持っている方も多いのではないかと思います。この記事では、給料が高い仕事の業界や特徴、年収を上げるための具体的な取り組み […]
スキルアップ
2021.01.25
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
スキルアップ
2021.01.25
この記事ではシステムエンジニア(SE)とプログラマ(PG)の違いをわかりやすく解説します。システム開発の流れを説明しながら具体的に携わる仕事内容や必要スキル、年収まで違いを比較していきますので、ぜひ参考にしてください。 […]
スキルアップ
2021.01.22
通勤せず、家で仕事ができたら理想的だと思いせんか?コロナ禍の今、在宅ワークに注目が集まっています。パソコンとインターネット回線があればどこでもできる仕事が増え、完全在宅を前提とした求人も多く目にするようになりました。ここ […]
スキルアップ
2021.01.22
大学生のうちにプログラミングスキルを身につけておくべきか悩んでいる方、エンジニアとして働くことに興味がある方はぜひご覧ください! 大学生でプログラミングを習得するメリット、おすすめのプログラミング言語&学習法、失敗しない […]
スキルアップ
2021.01.22
本記事では、給料やお金をもらいながらでもプログラミングを学べる方法や、未経験からでもエンジニアへの転職が可能な理由について紹介します。プログラミングスキルが未経験者の就職や転職において有利となる理由も解説。これからプログ […]
INTERNOUS,inc. All rights reserved.