ヤフオクの出品でタグを勉強しています。(Chrome使用)
普段は<center></center>で中央に寄せているのですが、
調べていたら【<caption></caption>】【<div style="margin:auto;text-align:center"></div>】というのを見つけました。
これらは<center>と同じく、中央に寄せるタグで良いのですか?
ちなみに<center>を使うと、プラウザによっては正しく表示されないことがあるみたいですが、
現在はどれを使った方が良いのでしょうか?
よろしくお願いします。
No.5ベストアンサー
- 回答日時:
><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
- 回答日時:
>一つ一つのタグの意味が理解できました。
もともと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-html4 … 4.01 仕様書邦訳</a>を見てください</p>
というものです。
このままだとブラウザは、自前のスタイルシートを使って、見出しは太文字で大きく。引用部分は少しインデントさせて表示します。読み上げブラウザでは、見出しは大きな声で、段落の区切りでは一呼吸置いて・・読み上げます。
HTMLを書くときは、その文書の中でそれがどのような【意味】を持つかを判別してマークアップしていかなければならないということです。そのツールがタグです。
大事なことは、タグはどのように表示するかではまったくありません。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
たとえば次のような使い方は誤りです。
・行間を開けたいから<p>を使ったり<br>を繰り返す。
・文字を大きくしたいから<h2>とかを使う
・字下げしたいから<blockgutoe>を使う
・デザインのために<table>を使う
・余白を開けたいから白い画像を置く
・・・
そんなことをしたら、コンピューターにはどこが大事なところか、どこが引用なのかがわかりません。読み上げソフトは読めません。・・・
詳しくは「14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
それでは、まずいということになってW3Cが創設され、HTML4.01という仕様が出来ました。
【引用】____________ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[2.2.1 HTMLの略歴( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
【引用】____________ここから
HTMLの性質上、プレゼンテーションに関する要素や属性は、次々と他の機構、とりわけスタイルシートに置換えられていく。 また、文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になるということが、経験的に知られている。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[2.4.1 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
そして、
【引用】____________ここから
しかしながら、より強力なプレゼンテーション機構をスタイルシートが提供するため、World Wide Web Consortium は、HTMLのプレゼンテーション関連要素・属性を、段階的に縮小させていくこととする。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[2.3.5 スタイルシート( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
★次のバージョンの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-html4 … )]より
★strictには<center>はありません。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
本題のYahoo!オークションの話題とは外れますが、タグの意味を正確に知っておいてください。デザインのためではありません。
何度も回答して頂きありがとうございます。
ただ、こんなに細かく説明して頂いたのに申し訳ないのですが、
オークションで使うテンプレをサイトからコピペし、そこに少々のアレンジを加えている程度の私にとっては、
かなりレベルの高い説明に感じほとんど理解不能でした(~_~;)
ですが、タグについてきちんと勉強していけば、少しずつでも理解できるようになっていくのだろうなと。
プラス、タグの意味の重要性を知っておかないと自分のためにもダメだなと思いました。
いろいろとありがとうございました<(_ _)>
No.7
- 回答日時:
>ただ…何で非推奨なのって感じです。
「スタイルシートと文章を分けたほうが、後々Webサイトの管理がやりやすいだろう。」という精神から、1996年、スタイルシートができました。
スタイルシートとは何かというと、文章の色や背景やレイアウト設定など、「装飾」を細かく指定したものです。
スタイルシートなしで、文章の中のあちこちに「背景色=赤に!」とか「アンダーラインここ!」とかちりばめて書いてあると、季節が変わってホームページの雰囲気を変えようとするとき、いちいち「背景色=緑に!」とか「アンダーラインやっぱなし!」とか何ヶ所も置換しなければなりません。
ならばいっその事、「段落1=赤に!」とスタイルシートで決めておけば、スタイルシートを「段落1=緑に!」と1か所書き換えるだけで、すべての「段落1」の要素が変わって便利です。
そう考えると、「<center>は文章ではなく装飾だろう。じゃあ、スタイルシートで指定すべきじゃあるまいか。」というわけで、今では使用が非推奨なのです。
でも、ヤフオク出品ページを作る程度であれば、わざわざスタイルシートを使う恩恵はあまりないともいえます。私個人としては、規模の小さなページを手っ取り早く作るためには、あえて非推奨タグを使うのもありだと思います。
詳しくはHTMLとCSSの本を読んでくださいね。奥が深いですよ。
非推奨についての説明ありがとうございます。
タグ使用はオークションのみなので、今後ホームページを作成することになれば、
その過程でスタイルシートの便利さが分かるような気がしています。
とりあえず今は中途半端に理解している状態なので、
今後のためにも本を読んで一から勉強すべきなのかもしれません。
ありがとうございました<(_ _)>
No.6
- 回答日時:
>[×]で表示されないことがたまにありました。
は原因は別です。×は画像が取得できない意味です。もし<center>が無効なら×にはなりません。
><div align="center"></div>の略ではないとのことでNo.2の方と意見が分かれ…結局どちらが正しいの??って感じです。
なぜ仕様書を確認しないのですか?
『CENTER要素は、DIV要素でalign属性を"center"に設定することと全く等価である。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』と書かれています。略ではなく、同じ結果を得られるとかかれています。そもそも、<center>はelementであって、alignはattribute(属性)です。
[×]の表示はそのような理由なのですね。
タグも関係しているのかと思っていました^^;
>なぜ仕様書を確認しないのですか?
もちろん確認しました。
ですが分からない私にとっては、ORUKA1951さんが提示してくれた確実な仕様書も間違っていないと思うし、
ulti-starさんの回答も間違っていないと捉えてしまいます。
ですが、3人目のSafe_Modeさんの回答でやはり仕様書は正しいかなという方向に…。
お手数をおかけしました<(_ _)>
No.4
- 回答日時:
あくまで、スタイルシートが使えない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-html4 … )]より
ただし、システムで<center>が削除されるサイトであれば、<div align="center">は有効かもしれません。
なお、質問とは関係しませんが
<center></center>には(文書構造上の)意味がありませんから、HTML4.01(1999年12月勧告)の時代からずっと非推奨です。
『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
<center></center>には(文書構造上の)意味がありませんから、HTML4.01(1999年12月勧告)の時代からずっと非推奨です。
『 CENTER要素は推奨しない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
なぜ非推奨なのかと言うと、
この回答への補足
普段、商品説明内の追加画像に
<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
- 回答日時:
<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
- 回答日時:
<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>の略というのは初めて知ったので勉強になります。
ありがとうございました(*^_^*)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- JavaScript htmlとcssで分数を表示後、分数の右側に文書を書きたい 1 2022/04/28 10:09
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
<div id="container">の使いか...
-
htmlのolやulなどlistにtitleや...
-
インラインフレームのページ内...
-
スペースを使わず文字位置を揃...
-
複数のボタンを等間隔に、かつ...
-
HTML5 iframe の代わり
-
横並びdivで一部の初期高さがず...
-
<!-- #BeginLibraryItemとは
-
div要素が重なってします
-
HEADタグとheaderタグ
-
divとpの使いわけ
-
標題<h1>に、網掛けはできますか?
-
htmlの見出しタグ(<h1>)の次...
-
画面を縮小するとカラムが落ち...
-
フッターがウインドウの一番下...
-
CSSで、contentsがfooterに重な...
-
特定範囲内のCSSの継承を断ち切...
-
セクションをdivで囲むと見出し...
-
背景画像に全体または部分的に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
div要素が重なってします
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
divとpの使いわけ
-
ヘッダーとフッターだけ背景を...
-
min-heightとheightの違いについて
-
セクションをdivで囲むと見出し...
-
画面を縮小するとカラムが落ち...
-
ヘッダーを左右に二分割する方...
-
1時間30分を簡単に表したいで...
-
スペースを使わず文字位置を揃...
-
CSSで、contentsがfooterに重な...
-
h1に自分自身へのリンクを張...
-
divの中に外部のHTMLを埋め込む
-
divを横に並べる方法
-
hタグの右横に画像を表示
-
h1のテキストサイズよりh2の方...
おすすめ情報