• 締切済み

divの中に文字

<div id="aaa">1</div> <div id="bbb">アアア</div> などと書いても問題ないですか?

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

 divは汎用ブロックと呼ばれるもので、HTMLで定められている要素では足りないときにclass名と組み合わせて使用されます。  復習ですが、HTMLは、その文書がどのような構成要素で成り立っているかをマークアップするものです。段落ならp要素、見出しならh1~ h6、引用文ならblockquoteをそれぞれ<p><h1>~<h6><blockquote>、また重要なフレーズでしたらstrong、引用語句でしたらq・・これらはそれぞれ<strong><q>で括られます。ここで前者はブロック要素で、後のものはインライン要素と分けられます。ブラウザの多くは、ブロック要素はその前のブロックとはすこし間を広げて表示されます。  それぞれの要素には、どんな要素を含みうるかが規定されています。たとえば<p></p>内にブロック要素は含むことができません。  div要素の中には、ブロック要素もインライン要素も含むことができます(文法的には誤りではないです)が、本来の趣旨からすると、<div>の中にテキストだ突然入るのは誤りです。本来は、7.5.4要素のグループ化: DIV要素とSPAN要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )にあるように、 <DIV id="client-boyera" class="client"> <P><SPAN class="client-title">顧客情報:</SPAN> <TABLE class="client-data"> <TR><TH>名:<TD>Boyera</TR> <TR><TH>姓:<TD>Stephane</TR> <TR><TH>電話:<TD>(212) 555-1212</TR> <TR><TH>Email:<TD>sb@foo.org</TR> </TABLE> </DIV> とかになるはずですね。  もし、行間を広げるためにdivを使うのでしたら、それは誤りです。あくまで、HTMLは文書をそれが構成されている要素をマークアップするためのもので、デザイン(プレゼンテーション)のためではありません。必要ならスタイルシートで調整しましょう。

全文を見る
すると、全ての回答が全文表示されます。
回答No.1

こんばんは。 問題ありません。 ただし、 他のタグが適切である場合は(例えば段落などは<p>)それでマークアップしたほうがいいです。 下記サイトでチェックを行えますので確認してみてください。 http://validator.w3.org/

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • DreamweaverでCSSの「div id」設定方法

    DreamweaverMXを使ってCSSを独学している初心者です。OSはWindowsXPです。 以下のようなタグを使って作る時 <div id="aaa">の部分を、コード部分に直接タグを挿入する以外の、Dreamweaverの使い方があれば、お教えいただますでしょうか。 (煩雑になるのでタグの<title>より上は省略して載せています) <style type="text/css"> <!-- #aaa { background-color: #CCFFFF; width: 600px; } --> </style> </head> <body> <div id="aaa"> <p>表題</p> <p>例文ああああああああああああ</p> <p>事例</p> <p>例文いいいいいいいい </p> </div> </body> </html> 「#aaa」というスタイルは「CSSスタイル」パネルから新規CSSスタイルのセレクタタイプを「詳細(ID,コンテキストセレクタなど)を選択し、セレクタに「#aaa」と入力してスタイル定義で設定しました。 ・スタイル名が「.aaa」ではダメで「#aaa」でなくては出来ない点と、  <div id="aaa">部分が<div id="#aaa">ではダメな理由の知識もありません。 ・<p class="bbb">というスタイルの設定を、セレクタタイプを「クラス(すべてのタグに適用可能)」にして「.bbb」という名前にして設定したスタイルは 「文章のスタイルを適応したい部分を選択→スタイルを選択して右クリック→適応」で<p class="bbb">例文ううう</p>のようなタグが挿入されますが 「div id」の場合は同じような手順では出来ないのでしょうか? 私が持っているDreamweaverMXの解説書にはこのあたりのことが記載されていません。もしお勧めの本があれば そちらもお教えいただけると幸いです。 どうぞよろしくお願いいたします。

  • <div>が2つ必要なのはなぜ?

    <div>が2つ必要なのはなぜ? いろんな人のhtmlソースを見てると <div id="container"> <div id="content"> 本文・・・・・ </div> </div> のように divを2つ使っていますが、なぜでしょうか? divが1つだけだと何か問題あるのでしょうか? よろしくお願いします。

  • divを横に並べる方法

    <div id="aaa">aaaaaaaaaaaaaaaaa</div> <div>iiiiiiiiiiiiiiiiiiii</div> <div>uuuuuuuuuuuuuuuuu</div></td> この状態だとDivが縦に三つ並んでいるのですが、これを横に一列に並ばせたいのです。 使っているソフトはDreamweaver8でCSSを使い作成しています。 各Divタグのボックスの設定で試行錯誤していますが、全く解決しません。アドバイス宜しくお願いします。

    • ベストアンサー
    • CSS
  • C# htmlの一部の文字取得

    C#のwebBrowserで表示されているtextを表示させたいです。 htmlが <div class="AAA"> BBB </div> となっており、BBBのtextを取得したい場合、 HtmlElementCollection elem = webBrowser0.Document.GetElementsByTagName("div");   foreach (HtmlElement element in elem)   {    if (element.GetAttribute("class") == "AAA")  {  str = element.InnerText;  } } と、しましたが、上手く取得出来ません。 ご教授頂ければ助かります。

  • この場合のCSSの記述を教えてください!

    現在コーディング中なのですがIE6,7では問題ないのですが、Firefox,OPERA,netscapeにてずれて表示されてしまいます。 鯨飲がさっぱり分からない状態で・・どなたかお分かりになる方いましたらご教授願います(泣) ■html <div id="aaa"> <div id="bbb">コンテンツ</div> <div class="ccc">コンテンツ</div> </div> ■css #aaa { width: 640px; height: 300px; float: left; } #bbb { width: 640px; height: 150px; background-image: url(images/背景画像.gif); background-repeat: no-repeat; } .ccc { width: 640px; height: 150px; } ■状況 640px×300px(aaa)の枠の中に(bbb,cccを)収めたいのに300を超えて(bbbの上部に約100px程度のが出来る)表示されてしまう。 (bbbの背景画像サイズは640px×150px) ■いじってみて bbbに「border: 1px #000000 solid;」を追加するとスペースはなくなる。 以上が状況です。よろしくお願いいたします!

  • jqueryで ディレクトリ(ページ)のハイライト

    <div id="tab"> <div class="tab"><a href="/aaa/aaa/">あああ</a></div> <div class="tab"><a href="/aaa/bbb/">いいい</a></div> <div class="tab"><a href="/aaa/ccc/">ううう</a></div> </div> このようなリンクがあり  例えば現在のページが /aaa/bbb/ を開いている時 <div class="tab"><a href="/aaa/aaa/">あああ</a></div> <div class="tab no_link">いいい</a> <div class="tab"><a href="/aaa/ccc/">ううう</a></div> </div> このようにクラスの追加とリンクを削除(?)するにはどうすればいいのでしょうか? http://www.webopixel.net/javascript/416.html こちらの 「url-parser」を使って現在位置の取得はできるのですが クラスの追加とリンクの削除方法が分からず詰まってしまっています。 よろしくお願いします。

  • 大divの中に小divを配置して回り込ませる方法。

    大divの中に小div3つを配置したいのですが、回り込み及び、小divの枠線の表示ができません。配置は大div clearの中の左側にdiv menu、右側にdiv contents、下部にdiv footerを配置したいと思っていますが、回り込みができず、表示したい箇所は下記のように表示されてしまいます。 • xxxx • xxxxx • xxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxx 更にliタグの・を消したいのですが、cssにlist-style-type:noneと記述しても消すことができませんでした。 記述のどこに問題がありますか? ご教授お願い致します。 (css) div#image {margin-left : auto ; margin-right : auto ;width:800px;border:solid 1px #660000;} div#container {margin-left : auto ; margin-right : auto ;width:800px;height:30px;background-color:#000000;border:solid 1px #660000;} h1 {margin:0px;color:#330000;font-family:Geogia,Times New Roman,sans-selif;} h2 {font-size:18px;padding-left:20px;padding- top:5px;margin:0px;color:#ffffff;font-family:Geogia,Times New Roman,sans-selif;} div#clear{border:solid 1px #660000;margin-left : auto ; margin-right : auto ;width:800px;height:1500px;background-color:#ffffff;] ul {border:1px solid #660000;} li {list-style-type:none;} h3 {font-color:#ffffff;} p {font-color:#ffffff;} div#menu {border:solid 1px #660000;width:100px;height:200px;float:left;} div#contents {border:solid 1px #660000;width:500px;height:700px;float:right;} div#footer {border:solid 1px #660000;width:700px;height:100px;clear:both;} (html) <!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"> <head> <meta http-equiv="content-type" content="text/html;charset=Shift_JIS"/> <title>xxxxxxx</title> <link href="./style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="image"> <h1><img src="xxxxxx.jpg" alt="xxxxxxxxx" /></h1> </div> <div id="container"> <h2>xxxxxxxxxxx </h2> </div> <br> <div id="clear"> <div id="menu"> <ul> <li> xxxxxx </li> <li> xxxxxx </li> <li> xxxxxx </li> </ul> </div> <div id="contents"> <h3>xxxxxxxxxx</h3> <p>xxxxxxxxxxx</p> <p>xxxxxxxxxxx</p> <br> <p>xxxxxxxxxxxxxxxxxx</p> </div> <div id="footer"> <p>xxxxxxxx</p> </div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • シェルスクリプトで読み込んだ文字列の区切り文字以降の文字列を取得したい

    ちょっと説明が難しいのですが aaa = bbb こういう文字列の右側のbbbを取り出したいのですが可能ですか? 全てこのようなら問題ないのですが、前後のスペースに問題があります _aaa = bbb や aaa=bbb aaa =__bbb アンダーバーはスペースのかわりです。 のように前後にスペースが1つ2つ入っていたり抜けていたりします。 aaa = bbb だったら i=`echo | sed 's/aaa\ =\ //'` のようにして取得できていますが、その他の処理がうまくできません そもそもシェルスクリプトでこのような処理は無理なのでしょうか? perl ではできたのですができればシェルスクリプトで完結させたいのです。 よろしくお願いします。 使っているシェルはzshです。

  • dlタグの中にdivは使える?

    dlタグの中で、dtタグとddタグを一つのdivで囲ってもよいのでしょうか?? 以下のようなかたちなのですが・・・。 使い方として間違っているのでしょうか?? ↓ ------------------------------------------------ <dl> <div class="aaa"> <dt>タイトル01</dt> <dd> <h4>説明文説明文説明文説明文説明文説明文</h4> <p><img ・・・・・></p> </dd> </div> <div class="aaa"> <dt>タイトル02</dt> <dd> <h4>説明文説明文説明文説明文説明文説明文</h4> <p><img ・・・・・></p> </dd> </div> <div class="aaa"> <dt>タイトル03</dt> <dd> <h4>説明文説明文説明文説明文説明文説明文</h4> <p><img ・・・・・></p> </dd> </div> </dl> ------------------------------------------------ dlタグの中には直接dtタグとddタグしか入れることができないということのようですが、 これはdivは入れられないということになるのでしょうか?? (dtはインライン要素のみ、ddはブロック要素もインライン要素も使えるということなので、 ddの中ではdivが使えると思うのですが・・・。) また、もしdivで囲えないとしたら、 今回の場合は、それぞれを一つのdlで囲ってしまうべきなのでしょうか?? ご存知の方いらっしゃいましたら、よろしくご指導ください。お願いします。

    • ベストアンサー
    • CSS
  • <div ~ </div> で囲まれたテキスト文字を取得する方法はあり

    <div ~ </div> で囲まれたテキスト文字を取得する方法はありますか? 「 <div class="TEST" id="TEST">?</div> 」 上記のような、?部分の表示内容によって、処理を分けたいのです。

このQ&Aのポイント
  • LBT-TWS10 ブルートゥースワイヤレスイヤホンの右側の音が聴こえなくなりました。充電後に再生しようとしたところ、右側の音が出なくなりました。
  • LBT-TWS10 ブルートゥースワイヤレスイヤホンの使用中に、突然右側の音が聴こえなくなりました。充電後も同様の状況が続いています。
  • LBT-TWS10 ブルートゥースワイヤレスイヤホンを使用している際に、右側の音が急に聴こえなくなりました。再充電後も問題は解消されません。
回答を見る