質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

4935閲覧

figureタグを使うべきかが、難しいのですが、下記の認識でよいでしょうか?

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

1グッド

1クリップ

投稿2015/12/13 11:49

figureタグを使うべきかが、難しいのですが、下記の認識でよいでしょうか?

https://teratail.com/questions/17680
の続き

figureタグとは
文章に組み入れられない(ドキュメントのメインのフローから単独のユニットとして参照されるものとなります。)
画像, 動画, コンピュータ言語のコード, 詩歌(仕様草案の例にある), 或いはアスキィアートなどが<figure>要素とされる。

また、注釈となる<figcaption>要素は必須で無いため、
注釈を伴わない挿絵, 図表, 写真, 動画, コンピュータ言語のコード, 或いはアスキィアートなどにも用いる事が可能です。

つまり、これが無くても文章が通じなくなる恐れがない場合は、自己完結しているのでfigureを使う。
例えば、ポートフォリオの自分の画像はなくても、文章が通じるので、この場合の画像は自己完結している。
逆に、下記がポートフォリオ一覧ですという文章の下にポートフォリオの画像が有る場合、ポートフォリオの画像がないと、文書の下にポートフォリオがないじゃないかとなってしまうので、自己完結しておらず、ポートフォリオの画像はただのimgのみになる。

*HTMLのimgやソースなどfigureで囲む可能性のあるソースを削除して、ブラウザ上で見て、何も違和感を感じなければ自己完結している。
違和感があれば自己完結していないので、figureでは無い。

例一覧
・自己完結しているのでfigure。

サイトの例

私はこんなスキルがある。こんな事を考えたサイトを作っている。
(自分の画像)

・自己完結しているのでfigure。この場合、DOMでのgetElementById()メソッドのJAVAスクリプトでの使い方を例として出しているだけですので、これが無くても文章が通じなくなる恐れはないので自己完結している。

サイトの例

<section> <h2>getElementById()メソッドの実装状況</h2> <figure class="code"> <figcaption>JAVAスクリプトでの例</figcaption> <pre class="JAVAScript"><code>function showOrHide(e) {</code> <code>var ele=<mark>document.getElementById(e)</mark>;</code> <code>var d=(ele.style.display || 'block').toLowerCase();</code> <code>if (d!='none') ele.style.display='none';</code> <code>else ele.style.display='block';</code> <code>}</code></pre> </figure> <p>getElementById()メソッドは、いくつかの言語に実装されております。</p> <p>主に、JAVAスクリプト, VBスクリプト, JAVAなどに実装されております。</p> </secton>

下記のようにしても、おかしい文章と思わないので、自己完結している。

<section> <h2>getElementById()メソッドの実装状況</h2> <p>getElementById()メソッドは、いくつかの言語に実装されております。</p> <p>主に、JAVAスクリプト, VBスクリプト, JAVAなどに実装されております。</p> </secton>

・自己完結しているのでfigure。

サイトの例

スクリプトタグは、内容物がなくても、終了タグが必須。


(ソースコード)

<script></script>=○ <script>のみ=× (ソースコード) 例を消しても、問題は起こらない。 ・自己完結していないのでfigureでない。例を消すと、上記ソースって何?ないじゃんとなるから。 サイトの例 (ソースコード) <script></script>=○ <script>のみ=× (ソースコード) 上記ソースをみてわかるように、スクリプトタグは、内容物がなくても、終了タグが必須。 ・自己完結していないのでfigureではくimgのみ。 サイトの例 私はこんなスキルがある。私はいつもおしゃれで、下記の画像のように、おしゃれなカッコをしている。 (自分の画像) サイトの例 ・自己完結していないのでfigureではくimgのみ。 私はこんなスキルがある。私は下記のようなイメージの人間です。 (自分の画像) *下記の場合はどう思いますか? サイトの例 ```ここに言語を入力 <section class="main__about-me"> <h2 class="content-wrap-widthmax__heading main__common-heading">GALLARY</h2> <h3>題名</h3> <p>和風の高級感を表現するをコンセプトに作ったサンプルサイトです。</p> <figure class="portfolio-images-common"> <img class="aa-pcimage" src="img/index/aa-pcimage.jpg" alt="PCサイズの画像"> <figcaption>PCサイズ</figcaption> </figure> <figure class="portfolio-images-common"> <img class="aa-tabletimage" src="img/index/aa-tabletimage.png" alt="タブレットサイズサイズのファーストビューの画像"> <figcaption>タブレットサイズ</figcaption> </figure> </section><!-- /#about --> ``` ↓ 下記のようにすると、どれだよと突っ込みが入りそうな気がします。つまり自己完結していないのではないでしょうか? ```ここに言語を入力 <section class="main__about-me"> <h2 class="content-wrap-widthmax__heading main__common-heading">GALLARY</h2> <h3>題名</h3> <p>和風の高級感を表現するをコンセプトに作ったサンプルサイトです。</p> </section><!-- /#about --> ``` ただ画像の説明のfigcaptionがあるので、それでもfigureでよいのでしょうか? 矛盾しているようにも取れますが、現場ではここまで気にする必要はないでしょうか? それとも、そのようにデザインをしない、ポートフォリオへのリンクをつけて、画像がなくてもどれだよと突っ込みが入らないように設計しないのが悪いと、 現場では考えるでしょうか?
hirai0110👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

figure要素を勘違いされていると思います。

前の質問で

自己完結している。
なおかつ文章から参照される性質のものであること。

と書かれているように、 figureタグで囲まれた要素自身は独立している必要がありますが、その外側の文章は、figure要素を参照していなくてはなりません。

文章から figure要素を取り除いて成り立つのであれば、それは「文章から参照される性質のもの」を満たしていません。


追記

自己完結しているとは何か

lang

1<section> 2 <h2>getElementById()メソッドの実装状況</h2> 3 <figure class="code"> 4 <figcaption>JAVAスクリプトでの例</figcaption> 5 <pre class="JAVAScript"><code>function showOrHide(e) {</code> 6<code>var ele=<mark>document.getElementById(e)</mark>;</code> 7<code>var d=(ele.style.display || 'block').toLowerCase();</code> 8<code>if (d!='none') ele.style.display='none';</code> 9<code>else ele.style.display='block';</code> 10<code>}</code></pre> 11 </figure> 12 <p>getElementById()メソッドは、いくつかの言語に実装されております。</p> 13 <p>主に、JAVAスクリプト, VBスクリプト, JAVAなどに実装されております。</p> 14</secton>

上記のHTMLから

lang

1<figure class="code"> 2 <figcaption>JAVAスクリプトでの例</figcaption> 3 <pre class="JAVAScript"><code>function showOrHide(e) {</code> 4<code>var ele=<mark>document.getElementById(e)</mark>;</code> 5<code>var d=(ele.style.display || 'block').toLowerCase();</code> 6<code>if (d!='none') ele.style.display='none';</code> 7<code>else ele.style.display='block';</code> 8<code>}</code></pre> 9</figure>

の部分だけ取り出して成り立つかどうかが、自己完結しているかどうかです。

(すいません、Googleの例は取り除きました)

参照されているかどうか

lang

1<section> 2 <h2>getElementById()メソッドの実装状況</h2> 3 <p>getElementById()メソッドは、いくつかの言語に実装されております。</p> 4 <p>主に、JAVAスクリプト, VBスクリプト, JAVAなどに実装されております。</p> 5</secton>

で成り立ってしまうなら、参照していません。例えば

lang

1<p>JAVAスクリプトでの例で示すように、getElementById()メソッドは、いくつかの言語に実装されております。</p>

とあれば、参照していると言えるでしょう。

投稿2015/12/14 02:03

編集2015/12/14 07:57
hello-world

総合スコア1342

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2015/12/14 07:07

お返事ありがとうございます。 >>> と書かれているように、 figureタグで囲まれた要素自身は独立している必要がありますが、その外側の文章は、figure要素を参照していなくてはなりません。 確かにそうですね。忘れていました。ありがとうございます。 つまり、figureタグで囲まれた要素自身は独立している必要があるという部分は、 その画像を削除しても、文章が通じなくなる恐れがないということですね。 独立しているサイトの例 <section> <h2>getElementById()メソッドの実装状況</h2> <figure class="code"> <figcaption>JAVAスクリプトでの例</figcaption> <pre class="JAVAScript"><code>function showOrHide(e) {</code> <code>var ele=<mark>document.getElementById(e)</mark>;</code> <code>var d=(ele.style.display || 'block').toLowerCase();</code> <code>if (d!='none') ele.style.display='none';</code> <code>else ele.style.display='block';</code> <code>}</code></pre> </figure> <p>getElementById()メソッドは、いくつかの言語に実装されております。</p> <p>主に、JAVAスクリプト, VBスクリプト, JAVAなどに実装されております。</p> </secton> 下記のようにしても、おかしい文章と思わないので、自己完結している。 ↓ <section> <h2>getElementById()メソッドの実装状況</h2> <p>getElementById()メソッドは、いくつかの言語に実装されております。</p> <p>主に、JAVAスクリプト, VBスクリプト, JAVAなどに実装されております。</p> </secton> ・figure要素を参照という部分が抽象的でよくわからないのですが、 上記例なら、参照しているのでしょうか?
退会済みユーザー

退会済みユーザー

2015/12/23 09:52

忙しく、お返事が遅れて大変恐縮です。 下記二つの場合のみフィギュアタグを使う。ということですね。 ・フィグキャプションがある。 ・自己完結していて、本文から参照される画像など >> 文章から figure要素を取り除いて成り立つのであれば、それは「文章から参照される性質のもの」を満たしていません。 上記が気になるのですが、自己完結しているという事は、その画像などは、そのページからはずしても、そのページの内容は問題なく伝わり、かつ、その画像などは、ほかのページにいきなり張り付いていても、その画像などが何なのかわかるということだと聞いております。 つまり、上記のお話ですと(文章から figure要素を取り除いて成り立つのであれば、)自己完結しているとなるのではないですか? 自己完結しているので、(文章から figure要素を取り除いて成り立つのであれば、)figureになるように思えます。
hello-world

2015/12/23 11:05

figureタグが求めている自己完結は、 間違い: figureタグを取り除いても、外側の文が成り立つ 正解: figure要素の部分だけを取り出しても(つまりfigureの外側を削除しても)意味が通じる です。 ちなみに「取り除いてもOK」つまり本文と関係性の薄い部分は aside タグを使ってください。
退会済みユーザー

退会済みユーザー

2015/12/26 16:00

お返事ありがとうございます。 HTML5の言う自己完結とは、すべてのタグで同じ意味であり、 その意味は、そのタグを取り除いても、外側の文が成り立ち、かつ取り除いたタグを他のページに移動しても、移動先で意味が成り立つと聞いているのですが、 そうではないのでしょうか? figureタグだけが、例外ということでしょうか?それとも上記の認識が、articleなどを含むその他自己完結したタグ全般に言えることなのでしょうか? 下記を見ると、そう思えます。 >> ちなみに「取り除いてもOK」つまり本文と関係性の薄い部分は aside タグを使ってください。 RSSリーダーで配信できるかとも言われますが、これは 正解: figure要素の部分だけを取り出しても(つまりfigureの外側を削除しても)意味が通じる と一致すると思います。
hello-world

2015/12/26 23:16

HTMLの話ではなくて自己完結という用語の話です。 例えば「日本の食料事情は国内で自己完結している」という意味は、外国の食料の輸入がなくなっても大丈夫という意味であり、日本国内から食料生産がなくなっても大丈夫という意味ではありません。 自己完結は「外側がなくても良い」という意味です。
退会済みユーザー

退会済みユーザー

2015/12/27 07:08

つまり ・HTML5の言う自己完結とは、すべてのタグで同じ意味である。 ・自己完結は「外側がなくても良い」という意味です。RSSリーダーで配信できる。 それだけをいきなり見せられてもなんだかわかる。 ・その意味は、そのタグを取り除いても、外側の文が成り立ち、かつ取り除いたタグを他のページに移動しても、移動先で意味が成り立つという意味ではない。 ということでよろしいでしょうか?
hello-world

2015/12/27 08:36

はい、それで間違いございません。
退会済みユーザー

退会済みユーザー

2015/12/27 09:23

それですと、ポートフォリオのaboutmeにある自分の画像は、自己完結していて、figureタグで囲むべきなのですかね? その画像だけ見せられると、人の画像とはわかりますが、この人誰となりますね。 これは、それだけを見てわかったというべきなのでしょうか? HTMLが言う自己完結している、それだけ見せられてわかるという事は、ポートフォリオの原作者の画像と完璧にわかる場合のみということでよろしいでしょうか? 人の画像とわかるだけでは自己完結しているとはいえないのでしょうか? それともそこまで現場では気にしないで、それぞれの感覚でなんとなくfigureを使ったり使わなかったりしているのでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問