重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

質問１．

解決済

  • 質問者：method2027
  • 質問日時：
  • 回答数：5件

質問１．
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を入れて、縦方向にセンタリングもありえますが、そんなの
する人いないだろうし。どんなもんでしょうか？


よろしくお願いします！

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.4ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

＞これって、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-html4 … )］より

　したがって<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 … )］より
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： think49
  • 回答日時：

> 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 …
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： metametamu
  • 回答日時：

＞質問１


pは段落のタグですがdivはそのままでは意味を持ちません。
なので、divの中にp要素がある場合は中のテキストは一つの段落という意味が与えられます。
もしもdivの中にテキストを書いた場合はタグとしての意味は付加されません。

＞質問２
高さが50pxで固定ならばline-heightが一番安定します。
もしも高さがコンテンツごとに可変するような場合はheightやline-heightを使用せず、上下のpaddingを指定して中央に寄っているように見せかけることができます。
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： hujitomo
  • 回答日時：

質問１


div は『入れ物』だし、p は『段落』。たとえブラウザの表示が同じだとしても、その表す意味が全く違います。こんな質問をするという事はそれぞれの要素の意味を全く理解していないのでしょう。htmlの要素は文書の論理構造を表す為に使用するものです。見た目の為に使用するものではありません。
↑これが理解できないと SEO 的なコーディングがいつまでたっても身に付かない。

質問２
CSSで縦方向のセンタリングをブロックレベル要素に指定する方法は残念ながらありませんね。例としてあげた line-height を利用したり、 padding で指定するなどの代替方法を用いるしかないでしょう。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： bakakyatap
  • 回答日時：

質問者は、きっと若年HTMLコーダーの方か、素人の方かと思います。



＞わざわざ入れ子にする意味はないですよね

それは、あまりにも固定観念を持ちすぎています。この発言だと、デザインのみを意識しての発言かと。

もちろんデザイン的にも違いますよね。

あなたのような使い道しかないのならなぜタグ名が違うのでしょうか?

当初から使い道が違うからです。HTMLでのタグ名はフォーマットを意識して作成されています。これはDOMから見ると良く分かります。使えるメソッド、プロパティ、効果が違ってきます。DOMはフォーマットを意識していません。DOMは階層構造であり、そのしきたりを守れば、フォーマットを無視してどんな構造にもできます。

たぶんその事を指しても、言っているのかもしれませんが、

DIV＝入れ物、P＝段落です。段落とは、入れ物じゃないですよね。DIVは文書フォーマットとは関係なく作成された、どちらかと言うとSGML（XML）的なタグです。

入れ物なので、使い方は人それぞれ。例えば、風呂敷みたいなものです。一枚の布が、箱としても、封筒としても、包み紙としても（プレゼント用の）、いろんなものに変化しますね。

使い道はあなたしだいです。

たぶん、あなたはサーバーサイドプログラムをほとんど経験していないでしょう。特に業務アプリとしてのWebデザインをした事の無い方は、ちょっと理解するのは難しいかもしれません。

”DHTMLとは”

で検索してみてください。それでマイクロソフトのHTMLリファレンスサイトを除いたら、すべて解決します。
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

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

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

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

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

おすすめ情報