divタグの入れ子の意味とdiv内の文字の垂直方向のセンタリングについて
- divタグ内に直接文字列を書いた場合と、divにpを入れ子にしてそのpタグ内に文字列を入れた場合の意味の違いについて述べます。CSSで全てのタグのデフォルトの余白をリセットしている場合でも、入れ子にする意味はありません。
- divタグ内の文字列の垂直方向のセンタリングについて、line-heightを使用する方法について説明します。CSSでdivの高さとline-heightを同じ値に指定すると、文字列が垂直方向に中央寄せされます。他にもtableを使用する方法がありますが、一般的にはline-heightを使用する方法がよく使われます。
- ベストアンサー
質問１．
質問１． divタグ内に直接文字列を書いた場合と、divにpを入れ子にして そのpタグ内に文字列を入れた場合の、意味の違いはありますか？ 但し、CSSで *{ margin:0px; padding;0px; } として、全てのタグのデフォルトの余白をリセットしているのが条件です 質問２． それとdiv内の文字列の垂直方向のセンタリングについて。 ****************************************************************************** 質問１の内容（入れ子の意味について） <div>あいうえお</div> と <div> <p>あいうえお</P> </div> これって、CSSで子孫セレクタや限定セレクタを利用するか、 基本セレクタでPタグを定義し、それを利用する以外に わざわざ入れ子にする意味はないですよね？ ****************************************************************************** 質問２の内容（div内の文字列の垂直方向のセンタリング） <div class="style">あいうえお</div> ** CSS ** .style{ height: 50px; width: 200px; border: 1px solid #666666; line-height: 50px; ←ここ！！これしか縦方向の中央寄せできないの？ }に vertical-align: middle;だと 駄目なんですよね。。 で、ネットあったのが、divの高さ50pxに対して、line-height: 50px; を指定すると、よくわかんないけど垂直方わ向中央にはくるんですけどね。。 これしか方法はないんでしょうか？ divの中にわざわざtableを入れて、縦方向にセンタリングもありえますが、そんなの する人いないだろうし。どんなもんでしょうか？ よろしくお願いします！
- method2027
- お礼率22% (18/79)
- HTML
- 回答数5
- ありがとう数11
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
＞これって、CSSで子孫セレクタや限定セレクタを利用するか、 ＞基本セレクタでPタグを定義し、それを利用する以外に ＞わざわざ入れ子にする意味はないですよね？ それはdivに対しては言えますが<p>に関しては言えません。根本的な部分を理解されていないようです。 <p>はparagraph(段落)であることをマークアップするタグです!!HTMLは、文書の構造をマークアップする言語です。<div>なんたらかんたら</div>は、divは汎用ブロックと言い、もっぱらCSSで使用するためのマークアップと言ってよいでしょう。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 各々、内容が行内であるか(SPAN)ブロックレベルであるか(DIV)は定めるが、他のプレゼンテーション的語彙を示すことはない。 従って著者は、この両要素をスタイルシートやlang属性等と併用することで、HTMLを自身の必要や好みに応じられるようにできる。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#edef-DIV )］より したがって<div>なんたらかんたら</div>と書いても文法上(下記参照)はエラーにはなりませんが、HTMLの趣旨からは逸脱しています。 <!ELEMENT DIV - - (%flow;)* -- generic language/style container --> ^^^^^^^何でも入る。 <!ELEMENT P - O (%inline;)* -- paragraph --> ^^^^^^^^^^行内要素のみ <!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body --> ^^^^^^ブロック要素は入るけどinline要素はおけない ・・・divは言外にbodyと同じ意味を持つと考える方が良いです。 ＞vertical-align: middle;だと 駄目なんですよね。 vertical-alignは行ボックス内のインラインブロックのためのプロパティです。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから このプロパティは、行ボックス内における、インラインボックスの垂直方向の位置を指定する。 以下の値は、親インライン要素、あるいは匿名インラインボックスを生成する親ブロック要素を参照できる場合にのみ意味を持つ。 そのような親を持たない要素に対しては何の効果も無い。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［視覚整形モデル詳細( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visudet.html#propdef-vertical-align )］より
その他の回答 (4)
- think49
- ベストアンサー率59% (285/482)
> divタグ内に直接文字列を書いた場合と、divにpを入れ子にしてそのpタグ内に文字列を入れた場合の、意味の違いはありますか？ HTMLの論理構造とCSSの視覚効果は分けて考えてみてください。 divは「グループ化」 pは「段落」 の意味があります。 divはあまり意味のない要素ですが、pには段落という重要な役割があるので異なりますね。 > vertical-align: middle;だと 駄目なんですよね。。 display: table-cell; で使えます。 (※全角空白は半角空白に置換してください) ------- <style type="text/css"><!-- .test { display: table-cell; /* 要IE8+ */ vertical-align: middle; height: 50px; border: solid 1px #ccc; } --></style> </head> <body> <p class="test">あいうえお</p> ------- 視覚整形モデル http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#display-prop
- metametamu
- ベストアンサー率51% (153/295)
＞質問１ pは段落のタグですがdivはそのままでは意味を持ちません。 なので、divの中にp要素がある場合は中のテキストは一つの段落という意味が与えられます。 もしもdivの中にテキストを書いた場合はタグとしての意味は付加されません。 ＞質問２ 高さが50pxで固定ならばline-heightが一番安定します。 もしも高さがコンテンツごとに可変するような場合はheightやline-heightを使用せず、上下のpaddingを指定して中央に寄っているように見せかけることができます。
- 藤田 朋郎（@hujitomo）
- ベストアンサー率54% (39/71)
質問１ div は『入れ物』だし、p は『段落』。たとえブラウザの表示が同じだとしても、その表す意味が全く違います。こんな質問をするという事はそれぞれの要素の意味を全く理解していないのでしょう。htmlの要素は文書の論理構造を表す為に使用するものです。見た目の為に使用するものではありません。 ↑これが理解できないと SEO 的なコーディングがいつまでたっても身に付かない。 質問２ CSSで縦方向のセンタリングをブロックレベル要素に指定する方法は残念ながらありませんね。例としてあげた line-height を利用したり、 padding で指定するなどの代替方法を用いるしかないでしょう。
- bakakyatap
- ベストアンサー率38% (115/299)
質問者は、きっと若年HTMLコーダーの方か、素人の方かと思います。 ＞わざわざ入れ子にする意味はないですよね それは、あまりにも固定観念を持ちすぎています。この発言だと、デザインのみを意識しての発言かと。 もちろんデザイン的にも違いますよね。 あなたのような使い道しかないのならなぜタグ名が違うのでしょうか? 当初から使い道が違うからです。HTMLでのタグ名はフォーマットを意識して作成されています。これはDOMから見ると良く分かります。使えるメソッド、プロパティ、効果が違ってきます。DOMはフォーマットを意識していません。DOMは階層構造であり、そのしきたりを守れば、フォーマットを無視してどんな構造にもできます。 たぶんその事を指しても、言っているのかもしれませんが、 DIV＝入れ物、P＝段落です。段落とは、入れ物じゃないですよね。DIVは文書フォーマットとは関係なく作成された、どちらかと言うとSGML（XML）的なタグです。 入れ物なので、使い方は人それぞれ。例えば、風呂敷みたいなものです。一枚の布が、箱としても、封筒としても、包み紙としても（プレゼント用の）、いろんなものに変化しますね。 使い道はあなたしだいです。 たぶん、あなたはサーバーサイドプログラムをほとんど経験していないでしょう。特に業務アプリとしてのWebデザインをした事の無い方は、ちょっと理解するのは難しいかもしれません。 ”DHTMLとは” で検索してみてください。それでマイクロソフトのHTMLリファレンスサイトを除いたら、すべて解決します。
関連するQ&A
- CSSに関する初歩的な質問です
CSSを作成したのですが、１つのセレクタだけIEとFirefoxで表示にズレが生じてしまいました。 padding:0px 0px 0px 2px ; とするとこのセレクタのDIVタグがIEでは1px左へずれてしまいます。 padding:0px 0px 0px 3px ; とするとこのセレクタのDIVタグがFirefoxでは1px右へずれてしまいます。 １つのCSSファイル内で、同じセレクタが両方のブラウザに対応できるようにすることはできませんでしょうか。 よろしくお願いします。
- ベストアンサー
- HTML
- divにも同じフォントスタイルを適用したい
現在 p { color : #222222;} p { font-family: Arial, Helvetica, sans-serif;} p{ margin: 1px 0px 1em 0px; font-size:95%; line-height:103%; } このような指定をしてあります。 しかしセンタリングなどに <div style="text-align:center;">のタグを使用するとセンタリングはされますけれど、上記CSSが反映されませんよね。 あちこちのHPを参考に色々試行錯誤をしていますけれど上手く反映されません。 div { color : #222222;} div { font-family: Arial, Helvetica, sans-serif;} 以下略 div.test 等に変えても同じです。 どこがダメなのでしょうか？
- ベストアンサー
- HTML
- CSSのfilterでテキストまで透明化される
CSSのfilterプロパティで背景色だけでなくテキストまで透明化されてしまいます。 以下のように親divの中に子divを造り、その子divにテキストを入力し、 親divに設定した背景画像が子divに透き通って見えるように 子divにfilterプロパティを設定しました。 子divの背景色（白）が透明化され親divの背景画像が見えるようになったのはいいのですが、 背景色（白）だけでなくテキスト文字まで透明化されてしまいます。 テキスト文字だけ透明化されないように設定したいです。 ブラウザチェック：windows IE 8 です。 ******************************************************* 【XHTML】 <div class="test1"><div class="test2">テキスト</div></div> 【ＣＳＳ】 .test1{ width:300px; height:300px; background-image:url("image.jpg"); } .test2{ width:150px; height:50px; background-color:#ffffff; filter:alpha(opacity=30); ←背景色（白）が透明ぽくなるように設定 } ******************************************************* テキスト文字まで透明化されるので、さらにそのテキストをpタグで囲ってみましたが、 それでもテキストが透明化されている（親divのfilterがpタグまで継承されているから？）ので pタグにfilterプロパティで不透明を１００に戻すような設定をしてみましたが適用されません。 ************************* 【変更後】 *********************** 【XHTML】 <div class="test1"><div class="test2">テキスト</div></div> 【ＣＳＳ】 .test1{ width:300px; height:300px; background-image:url("image.jpg"); } .test2{ width:150px; height:50px; background-color:#ffffff; filter:alpha(opacity=30); ←背景色（白）が透明ぽくなるように設定 } p { filter:alpha(opacity=100); ←テキスト文字まで透明化されるのでpタグで囲って不透明１００に設定 } ******************************************************* ご指導のほどよろしくお願いします。
- ベストアンサー
- CSS
- IE6だとpaddingで指定したぶんだけ消えてしまう。。。
いま、CSSでサイトつくっているのですが、IE6だけpaddingで指定した分だけ、画像（背景）が足りません。 <h2>と<p>をくっつけて一枚の背景画像を作ろうとしています。 解決するには宣言を変えるか、CSSハック？をする、もしは<div>を入れ子するしかないのでしょうか？ また、<div>を入れ子にするのはよくないと教えていただいたのですが、どれくらいまでが許容範囲でしょうか？ いつもwrapperで囲っているので、大枠のレイアウトを作るだけでもすでに１つ入れ子状態なんですが・・・ <h2>あああああああああああああああああ</h2> <p>あああああああああああああああ </p> .h2 { background-image: url(img/flow6_01.gif); height: 37px; width: 650px; text-indent: -9999px; float: left; margin-bottom: 0px; } #p { width: 625px; height: 120px; float: right; background-image: url(img/flow1_02.gif); margin: 0px; margin-bottom: 10px; background-repeat: no-repeat; padding-left: 25px; }
- ベストアンサー
- HTML
- イメージタグはタグで囲むべき？
CSSを使ってサイトを作成しています。 気になった事があったので質問させてください。 テキスト（文字）を入力する祭は、<p>～</p>・<div>～</div>等のタグで囲むかと思います。 <img src="" width="" height="" alt="" /> 上記のようなイメージタグは、<p>～</p>・<div>～</div>等で囲む必要はあるのでしょうか？ 囲まなくてはいけないものなのでしょうか？ <p>～</p>・<div>～</div>タグにスタイルをつけていなければ、 囲んでも囲まなくても表示は変わりませんが、HTML的というか文法的に囲むべきなのでしょうか？ ※<p>タグは「reset.css」で上下改行なしにしてあります。 宜しくお願いします。
- ベストアンサー
- CSS
- text-alignの解除の方法
text-alignの解除の方法ってありませんか？ 例えばhtml内に以下のタグがあるとして、 <div style="text-align:center;"> <div style="width:100px; height:120px; background-image:url(○○○.jpg)"> <div style="width 50px; height: 60px; position:absolute; margin-top: 20px; margin-left:5px"> <p>あいうえおあいうえお</p> </div> </div> </div> このような場合に<div style="width:100px; height:120px; background-image:url(○○○.jpg)">から、対応している</div>のtext-alignを解除する方法ってありませんか？ IEの標準には対応するのですが、互換だとブロック要素までもがセンタリングされてしまうため困っています。 分かりづらくて申し訳ありません。
- 締切済み
- HTML
- cssのfloatについて質問があります。
cssのfloatについて質問があります。 floatがなかなか理解できずに悩んでおります。 下記のようなcssがあり、同じブロック要素でも table,pなどは右に回りこみ、divボックスはfloatを指定しないと floatボックスの下に入ってしまうのをなんか理解できません。 初歩的なことかもしれませんが、 どなたかアドバイスいただけると助かります。 宜しく尾根会い致します。 <html lang="ja"> <head> <title></title> <style type="text/css"> #con { width: 800px; border: solid 1px black; } .left { width: 300px; height: 300px; float: left; border: solid 1px blue; } .right { width: 200px; height: 200px; border: solid 1px red; } table { width: 100px; height: 100px; border: solid 1px green; } p { border: solid 1px yellow; } </style> </head> <body> <div id="con"> <div class="left"> </div> <table> <tr><td>TABLE</td></tr> </table> <p>ppppp</p> <div class="right"> </div> </div> </body> </html>
- ベストアンサー
- HTML
- 外部CSSの入れ子によるWEBページ作成について
私はWEBページ作成に関しては初心者です。 現在私は、外部CSS入力による入れ子というBOXを用いたWEBページを作成しています。 まず上部に、三つ入れ子を用意し、左右の入れ子にロゴマークのようなものを入れて、中央の入れ子に題名を入れようと思い、一つ目の入れ子に画像を入れ、その隣に新しい入れ子が回ってくるようにしようとしましたが、真下に回るばかりで全く隣に回りません。どうするば良いのでしょうか? そのCSSの内容とプログラムは以下の通りです。 ↓ CSS body{ background-color:#ffebcd; width:1000px;height:900px; } .box1{ padding-top:2%;padding-left:2%; padding-right:2%;padding-bottom:2%; background-color:#7cfc00; width:100px;height:100px; } .box2{ padding-top:3%; background-color:red;color:white; width:800px;height:100px; text-align:center;font:large; } プログラム <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>○○○</title> <link rel="stylesheet" type="text/css" href="css/index.css" /> <body> <div class="box1"> <p> <img src="./images/○○○.jpg" width="103" height="103" alt="○○○.jpg"> </p> </div> <div class="box2"> <h1>a</h1> <p> </p> </div> </body> </head> </html> よろしくお願いします。
- ベストアンサー
- CSS
- divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。
divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・？
- ベストアンサー
- CSS
- HTMLで改行されません
下記のように書いた場合、２バイト文字（たたたたたたたたたたた～）は200pxの幅で改行して表示されますが、 １バイト文字（aaaaaaaaaaaaaaaaaaaa～）は改行されず200pxの幅を越えて表示されます。 １バイト文字も改行されるようにするにはどうしたらいいんでしょうか？ HTML------------------------- <div id="div1"> <p>たたたたたたたたたたたたたたたたたたたたたたたたたききききききききききききききききききききききききききき</p> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> たたたたたたたたたたたたたたたたたたたたたたたたたききききききききききききききききききききききききききき aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div> css--------------------------- #div1 { width: 200px; height: 300px; background: #00ffff; }
- ベストアンサー
- CSS
