-
ID:yhn.XM さんの質問

デザイン上省略された見出しのマークアップについての質問


  • 下記のような構造で、デザイン上は「<h1>質問一覧</h1>」が省略されている場合、どのようにコーディングしますか?

  • <section>
    <h1>質問一覧</h1>
    <section>
    <h2>質問タイトル01</h2>
    <p>質問01の内容...</p>
    <section>
    <section>
    <h2>質問タイトル02</h2>
    <p>質問02の内容...</p>
    <section>
    ...
    </section>

  • ①デザインデータに無いものはマークアップしない。
    ②デザインデータになくても、必要と判断した場合マークアップは行いCSSで非表示にする。
    ③その他の回答

  • 回答よろしくお願いいたします。

みんなの回答 10 件

ID:WyG3jn さんの回答

確認する。

ID:94Egki さんの回答

③その他の回答
w3qで質問する

ID:MWPUEc さんの回答

確認するのがいいですが、デザインがFIXしてるのでしたら
②でいいかと。

display:none;は一時期SEOで減点がどうとか話されてましたが
今はPC/SPワンソースの時代でdisplay:none;はよく使われていますので、そこまで神経質にならなくてもいいかなと思います。

ID:UKXI9I さんの回答


人間に伝えるための情報(見た目)と、機械に伝えるための情報(機械的なアウトライン)がそれぞれ異なるわけだから、「人間に伝えるための情報」しか用意されていない場合は、別途機械に伝えるための情報を作る必要がある。というのが正論。ただ、それはコーダーの仕事じゃなくて、ビジュアルデザインよりももっと上流の仕事。web知らない人が上流で固まっているとどうしようもない。

ID:FWGELo

機会に伝えるためのマークアップはコーダーの仕事

ID:UKXI9I

マークアップ作業はコーダーの仕事。それ当たり前。

ID:M.MQgY さんの回答

1
そもそもデザイナーじゃなくて、ディレクターに言う。
リストなんだからulかdlじゃない?機械に質問リストなんて伝えても意味ないし。display:noneはさすがにしないわ。
そんなページがあったところで、検索からどかんと来るわけじゃないし。

ID:MWPUEc

1ということは、h1は何をつけます?もしかして、無しパターンですか?

ID:s48xy3

サイトタイトルでいいんじゃね?

ID:s48xy3 さんの回答

結構昔に読んだ本では2で書かれてたから2にしちゃってる。

ID:s48xy3

2にしちゃってるんるん♪

ID:s48xy3

2にしちゃってるんるんなんだよ〜ぅ♪

ID:s48xy3

ひゃっは〜♪ うっは〜♪ 2にしちゃってるんるん♪ 2にしちゃってるんるん♪ 2にしちゃってるんるんなんだよ〜♪ はい、皆さんもご一緒にー!

ID:wsUD3N さんの回答

コーディングの「~するべき」って曖昧で中途半端で
ほんとにそうするべきなのかなってよく思う

ID:yhpnpP さんの回答

もちろん①

display:noneにするっていう回答があるけど、PCでもSPでもdisplay:noneはおかしいでしょ。
それはペナルティくらってもおかしくないと思う。

ID:V4IeMk

目が不自由な人へのアクセスビリティを考えるとどうなんだろう?音声読み上げの時に大事だよね。

ID:MJByYh

あとペナルティは喰らわないよ。グーグルのランキング目的で行う隠しテキストの場合はペナルティ対象だけどね。グーグルはレスポンシブデザインを推奨してるしdisplay none自体は大丈夫。

ID:yhpnpP

>目が不自由な人へのアクセスビリティを考えるとどうなんだろう?
見出しを考慮しないデザインがダメなだけ。

>display none自体は大丈夫
display none自体がダメって言ってるんじゃないの。
PCでもSPでも表示されないものが存在するのはどうなの?ってこと。RWDの場合、どちらか一方では表示されるでしょ?

ID:97kfPF

見出しはコンテキストによっては不要だから見出しの無いデザインがダメってことはないでしょ。

ID:yhpnpP

はぁ…ちゃんと意味を理解してくれよ。
デザインに見出しは絶対必要なんて書いてないでしょ。
「目が不自由な人へのアクセスビリティを考えるとどうなんだろう?」
という問いに対して見出しを考慮しないデザインがダメと回答してるんだよ。
そこまでアクセシビリティ云々を考えるならデザインに見出しを含めてしまえばいいのさ。そもそも目が不自由な人にデザインのディティールにこまかく拘る必要ないんでしさ。

ID:97kfPF

長くて読んでないけどグダグダうっせーな、おまえ。黙って寝ろよ。途中からテキトーにこっちは書いてるだけなんだからよ。

ID:97kfPF

今読んだけどおまえアホだな。目が見えない人にとってはデザイン上に見出しがあろうがなかろうがどーでもいーだろ。あー説明めんどくせ。頭使って考えろ。音声読み上げだっつってんだろ。

ID:yhpnpP

なんだ、反論できないとなると乱暴な言葉づかいになるのか。やれやれだぜ。

ID:yhpnpP

音声読み上げ考慮するなら、普通に見出しいれとけばいいでしょうに。わざわざdisplay:noneにする手間のほうが面倒だわw

ID:97kfPF

なんで目の見えない人の為に視覚的デザインを調整する必要あんだよ。デザインを最適化する相手間違ってんだろ。お前、ほんとアホだな。お前の存在をdisplay:noneにしとけよ。

ID:UKXI9I

Q1.
さて、どちらの言い分が正しいでしょうか。
キミにこの問題が解けるかな?
正解はまた来週〜

ID:yhpnpP

ほんと言葉遣い悪いね。お母さんに乱暴な言葉づかいしちゃダメって言われなかったかい?

しかし、アホは君だよ。
目が不自由な人を考慮するようなサイトなんだから、ユーザービリティやアクセシビリティ、リーダービリティ等々が優先されてるわけでしょ?
なら、分かりやすく見出しも出すでしょ。役所やらのサイト見てご覧なさい。

ID:3pdc7w

目が不自由な人を考慮する=目が不自由な人を最優先する、ではないだろうが。ほんとアホだな。とりあえず目隠しして、その役所やらのサイト見てみろよ。分かりやすい見出しなんて関係ねーだろうが。目が不自由=盲目では必ずしもないが、音声読み上げって言ってんだから、そのくらい読み取れよ。アホ相手はつかれるわー。

ID:yhpnpP

んー、なんで目が不自由な人だけを意識するかなぁ。
君の言ってることは、音声読み上げ対応してれば全てのテキストをdisplay:noneにしても良いってことになるよ。
確かに目隠しして見てみたら、テキストなんて表示されてなくてもいいわけだからね。
あのね、目が不自由な人を考慮するサイトってことは、より多くのユーザーにとって分かりやすい、使いやすいサイトを意識してるってことでしょ。
だから、分かりやすく見出しも出すでしょって言ってるんだよ?

ID:/eIY.0

あのね、もう飽きたから無知な君に教えてあげるよ。display:noneが適用されたコンテンツはスクリーンリーダーでは読み上げられないんだわ。そもそも読み上げられないの。あー、寝よ。キミのアホみたいな長文は二行目以降読んでないわ。

ID:/eIY.0

今読んだけど、とりあえず君がデザインに無知なことは分かったわ。まー仕方ないよ。

ID:yhpnpP

だからね、サイトのターゲットを想像してご覧て言ってるんだよ?
君の想像してるサイトは目の不自由な人専用サイトかい?
もう良いから早く寝なさい。良い夢見なよ。

ID:/eIY.0

そんなこと一言も言ってねーだろ。目の不自由な人向けのサイトな訳じゃないからHTMLソース上で対応するって話をしてたんだろーが。視覚的なデザインはメインターゲットに向けたものを作るべきで、より多くのユーザーにとって云々じゃないわ、ぼけ。てか、ネタばらししたのに理解できてねーな、こいつ。

ID:iL6Y5r

やれやれだぜで吹いて読むの飽きた

ID:TRXrn.

↑もーちょい読めよ!

ID://Ya8n さんの回答

おそらく「現場のプロが教えるHTML+CSSコーディングの最新常識」で見たと思うけど、
デザイン上省略された見出しは、
display noneで非表示にすることを勧めてたと思う。
よって②かな。悩みけど。

ID:MJByYh

あ、たぶん、その本。

ID:jemTC1 さんの回答

人生に疲れてる

最終更新日:2016-02-13 (1,898 views)

関連するトピックス

ページ上部に戻る