プロが教えるわが家の防犯対策術!

どこをテーブルで作るべきか、divタグで作るべきかの境目というか、考え方が
微妙で困っています。

サイトレイアウト大まかな段組は<div>でできるだけ行うように、みたいにCSSデザインの勉強をしていると書いてあり、その意味は分かりますが、<div>タグで概観をレイアウトしても、結局は、divで定義したコンテンツBOXの中身だったりメニューの中身だったりは
テーブルで配置したほうが更新作業的にやりやすいし、テーブルほうがよいのでは?
みたいに、なってしまいます。

左に画像、右にコメント(文字列)などの関係のものが、以下に複数続いたりする場合、
どう考えてもテーブルのほうがよくない?って思うんですよね。
その場合でも無理やりdivタグでテーブル構造を作るもんなんですかね?

divタグだとコード量が少なくなるからSEO対策的に良いっていうのは理解できますが、
divタグはここまで作る、テーブルタグの使い分けが微妙です。
このときはテーブルにしないといけない。とかないんでしょうから
ある意味センスなんでしょうが。。。。
製作の効率と、コンテンツの管理の仕方を考えると
divタグとテーブルの使い方の境目が分からなくなってしまいます。

そのへんの考え方ノウハウを教えてください。

このQ&Aに関連する最新のQ&A

A 回答 (4件)

No.1補足に対し


-----------------------
 画像  | テキスト
-----------------------
 画像  | テキスト
-----------------------
 画像  | テキスト
-----------------------
 画像  | テキスト
-----------------------
これで画像の大きさが同じならtableタグを使ってもいいですが

No.1補足のレイアウトなら、1.も2.もtableを使わないほうがずっと楽です。
画像は、ブロックの性質を持つインライン要素なので、画像もテキストもそれぞれブロック要素である<p></p>タグに入れ、適時左右にfloatさせれば良く、メモ帳などのテキストエディタで狙い通りのレイアウトがtableを使うより数倍速く作成できます。floatされる側のmargin指定しだいで表的なレイアウトにもワープロ的なレイアウトにも異なる回り込みを表現できます。初心者はfloat解除を忘れてレイアウトを崩すので、最初にfloat解除をマスターするのがコツと言えばコツです。
tableのtdタグ内のフォントが、親レイアウト構成要素の<div id="">やCSSで全体指定したものを引き継がないので、別途tableに同じフォント指定しなければ統一感のあるページにならないのもマイナス要因です。
ホームページビルダー(これは表でレイアウトする為に作られたようなソフトです)などのWYSWYGに頼って作成していると、この感覚は解らないと思います。これはEXCELをワープロ代わりに使う人が多いのと同じなのではないでしょうか。
    • good
    • 0
この回答へのお礼

>tableのtdタグ内のフォントが、親レイアウト構成要素の<div id="">やCSSで全体指定したものを引き継がない

なるほどですね。属性の継承のことも考えたり、テーブルにしたほうがよいかどうか
をその都度製作しようとする、内容(コンテンツ)によって考えることですね。

ありがとうございました。

お礼日時:2010/06/17 00:00

HTML5完全切り替えには10年の猶予期間があり、2022年まではHTML4のままでも使える事になっています。


しかし、セキュリティ対策やマルチメディア対応などで、HTML5対応ブラウザに急速に切り替わるのではないかと予想しています。
ブラウザでは早々と今月リリースされたSafri5が対応しましたが、HTML5がもうすぐ現実のホームページに登場してきます。
HTML4ではCSSでIDやclassを指定して使っていたデザイン構成タグがHTML5では次のような明快なタグに置き換えられます。
<div id="header"></div> → <header></header>
<div id="nav"></div> → <nav></nav>
<div id="article"></div> → <article></article>
<div id="section"></div> → <section></section>
<div id="footer"></div> → <footer></footer>

tableについて引用すると『テーブルをレイアウト目的で使ってはいけません。歴史的に、ページレイアウトを制御する方法として、HTML 内にテーブルを誤用するウェブ制作者がいました。この利用方法は非準拠です。ドキュメントからテーブル・データを展開しようとするツールが、非常に紛らわしい結果を取得してしまうからです。特に、スクリーン・リーダーのようなアクセシビリティ・ツールのユーザーは、レイアウト目的のテーブルがあるページのナビゲートに多大な困難を伴うことになるでしょう。』という事になります。
今年いっぱいはHTML4で記述するしかありませんが、数ヶ月~数年でHTML5に移行せざるを得ない事を考えると<div id="">で作っておくべきと考えます。

参考URL:http://www.html5.jp/
    • good
    • 0

それは、自分の制作し易さからの判断ですよね・・・


オーサリングソフトなどから学んでしまうとそんな風に捉えちゃいますね。
非公開やユーザー、UAの事を無視すれば、どんな仕様でも構いません。
ところが、
UAの事や為を考えながら制作すると(表現すると)
その意味を活かしたい場合には、適切なHTMLやマークアップが必要です。
HTMLレベルでは、
テーブル = 表です。
エクセルで作るような表を表す場合にテーブルを使います。
その違いだけです。

絶対ダメって事でもありません。作者の方針ですから。
HTMLから学べば、どちらが良いのか判断出来るでし、
制作レベルで簡単だとか難しいとかの話の問題ではありません。
HTMLレベルで適切か不適切かの問題です。
それと、読み込み順がtableではtr,tdの順に読んでしまうので、横に意味するように書かなくてはいけなくなります・・・

ちなみに、自分の場合、メニューなら ul.li で作ります。
    • good
    • 1

表であればTable、レイアウトならDivです。


例えば、カレンダーは表の一種なのでTable。
料金表や商品早見表などもTable。

サイトの外見はCSSでコントロールすべし、レイアウトのためにTableを使用しない、
またTableを入れ子にしないというのが自分の基本の考え方です。

ですが、SEOは以下に検索結果にひっかかりやすくするか というものなので、
そんなものは気にしなくていい ということであれば
作業効率や印刷対応のためにテーブルでつくるものアリかなと思います。
(Floatを多用した長いページは印刷時にくずれやすいです。)

この回答への補足

回答を頂いたみなさん、ありがとうございます。

自分が聞きたいのは、HTML4/5とかの仕様とかそういうのじゃなく、
実際の製作における具体的なことです。

>表であればTable、レイアウトならDivです。
>例えば、カレンダーは表の一種なのでTable。
>料金表や商品早見表などもTable。

確かに、上記のようなものであれば(料金表や、商品一覧など)
は明らかにテーブルにすべきでしょう、
てのは分かります。それなら自分もテーブルにしますよ。

しかし自分が聞きたいのは、

1.
-----------------------
 画像  | テキスト | ←このような配置
-----------------------

2.
-----------------------
 画像  | コメント | 
-----------------------
|
なんらかのコメント |
|
-----------------------
コメント | 画像 | 
-----------------------

このような画像とコメントを配置をするWEBページ(レイアウト)を
させたい場合、例え、WEBページの見た目上の行が1行だったとしても、
複数行あったとしてもこれは、表じゃないからレイアウトにはテーブルを
使うべきじゃない。ということですか?

ちなみに、上の例で画像やテキストの周りに枠線があるとかないとかは
関係なく、配置することに対して、テーブルを使うべきか、divを使うべきかという
質問です。

よろしくお願いします。

補足日時:2010/06/16 20:31
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qhtml の divとtable の役割

html の初心者です。
divで箱を作って、画面のレイアウトをしている人が多いようですが、
僕は、tableを使用しています。
tableでほとんど出来ると思うのですは、
divを使う理由は何なのでしょうか。

ご存知の方がいらっしゃられたら教えて下さい。
よろしくお願い致します。

Aベストアンサー

 少し長いですが、初心者は絶対に必要な知識ですから、頑張って呼んでくださいね。

 ます、初心者でしたら必ず仕様書( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html#toc )を読んでおきましょう。
【引用】____________ここから
本仕様書は様々な方法で利用できるだろう。
・最初から最後まで通読する。
  本仕様書は、HTMLに関する一般表現から始まり、末尾に向けて徐々に技術的で特殊な内容になっていく。
・必要な情報に直接アクセスする。
  できるだけ素早くシンタクスやセマンティクスに関する情報を得るために、オンライン版の仕様書には次の特徴を持たせた。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[About the HTML 4 Specification (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/about.html#h-1.2 )]より

 沢山の有象無象の情報があふれています。その中から正しい情報を得るのは藁の山から針を探すようなものです。最後は仕様書を読むことになります。
 ここに書かれているように、通読してどこに何が書いてあるかを知っておくこと。あとは必要なときに、詳細目次( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html#toc )や要素索引( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/index/elements.html )を利用して直接情報に進んでも良いでしょう。

 あなたの質問に関わる部分は

DIVの項目を読んでみると
 ⇒DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )

table
【引用】____________ここから
単に文書内容を整形する目的だけで表を用いるべきでない。 さらに、見た目のために表が用いられると、その表が大きなディスプレイのあるシステムで作られた場合、表を見るために水平スクロールを強いられることがある。 こうした問題を最小限に押さえるため、著者は文書の整形には表ではなくスタイルシートを用いるべきである。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Tables in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )]より

 ⇒ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )
 などでしょうか??

★HTMLは、ワープロやDTPとは全く異なるものです。(ここを誤解されている)
 文書を読み解き、その文書を構成する要素(部品)に分解して、それぞれがどのような部品--要素であるかをタグを使ってマークアップするメタ言語です。
 <h1>ここはレベル1の見出し</h1>
 <p>ここはひとつの段落で、<strong>ここは重要</strong>です。</p>
 <blockquote>
  <p>ここは引用文で</p>
 </blockquote>
 <ol><!-- ここから序列リスト -->
  <li></li>

というふうに、文書の構造をマークアップして、どのようにプレゼンテーションするかは、全く書きません。
 ⇒構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )
 ですから、読み上げソフトは、見出しは太い男声の声で、重要なところは強い言葉で読んでくれますし、検索エンジンにもどこが見出しで、どこが本文でどこが表かが判ります。
【引用】____________ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )]より

 その上で、パソコンのディスプレイ用には、この様にプレゼンテーションするかをスタイルシートで指定すれば良いのです。

>(画面のレイアウトは)tableでほとんど出来ると思うのです
 は全く間違っています。tableの目的は2次元(以上)のデータを表す要素です。あなたは視角メディアのことしか考えていない。

>divで箱を作って、画面のレイアウトをしている人が多いようですが、
 これも重大な誤りです。!!!---DIVはデザインのためでは決してありません!!!
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ・・・もしそのように使われていたら、「している人が多いようですが、」のサイトも間違っています。

>divを使う理由は何なのでしょうか。
 
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』
 HTML4.01には、実は文書構造を示す要素(タグ)が不足していました。そのためにDIVに関して上記のように書かれていました。
<body>
 <div class="header">
  <h1>見出し</h1>
  ・・・ここは文書のヘッダ・・・
  <div class="nav">
   ナビゲーション
  </div>
 </div>
 <div class="section">
  <p>・・・ここは本文・・</p>
 </div>
 <div class="footer">
  <p>・・ここはフッタ>/p>
 </div>
</body>
 のようにDIVを使うのが本来の使い方であるべきです。
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
★★ところが、これは理解されたとは言いがたく★★

 あなたが、ご存知のように「divで箱を作って、画面のレイアウト」するような使い方がされてきました。!!!!
<div class="contents"><div class="left_box"><div class="main">とかね。見かけたことあるでしょう。

 その反省から、次期HTML5では、文書をよりよく構造化するために、section,article,aside,hgroup,header,footer,nav,figureなどの要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )
 そして、DIVは、「他に適当な要素がないときの最後の手段としてのみ使う」ことになります。
 ⇒Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/2012/CR-html5-20121217/grouping-content.html#the-div-element )
 --著者は、 div 要素を、他に適切な要素がないときなど、最後の手段として使うことを、強く推奨する。---

 たとえば、よく引き合いに出すのですが・・
 ⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
 のソースは、全くシンプルですが、ブラウザの[表示]メニューから[スタイルシート]に進みスタイルシートを選択すると様々にデザインが変わります。ウィンドウサイズを変化させても追随します。印刷プレビューで見ると印刷用に変わります。この様なことはtableでHTMLが作成されていたら、決して出来ませんね。
 
 

 少し長いですが、初心者は絶対に必要な知識ですから、頑張って呼んでくださいね。

 ます、初心者でしたら必ず仕様書( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html#toc )を読んでおきましょう。
【引用】____________ここから
本仕様書は様々な方法で利用できるだろう。
・最初から最後まで通読する。
  本仕様書は、HTMLに関する一般表現から始まり、末尾に向けて徐々に技術的で特殊な内容になっていく。
・必要な情報に直接アクセスする。
  できるだけ素早くシンタクス...続きを読む

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Q文字列が入っているtdを削除せず非表示にしたい

aboutをクラスとする列(以下、about列)を非表示にしようと、次のような設定をしました。

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>


<table>
<tr>
<th class="about">右が1へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト1</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト2</a></td>
</tr>
<tr>


</tr>
</table>

aboutの長さ自体を0にするように設定したため、about列は表示されないはずなのですが、"右が1へのリンクになります"、"右が2への~"と表示されます。
プログラムの動作にかかわるので、about列を削除することなく、CSSなどを設定することでabout列を非表示にしたいのですが、何か上手な方法はあるでしょうか。

よろしくお願いします。

aboutをクラスとする列(以下、about列)を非表示にしようと、次のような設定をしました。

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>


<table>
<tr>
<th class="about">右が1へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト1</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト2</a></td>
</tr>
<tr>


</tr>
</table>

aboutの長さ自体を0にするように設定し...続きを読む

Aベストアンサー

<table summary="なんたらの表">
<caption>なんたらの表</caption>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="ほげほげの表">
<caption>ほげほげの表</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="むにゃむにゃの表">
<caption>むにゃむにゃ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="へんてこな表">
<caption>へんてこ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

だとして、
table{
border-collapse:collapse;
border:solid 1px gray;
}
td,th{border:dotted 1px gray;width:20em;
}
table[summary="なんたらの表"] td,table[summary="なんたらの表"] th{display:none;}
table[summary="なんたらの表"] *+td,table[summary="なんたらの表"] *+th{display:table-cell;}

table[summary="ほげほげの表"] td,table[summary="ほげほげの表"] th{visibility:hidden;}
table[summary="ほげほげの表"] *+td,table[summary="ほげほげの表"] *+th{visibility:visible;}

table[summary="むにゃむにゃの表"] td:first-child,table[summary="むにゃむにゃの表"] th:first-child{display:none;}

table[summary="へんてこな"] td:first-child,table[summary="へんてこな表"] th:first-child{visibility:hidden;}


消滅させるならdisplay:none;→display:table-cell;
存在は残すけど表示させないならvisibility:hidden;→visibility:visibble;

セレクタは適当に・・・
隣接セレクタを使うなら +
第一列なら、擬似クラス:first

<table summary="なんたらの表">
<caption>なんたらの表</caption>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="ほげほげの表">
<caption>ほげほげの表</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="むにゃむにゃの表">
<caption>むにゃむにゃ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>...続きを読む

Qhtml、テーブル内にテーブル。表示位置

htmlで<table>タグを使って テーブルを作成しました。(これをテーブル(1)とします。)
このテーブルのなかに表を作成したいため、テーブル内で<table>タグを使用し表を作成しました。(ここで作成したテーブル(表)をテーブル(2)とします。)
つまり、テーブル(1)の中にテーブル(2)(表)が存在する。といった状況です。

ところがテーブル(2)がテーブル(1)の真ん中に表示されてしまいます。
そこでテーブル(2)のタグに<table align="left" valign="top">というような要素を加えてみたのですが変化がありません。
どうしたらよいでしょうか?
教えてくださいよろしくお願い致します。

Aベストアンサー

> そこでテーブル(2)のタグに<table align="left" valign="top">というような要素を加えてみたのですが変化がありません。

テーブル(2)ではなくてテーブル(1)を次のようにすればテーブル(2)が左に寄ります。

<TABLE> ここはテーブル(1)
<TBODY>
<TR>
<TD align="left">
<TABLE> ここからテーブル(2)
<TBODY>
<TR>
<TD> 

QJavaScriptde途中で、「exit」するには?

function kensaku(){
s_data = document.kaiin_form.input_name.value;

if(!s_data){ alert("キーワードを入れて下さい!"); }

if(s_data != dumy){ ...... }
for(i=st_no;i<=n;i++){
......省略.................;
.......省略................}
}

----------------------------------
3行目で表示されたアラートをOKで閉じても、4行目以下が実行されてしまいます。
3行目でexitするにはどうすれば良いでしょうか?

Aベストアンサー

>関数(kensaku())からは抜けられませんでした。
そうですね、勘違いしていました、f(^^;
すみません。
if(!s_data){
alert("キーワードを入れて下さい!");
return;
}
ですね。

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Q

現在、CSSでホームページを作っているのですが、IEではうまくセンター表示できるのですが、firefoxなどでは左によってしまいます。

bodyに<div align="center">を記載せずにCSSだけでセンターに表示させることは出来ないものでしょうか?ちなみにIEでセンターによってしまうのはバグだと聞いたことがあるのですが、本当でしょうか?

よろしくお願いします。

Aベストアンサー

まぁ、MozillaとIEで表示が違えば大抵IEのバグですが、IEが正解でMozillaが違ってる場合もあります。
今回の件は具体的にどんなんだかわからないので分かりません。

で、基本的なCSSでのセンタリングですが、例えばブロック要素を真ん中に持ってくる場合は、その真ん中に持ってきたいブロック要素自身のマージンでセンタリングします。

例えば、
<div style="width:100px; margin:0 auto 0 auto;">まんなかです</div>
とすると、こいつは親要素に対して左右均等のマージンを取る。つまりセンタリングされます。

ブロック要素の中のテキストやインライン要素をセンタリングするにはtext-alignを使います。
<div style="width:100px; text-align:center;">まんなかです</div>

それと、注意したいのは、一行目の文頭に<!DOCTYPE~>を書かないとIEは互換モードでレンダリングしだしますので、CSS解釈も(ますます)変になりますのでご注意を。

こんな感じで。

No.1の方のサイト、参考になりますよ。私も昔これ見て勉強しました(笑)。

まぁ、MozillaとIEで表示が違えば大抵IEのバグですが、IEが正解でMozillaが違ってる場合もあります。
今回の件は具体的にどんなんだかわからないので分かりません。

で、基本的なCSSでのセンタリングですが、例えばブロック要素を真ん中に持ってくる場合は、その真ん中に持ってきたいブロック要素自身のマージンでセンタリングします。

例えば、
<div style="width:100px; margin:0 auto 0 auto;">まんなかです</div>
とすると、こいつは親要素に対して左右均等のマージンを取る。つまりセンタリングされ...続きを読む


人気Q&Aランキング