html5にて水平線の引き方は？

Question

こんにちは。

html5での水平線の引き方を調べていましたら<hr>を水平線として装飾目的で使用するのは非推奨という事が書いてありました。

そこでどうやって水平線を引くか調べてみましたが、とあるサイトでCSSにて下記のようなサンプルを見つけました。

hr {
height: 3px;
background-color: #ff0000;
border: none;
color: #ff0000;
}

上記はhtml5に則った正しい表現なのでしょうか？もし正しくないなら水平線を引く方法をご教示願えないでしょうか？

以上、よろしくお願いいたします。

ORUKA1951 · Accepted Answer

＞これはORUKA1951さんご提示のに別途CSSファイルにて修飾すればよろしいでしょうか？　そうなのです。あなたが記事内の特定部分に罫線を用いて、その前後と区別したいということは、文書構造上も異なるはずです。　たとえば、本文とは直接関係しない記事である場合は、で囲みますし、それが本文から参照すべき記事（--書籍で言うと参考記事とか挿絵とか--）であれば

で囲むでしょう。　また、それが注意すべき事項でしたら

とかでしょう。 ※HTML5の仕様書では、さらにsectionの境目には書かない!!とまで書いてあります。なぜならsectionの終了で異なることが明白だからと・・。 HTML5でのHR要素は、複数の同レベルの段落が続く場合にその話題が変わるときなどに使用すると解釈が変わりました。　他にも廃止の方向だったやは意味が変わって存続しますし、
も、
と同様にその用途からプレゼンテーション的なものがなくなり意味のある要素に変更されました。　あなたが、
を入れようとしたところが、何であるかを見直してみてください。そうすれば正しい解決方法が見えてくるでしょう。　そうしてHTMLに文書構造だけしか書いていなければ、スタイルシートでのデザインの自由度は大きくなります。決して難しくなるわけではなく、楽になったと気づかれるでしょう。

think49 · Answer

#4 です。#3のお礼を読みました。

なるほど、20世紀と21世紀で区切っているのでね。
意味が明確ですし、hr要素を使用していいのではないでしょうか。

think49 · Answer

#3 です。

> この事から言って、この表現で間違いは無いでしょうか？
「段落の区切り」を表しているならその表現で正しいと思います。

ただし、それが「段落の区切り」なのか「段落のボーダー線」なのかは内容によりますので現情報では判断できません。(#1 でも述べました)
実例を挙げられないのでしたらご自分で判断してください、としかいえません…。

think49 · Answer

HTML Standard(通称HTML5)ではhr要素は「段落の区切り」を表しますので、区切りとして使用すればhr要素で間違いありません。
それが「段落の区切り」なのか「段落のボーダー線」なのかは内容によりますので現情報では判断できませんが。
hr要素は各ブロックレベル要素のborderよりも強い区切りを表しています。
論理構造上、ブロックレベル要素で区切るよりも強い区切りを表すときに使用してください。
http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-hr-element
http://www.html5.jp/tag/elements/hr.html

HTMLは装飾を定義しないので気をつけてください。HTMLは論理構造を定義するだけです。
HTML5になってアプリケーションとしての意義が加わりましたが、装飾はHTML4の時代と変わらずCSSの役割です。
ご掲示の例ではHTML5で論理構造(段落の区切り)を定義し、CSSで装飾(水平線)を定義しています。
http://www.mozilla.gr.jp/standards/webtips0003.html

水平線を引くだけならCSSで装飾し、対象ブラウザで同じ見え方になっていれば良く、HTMLをどうマークアップするかは重要ではありません。
HTMLで重要なのは「それが正しい論理構造として定義されているか」です。
段落の区切りではない部分にhr要素を使用していれば明らかな誤りとなります。
例えば、http://oshiete.goo.ne.jp/qa/7902457.html では回答内容を区切る為にhr要素を使用していません。
このことから「区切りを表す程には段落が分かれていない」というWeb製作者の意図が読み取れます。

ORUKA1951 · Answer

＞難しいですね。　いえ、とっても簡単になったのです。　なにせ、HTMLには文書構造しか記述する必要がなくなって、プレゼンテーションからは開放されるのです。例えば　

ページのタイトル

簡単な説明

本文見出し

項見出し

記事

本文見出し

項見出し

記事

　　　　　　だと、本当に簡単でしょう。後で誰が見ても・・検索エンジンもどこが主文でどれが無関係の記事でどこがナビかが分かる。・・・プレゼンテーションから開放されるとHTML作りは、本当に簡単になるのですよ。 HTML4.01では『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』　のように抽象的でしたから分かりにくかったのが分かりやすくなりました。　⇒HTML5 における HTML4 からの変更点( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) 『

を水平線として装飾目的で使用するのは非推奨』は、HRに限ったことじゃないのです。すべての要素について、装飾目的での使用は禁止です。　あなたが罫線を引きたいとしたら、文書構造上は何らかの意味があるわけですから、

を別にするなり、

ORUKA1951 · Answer

発想自体をHTML5的にしてください。 HTML5を策定するに当たって目標とされたことは・新しい技術をプロプライエタリなソフトウェア( http://ja.wikipedia.org/wiki/%E3%83%97%E3%83%AD%E3%83%97%E3%83%A9%E3%82%A4%E3%82%A8%E3%82%BF%E3%83%AA )を使って実装すること　VIDEO,CANVAS要素やINPUT要素の拡張・文書を構造化すること　HEADER,SECTION,FOOTER,FIGURE,ASIDEなどの要素の追加 HTML5にとってHR要素の意味づけは　⇒4.5.2 The hr element( http://www.w3.org/TR/2012/CR-html5-20121217/grouping-content.html#the-hr-element ) 　「段落レベルのテーマの変わり目」であり、sectionの境界にはそもそも不要・・・なぜならそれ自体が境界をすでに示しているからです。上記に例と共に詳しい説明があります。　具体的には

このセクションの見出し

記事の段落

記事の段落

記事の段落

挿絵的な図や記事　

記事の段落

このセクションの見出し

記事の段落

記事の段落

　の場合、

が挿入可能なのは例示の通り一箇所だけです。　それ以外は、section+section{border-top:3px red solid;padding-bottom:1em;}のようにすべきです。　デザインのためにHTMLは書いてはならない!!!! これがHTML5です。 ^^^^^^^^^^^^^^^^ 　HRは、試されたら分かるようにある程度の大きさを持つブロック要素で、ブラウザによって描画は異なります。多分その指定ではブラウザによっては異なる表示になるはずです。＞「html5での水平線の引き方を」＞上記はhtml5に則った正しい表現なのでしょうか？は、明らかに誤りです。 ^^^^^^^^^^^^^^^^^^^^^ 　HTML5はすべての要素は(意味的な)文書構造を示す要素になり、文書構造を示すだけになります。プレゼンテーションは、すべてスタイルシートに任せます。　『本文中の挿絵の前後に罫線を表示したいがスタイルシートは？』と考えないとならないのですよ。

例えば、文書中に本文に直接関係ない記事があって、その前後を罫線で分かりやすくしたいなら、

だとしたら section aside{font-size:0.9em;margin:1em;border:solid 1px blue;border-width:1px 0;} と指定しなさい・・・ということです。 ★これがHTML5の最も重要なところです。　・・・実は、HTML4.01でもそうでした

html5にて水平線の引き方は？

＞これはORUKA1951さんご提示の<aside></aside>に別途CSSファイルにて修飾すればよろしいでしょうか？

#4 です。

#3 です。

HTML Standard(通称HTML5)ではhr要素は「段落の区切り」を表しますので、区切りとして使用すればhr要素で間違いありません。

＞難しいですね。

発想自体をHTML5的にしてください。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング