Q&A
ありがとうございます。
下記のようにかなり緩い事が書いてありますが、プロのお仕事として、こんな認識で良いのですかね？
単にキャプションをつけたい！と思ったらこれで囲ってfigcaption使えよ、という解釈でどうやら良さそうです。挿絵と言うより挿しコンテンツって感じですね。
HTML5でフィギュアタグを使うべきか、ただのimgで良いかをどう区別していますか？
・フィギュアの場合
自己完結している。
なおかつ文章から参照される性質のものであること。
・フィギュアでない。
自己完結していない。
ないしは文章と関連が無い画像。
つまりその画像が無いと本分の意味が通らないなら、img、無くても意味がわかるなら自己完結した画像なのでフィギュアでしょうか？
ポートフォリオサイトの自分のポートフォリオの画像や自分自身の画像などは、文章から参照される性質に該当するとは思うのですが、自己完結しているかはっきり分かりません？
上記のような場合はフィギュアを使いますでしょうか？
それともそこまでセマンティックにこだわる必要はないのでしょうか？
回答2件
0
私もHTML5を学習中の身です。以下は完全に私見であり、一切の正確性を保証いたしません。
まず初めにPortfolioサイトにてfigureタグをimgと併用すべきかという質問でよろしいでしょうか。
色々とサイトによって意見が割れていますが今回の例では私は以下を使用の判断基準にできると考えます。
・本文に関係あるか(Portfolioサイトのギャラリーページなら関係あるでしょう)
・他のページにてその要素は有効か？本文に影響を与えないか
(つまり自己完結しているか。この場合ギャラリー以外に作品があったとしてそれが問題となるかどうか。
作品という意味で完結していると解釈できると思いますが……影響を与えないかというと微妙)
究極的には解釈によって変わってくると思うのですが(回答率が低い理由かと)私としては使用してもそこまで問題はないのではないかと思います。
(私が使用するかと言われるとかなり微妙なところですが……)
迷うくらいなら旧来の指定方法でも問題ないとも思います。
(imgタグにtitleでキャプションを指定し、見出しタグで見出しを付ける)
何故かと言いますと旧来の方法は大きく間違っているわけではないからです。
新しい方法やタグはより適切に文書を構成するために作られたわけですから、その使用に迷い、最終的に文書構造に誤った部分ができるくらいなら使用しなくても構わないのではないでしょうか？
(もちろん正しいときに使用できるのが最良ですし、その判断が付くよう学習するべきです)
headerやfooterタグ、navタグなど非常に利用目的が明確なタグなら積極的に使用したほうがいいと思いますが。
100点満点の文書を目指すために追加されたタグを使って、90点から80点に落ちるというようなことがあっては本末転倒ですよね。
(失敗から学ぶことはできますが)
投稿2015/10/12 06:27
総合スコア730
0
文章やリンクボタンの一部として使う場合は素のimg、別途図表や挿絵など独立して使うならfigureで囲んでキャプションをつけるのがいいのではないでしょうか？
かなり適当ですが、例えば、下記のような感じです。
HTML
1<p>図1を参照してください。一覧に<img src="neko_icon.png" alt="猫アイコン">が表示されるのがわかります。</p> 2<figure> 3 <img src="zu1.jpeg" alt="猫アイコンの表示例の図"> 4 <figcaption>図1</figcaption> 5</figure> 6<button onclick="kakudai();"><img src="kakudai_button.png" alt="拡大"></button>
figureを使ったからと言ってfigcaptionが必須というわけではありませんので、キャプションを付けない場合でも、独立している(地の文章の中にない)ならfigureで囲った方が構造として意味が通じると思います。
他、下記のサイトでfigureの使い方が良くまとめられていますので、参考にしてみてください。
[HTML5]正しいfigure要素の使い方(文脈まで深く考えた)
投稿2015/10/11 23:53
総合スコア21735
図版・写真・イラスト・コード等にキャプションが付いているケースでは基本的にfigureを使って問題ないケースに該当するので、認識としては間違ってないと思います。
が、キャプションが無くてもfigureに該当するケースの答えにはなってないので、そういう意味では不完全でしょうね。
>プロのお仕事として、こんな認識で良いのですかね？
難しくて複雑な問題をシンプルに単純化して理解することはよくやります。
日々の業務でいちいち重箱の隅つつくように厳密にマークアップを考えていたら
正直終わらないですし誰もそこまで求めてないので・・・(；´Д｀)
ただ、単純化する際には仕様と矛盾しないことが大前提ですけどね。
いつもありがとうございます。
＞＞＞
図版・写真・イラスト・コード等にキャプションが付いているケースでは基本的にfigureを使って問題ないケースに該当するので、認識としては間違ってないと思います。
が、キャプションが無くてもfigureに該当するケースの答えにはなってないので、そういう意味では不完全でしょうね。
図版・写真・イラスト・コード等にキャプション（説明文、見出し）がある場合はfigureで間違いないのですね。
キャプションがない場合は、結局自己完結しているかしていないかで、ただのimgかfigureか判断するのでしょうか？
＞＞＞
>プロのお仕事として、こんな認識で良いのですかね？
難しくて複雑な問題をシンプルに単純化して理解することはよくやります。
日々の業務でいちいち重箱の隅つつくように厳密にマークアップを考えていたら
正直終わらないですし誰もそこまで求めてないので・・・(；´Д｀)
ただ、単純化する際には仕様と矛盾しないことが大前提ですけどね。
プロのコーダーでも、そこまでセマンティックや、アウトライン保守性管理性を考えた（Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法）のような事にそこまで、突っついてこないのですね。
figureとimgどちらか位がある程度しっかりしているくらいで現場でも十分なのですかね。
articleとsectionというもっとわかりにくいものもありますが、こちらはとりあえず迷ったらsectionを使っておくくらいで十分ということですかね？
HTMLのセマンティックや、アウトライン保守性管理性は考えますよ。CSS設計も当然考慮します。ただ、ことHTMLのマークアップ部分に関しては最終的には「文法違反にならないようにすること」が最低ラインなので、迷った場合には時間をかけずに安全な方を取るという選択肢も実務上はあり得ると思います。
学問的な正しさを追求するのは正しいことですが、仕事の現場で求められることはそればかりではないので・・・。
ｗ３Cのバリデートで、説明できる理由のあるエラー意外は無くせれば、実務でも最低ラインをクリアー出来ているのですね。
下記の教科書の内容位出来れば完璧なのでしょうね。
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
figureを付けるかつけないか、articleかsectionかは自分はこういう理由でこちらにしました程度の認識で十分という事ですね。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2015/10/12 08:50
2015/10/12 14:04
退会済みユーザー
2015/10/13 08:01
退会済みユーザー
2015/10/13 11:58
2015/10/14 07:28