<center></center>と同じ意味のタグ

質問

ヤフオクの出品でタグを勉強しています。(Chrome使用)

普段は<center></center>で中央に寄せているのですが、
調べていたら【<caption></caption>】【<div style="margin:auto;text-align:center"></div>】というのを見つけました。

これらは<center>と同じく、中央に寄せるタグで良いのですか?

ちなみに<center>を使うと、プラウザによっては正しく表示されないことがあるみたいですが、
現在はどれを使った方が良いのでしょうか?

よろしくお願いします。

回答No.5

Safe_Mode · ベストアンサー

><div align="center"></div>の略ではないとのことで
>No.2の方と意見が分かれ…
>結局どちらが正しいの??って感じです。
<center></center>が><div align="center"></div>の略な訳もなく、無視されていいでしょう。
くどいようですが、<caption></caption>は<table></table>を使ったテーブル（表）にタイトルをつけるためのタグであり、特に何も指定しない限りテーブルの上部の中央に表示されるように決められているものです。
つまり元のテーブルが中央に寄せられていなければ左に寄ったテーブルの中央に表示されます。
<table></table>全体を<center></center>で中央に寄せていれば<caption></caption>で表示したタイトルもテーブルの中央にくるので結果としてページ全体の中央に寄せられるということだけです。
そもそも<caption></caption>をテーブル（表）のタイトル以外の目的で使うのは正しくないです。
Yahooオークションではスタイルシートが使えないというのは知りませんでしたが、一般的なHTML文書作成上では、<div style="margin:auto;text-align:center"></div>がいいでしょう。

お礼

><center></center>が><div align="center"></div>の略な訳もなく、無視されていいでしょう。
そうなんですね…分かりました。

これまで皆さんに教えて頂きましたが、
変に難しく考えてしまい理解できているようでできていないと思います^^;

これまで見よう見まねでやってきましたが、
やはり基礎から勉強しないとダメなんだなと思いました。

ただ、Safe_Modeさんの説明は丁寧で分かりやすかったです。

お手数をおかけしました<(_ _)>

回答No.8

ORUKA1951

＞一つ一つのタグの意味が理解できました。

　もともとHTMLは、ある文書をそれを構成する要素(国語的には段落といったほうが良いかも)に分解してマークアップするためのもの(Markup Language)で、それに他の文献や他の文献の特別な場所にリンクできる便利な機能を加えたもの(Hyper--)です。Hyper Text Markup Language。
　具体的には
<h1>ここは見出し(heading)</h1>
<p>ここは段落(paragraph)</p>
<p>ここも段落です。とくにに<strong>重要</strong>なのは・・</p>
<blockquote>ここは一塊の引用(long quotation)</blockguote>
<p>詳しくは<a href="http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html">HTML 4.01 仕様書邦訳</a>を見てください</p>

　というものです。
　このままだとブラウザは、自前のスタイルシートを使って、見出しは太文字で大きく。引用部分は少しインデントさせて表示します。読み上げブラウザでは、見出しは大きな声で、段落の区切りでは一呼吸置いて・・読み上げます。

　HTMLを書くときは、その文書の中でそれがどのような【意味】を持つかを判別してマークアップしていかなければならないということです。そのツールがタグです。
　大事なことは、タグはどのように表示するかではまったくありません。
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
　たとえば次のような使い方は誤りです。
・行間を開けたいから<p>を使ったり<br>を繰り返す。
・文字を大きくしたいから<h2>とかを使う
・字下げしたいから<blockgutoe>を使う
・デザインのために<table>を使う
・余白を開けたいから白い画像を置く
・・・
　そんなことをしたら、コンピューターにはどこが大事なところか、どこが引用なのかがわかりません。読み上げソフトは読めません。・・・
　詳しくは「14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )」

　それでは、まずいということになってW3Cが創設され、HTML4.01という仕様が出来ました。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［2.2.1 HTMLの略歴( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLの性質上、プレゼンテーションに関する要素や属性は、次々と他の機構、とりわけスタイルシートに置換えられていく。 また、文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になるということが、経験的に知られている。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［2.4.1 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )］より

そして、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
しかしながら、より強力なプレゼンテーション機構をスタイルシートが提供するため、World Wide Web Consortium は、HTMLのプレゼンテーション関連要素・属性を、段階的に縮小させていくこととする。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［2.3.5 スタイルシート( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.3.5 )］より

★次のバージョンのHTML5では、もう十五年たつので予告どおり、見栄えに変わる要素(<center><i><basefont><big><font><strike><tt>は廃止されます。

そのために
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 HTML 4仕様が定める各DTDの詳細については バージョン情報の項を参照のこと。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Conformance: requirements and recommendations (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )］より
★strictには<center>はありません。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

　本題のYahoo!オークションの話題とは外れますが、タグの意味を正確に知っておいてください。デザインのためではありません。

お礼

何度も回答して頂きありがとうございます。

ただ、こんなに細かく説明して頂いたのに申し訳ないのですが、
オークションで使うテンプレをサイトからコピペし、そこに少々のアレンジを加えている程度の私にとっては、
かなりレベルの高い説明に感じほとんど理解不能でした(~_~;)

ですが、タグについてきちんと勉強していけば、少しずつでも理解できるようになっていくのだろうなと。
プラス、タグの意味の重要性を知っておかないと自分のためにもダメだなと思いました。

いろいろとありがとうございました<(_ _)>

回答No.7

digitalian

＞ただ…何で非推奨なのって感じです。

「スタイルシートと文章を分けたほうが、後々Webサイトの管理がやりやすいだろう。」という精神から、1996年、スタイルシートができました。

スタイルシートとは何かというと、文章の色や背景やレイアウト設定など、「装飾」を細かく指定したものです。

スタイルシートなしで、文章の中のあちこちに「背景色＝赤に！」とか「アンダーラインここ！」とかちりばめて書いてあると、季節が変わってホームページの雰囲気を変えようとするとき、いちいち「背景色＝緑に！」とか「アンダーラインやっぱなし！」とか何ヶ所も置換しなければなりません。

ならばいっその事、「段落１＝赤に！」とスタイルシートで決めておけば、スタイルシートを「段落１＝緑に！」と１か所書き換えるだけで、すべての「段落１」の要素が変わって便利です。

そう考えると、「<center>は文章ではなく装飾だろう。じゃあ、スタイルシートで指定すべきじゃあるまいか。」というわけで、今では使用が非推奨なのです。

でも、ヤフオク出品ページを作る程度であれば、わざわざスタイルシートを使う恩恵はあまりないともいえます。私個人としては、規模の小さなページを手っ取り早く作るためには、あえて非推奨タグを使うのもありだと思います。

詳しくはHTMLとCSSの本を読んでくださいね。奥が深いですよ。

お礼

非推奨についての説明ありがとうございます。

タグ使用はオークションのみなので、今後ホームページを作成することになれば、
その過程でスタイルシートの便利さが分かるような気がしています。

とりあえず今は中途半端に理解している状態なので、
今後のためにも本を読んで一から勉強すべきなのかもしれません。

ありがとうございました<(_ _)>

回答No.6

ORUKA1951

＞[×]で表示されないことがたまにありました。
　は原因は別です。×は画像が取得できない意味です。もし<center>が無効なら×にはなりません。

＞<div align="center"></div>の略ではないとのことでNo.2の方と意見が分かれ…結局どちらが正しいの??って感じです。

　なぜ仕様書を確認しないのですか？
『CENTER要素は、DIV要素でalign属性を"center"に設定することと全く等価である。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/graphics.html#edef-CENTER )』と書かれています。略ではなく、同じ結果を得られるとかかれています。そもそも、<center>はelementであって、alignはattribute(属性)です。

お礼

[×]の表示はそのような理由なのですね。
タグも関係しているのかと思っていました^^;

>なぜ仕様書を確認しないのですか？
もちろん確認しました。
ですが分からない私にとっては、ORUKA1951さんが提示してくれた確実な仕様書も間違っていないと思うし、
ulti-starさんの回答も間違っていないと捉えてしまいます。

ですが、3人目のSafe_Modeさんの回答でやはり仕様書は正しいかなという方向に…。

お手数をおかけしました<(_ _)>

回答No.4

ORUKA1951

あくまで、スタイルシートが使えないYahoo!オークションだけについてお答えします。
<div style="margin:auto;text-align:center"></div>はYahoo!オークションでは使えません。また、<div align="center"></div>の略ではありませんし、<div style="text-align:center"></div>でHTMLの意味的には同じになりますが、これも使えません。

＞ちなみに<center>を使うと、プラウザによっては正しく表示されないことがあるみたいですが
　ないはずです。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTML 4仕様に適合するユーザエージェントとは、この仕様の必須事項と下記の3点とを遵守するもののことを指す。
・・・【中略】・・・
・過去との互換性のため、HTML 4 を解釈するツールについては、HTML 3.2 ([HTML32]参照)並びにHTML 2.0 ([RFC1866]参照)をもサポートすることを推奨する。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Conformance: requirements and recommendations (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )］より

　ただし、システムで<center>が削除されるサイトであれば、<div align="center">は有効かもしれません。

なお、質問とは関係しませんが
　<center></center>には(文書構造上の)意味がありませんから、HTML4.01(1999年12月勧告)の時代からずっと非推奨です。
　『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』

　<center></center>には(文書構造上の)意味がありませんから、HTML4.01(1999年12月勧告)の時代からずっと非推奨です。
『 CENTER要素は推奨しない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/graphics.html#edef-CENTER )』
なぜ非推奨なのかと言うと、

お礼

回答ありがとうございます。

質問内容が足りなかった気がしたので補足させていただきました。

補足

普段、商品説明内の追加画像に
<div style="margin:auto;text-align:center"><img src=アップした画像URL></div>
問題なく表示されています。

以前、追加画像を<center><img src=アップした画像URL></center>でやっていたのですが、
[×]で表示されないことがたまにありました。
(その時IEでもやってみたのですが[×]だった気がします)

<center></center>が関係しているのか、ヤフー側が関係しているのかは分かりませんが。
ちなみに、テンプレ内の文章は<center></center>で問題ありません。

<div align="center"></div>の略ではないとのことでNo.2の方と意見が分かれ…結局どちらが正しいの??って感じです。

私が理解できていない、また分かりづらい質問だったらすみません。

回答No.3

Safe_Mode

<caption></caption>はテーブル要素のタイトルを表示させるためのタグです。既定ではテーブルの上部にセンタリング表示されるので、これを利用しているものと考えられます。

<div style="margin:auto;text-align:center"></div>については・・・
<div></div>のブロック要素にスタイルシートを適用した例で、margin:"auto"でブロック要素全体をページの上下左右の中央に配置し、text-align:"center"で当該ブロック要素中の文字を中央に配置するように指定しています。
文書の構造と表現（見栄え）はHTMLタグとスタイルシートで分離すべきという考え方に
よれば<div></div>でブロック要素を用い、スタイルシートで中央寄せするというのが妥当な考え方と思いますよ。

<center></center>はhtml4.01Transitionalでも非推奨となっていますので本来使うべきではないと考えますが、あまりに多く使われているため、当分の間はどのブラウザでもサポートされるでしょうけど。

お礼

こちら初心者なのでパッと見…結構難しく感じましたが、
一つ一つのタグの意味が理解できました。

やはり、<center></center>で問題なさそうですね^^;

詳しい説明ありがとうございました(*^_^*)

回答No.2

ulti-star

<caption></caption>

はページの上に中央揃えして表示させるタグです。

<div style="margin:auto;text-align:center"></div>

divタグでstyleは余り使われませんが、

<div align="center"></div>

で中央揃えができます。

<center></center>

は

<div align="center"></div>

の略と言われています。

お礼

確かに<caption></caption>はページの上に中央揃えで表示してありました。
普段、テンプレの上にタイトルを<center></center>でやっていたので、
<caption></caption>と何が違うのだろう…と。

結局、<center></center>で問題なさそうですね^^;

<center></center>が<div align="center"></div>の略というのは初めて知ったので勉強になります。
ありがとうございました(*^_^*)

回答No.1

digitalian

<center>は古い書式で、現在は使用が推奨されていません。
ですが、非常に便利ですので、ほとんどのブラウザでは未だに正常に表示されます。

お礼

こちら初心者ですが、簡単な単語なので使いやすいです^^
ただ…何で非推奨なのって感じです。

元プログラマさま、ありがとうございました(*^_^*)