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

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

ただいまの
回答率

89.55%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 3,283
退会済みユーザー

退会済みユーザー

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でよいのでしょうか? 矛盾しているようにも取れますが、現場ではここまで気にする必要はないでしょうか?

それとも、そのようにデザインをしない、ポートフォリオへのリンクをつけて、画像がなくてもどれだよと突っ込みが入らないように設計しないのが悪いと、 現場では考えるでしょうか?

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

前の質問で

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

と書かれているように、 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>

上記のHTMLから

<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>

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

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

 参照されているかどうか

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

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/12/27 16:08

    つまり

    ・HTML5の言う自己完結とは、すべてのタグで同じ意味である。

    ・自己完結は「外側がなくても良い」という意味です。RSSリーダーで配信できる。
    それだけをいきなり見せられてもなんだかわかる。

    ・その意味は、そのタグを取り除いても、外側の文が成り立ち、かつ取り除いたタグを他のページに移動しても、移動先で意味が成り立つという意味ではない。


    ということでよろしいでしょうか?

    キャンセル

  • 2015/12/27 17:36

    はい、それで間違いございません。

    キャンセル

  • 2015/12/27 18:23

    それですと、ポートフォリオのaboutmeにある自分の画像は、自己完結していて、figureタグで囲むべきなのですかね?

    その画像だけ見せられると、人の画像とはわかりますが、この人誰となりますね。
    これは、それだけを見てわかったというべきなのでしょうか?

    HTMLが言う自己完結している、それだけ見せられてわかるという事は、ポートフォリオの原作者の画像と完璧にわかる場合のみということでよろしいでしょうか?

    人の画像とわかるだけでは自己完結しているとはいえないのでしょうか?
    それともそこまで現場では気にしないで、それぞれの感覚でなんとなくfigureを使ったり使わなかったりしているのでしょうか?

    キャンセル

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

  • ただいまの回答率 89.55%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる