ベストアンサー ※ ChatGPTを利用し、要約された質問です(原文:あるタグから対応するタグまでを検出する方法) PHPを使ってHTMLの中の特定のタグを検出する方法 2009/06/20 15:35 このQ&Aのポイント PHPを使用して、HTML内の特定のタグを検出する方法について知りたいです。具体的には、<div id="foo">に対応する</div>を検出する方法を教えてください。困っているため、アドバイスをいただきたいです。 あるタグから対応するタグまでを検出する方法 PHP を使って以下のような html の中にある <div id="foo"> に対応する </div> を検出するにはどうしたら良いでしょうか? <html> <head></head> <body> <div id="wrap"> <div id="foo"> <div> <div> <div> </div> </div> </div> <div> </div> </div> </div> </body> </html> これが思いつけず、先に進むことができません。 かなり困っていたので質問させていただきました。よろしくお願い致します。 質問の原文を閉じる 質問の原文を表示する みんなの回答 (1) 専門家の回答 質問者が選んだベストアンサー ベストアンサー saintandre ベストアンサー率31% (194/607) 2009/06/20 16:22 回答No.1 その昔に本で読んだけれども面倒で実際に作って見たことがない処理ですが。 文字列を最初から調査して<div ...>が見つかったら調査したところまでを配列に格納 </div>が見つかったら次に<div ...>か</div>が出現するまでを同じく配列に格納 する処理を書きます。 うまく動けば以下のような配列ができます。 $a[0] = "<html>\n<head></head>\n<body>\n<div id=\"wrap\">"; $a[1] = "\n<div id=\"foo\">"; $a[2] = "\n<div>"; $a[3] = "\n<div>"; $a[4] = "\n<div>"; $a[5] = "</div>\n"; $a[6] = "</div>\n"; $a[7] = "</div>\n"; $a[8] = "<div>"; $a[9] = "\n</div>\n"; $a[10] = "</div>\n"; $a[11] = "</div></body></html>"; これさえ完成すれば (n)番目の<div>に対応する</div>は(count($a) - n - 1)番目 内部の要素は(n-1)番目から(count($a) - n - 2)番目まで と簡単に求めることができます。 質問者 お礼 2009/06/22 01:11 素晴らしい回答をありがとうございます。 素晴らしい案ですね…試したくてうずうずしてきました! 広告を見て全文表示する ログインすると、全ての回答が全文表示されます。 通報する ありがとう 0 カテゴリ [技術者向] コンピュータープログラミング・開発PHP 関連するQ&A ブロックレベル要素内ブロックレベル要素のmargin-topが効かない <html><head><style> *{ margin:0; paddgin:0; border:none; } div#wrap{ background:#BBB; width:600px; height:900px; margin:30px auto; } div#header{ background:#999; width:150px; height:60px; margin:30px; } </style></head><body> <div id="wrap"> <div id="header"> </div> </div> </body></html> 例えばこの用な場合で、divの中にdivが入っている場合など…中に入っているdiv要素のmargin-topが効きません。原因がよくわらないのですが、どのような条件の時にmargin-topは効かなくなるのでしょうか?また解決策はどのようなものがあるでしょうか?このようなケースでmargin-topが効かなくなったのが二度目でどうしても気になったので質問させていただきました。よろしくお願いします。 objectタグを使って背景を透明にしたいのですが objectタグを使ってindex.html内にmenu.htmlを表示させたのですが、呼び出したmenu.htmlの背景が白くなってしまいました。 個人的には重なっても背景を透明にし、index.htmlが見えるようにしたいと考えています。 対応策はあるでしょうか?お願いします。 【index.html】 <style> div#container { background: url(bg_container.jpg); } </style> </head> <body> <div id="container"> <object type="text/html" data="menu.html" width="200px" height="570px"></object> </div> </body> 【menu.html】 <style> body{ margin: 0; padding: 0; overflow: hidden; border: none; } div#menu_in { width: 200px; height: 570px; } </style> </head> <body> <div id="menu_in"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> タグで、submitさせる方法について こんばんは。いつもお世話になります。 input type='submit'を、画像を使ってロールオーバーで実行したいのですが、 うまくいきません。1)は、OKです。2)と3)は、ダメでした。 1)にある、name='delete_msg' が重要な鍵ですが、 それをJavaScriptでどう扱えば良いのかわかりません。 3)の<div id='delete' ..... onclick='javascript:....'>Delete</div>で実行させる場合、 function pmDelete()にどう書けば良いのか教えてください。 よろしくお願いします。 ------(例:ここから)----------------------------- <html><head> <script type='text/javascript'> function pmDelete(){ document.mSg.submit(); } </script> <style type='text/css'> div#delete { float: left; background-image: url(page_up.gif); text-indent: -1000em; overflow: hidden; cursor: pointer; } div#delete:active { background-position: 0 -20px; } </style> </head> <body> <form name='mSg' id='mSg' action='index.php' method='post'> <input type='checkbox' id='msg_id[]' name='msg_id[]' value='10' />111<br /> <input type='checkbox' id='msg_id[]' name='msg_id[]' value='10' />222<br /> <input type='checkbox' id='msg_id[]' name='msg_id[]' value='10' />333<br /> 1)<input type='submit' name='delete_msg' value='Delete' /><br /> 2)<input type='submit' value='Delete' /><br /> 3)<div id='delete' name='delete' onclick='javascript:pmDelete();'>Delete</div> </form></body></html> ------(例:ここまで)----------------------------- ネットワークエンジニアとは?技術職の未来を考える OKWAVE コラム PSPのWebブラウザで、動的にタグ入の文字を挿入するにはどうしたら良 PSPのWebブラウザで、動的にタグ入の文字を挿入するにはどうしたら良いですか? <div id="aaa">ここを変える</div> function change(){ document.getElementById('aaa').innerHTML="<b>foo</b>"; } としても、<div>の中身が太文字のfooとならずに、<b>foo</b>となってしまいます。 <div id="aaa">ここを変える</div> function change(){ var aaa=document.getElementById("aaa"); aaa.firstChild.nodeValue='<b>foo</b>'; document.body.appendChild(aaa); } としても結果は同じでした。 これを太字で表示させる方法はありますか? ヘッダーとフッターを画面いっぱいにする方法について 添付画像のようにヘッダー部とフッター部だけを画面いっぱいにしたいと思っています。 HTMLはおおよそ以下のような構成になっています。 CSSでは <div id="container">に対して以下のように記述しています。 --------------------------------------- #container{ width:1000px; margin: 0,auto; } --------------------------------------- HTML内のheaderやfooterを<div>で囲むwrapを作り、それらにwidth: 100%;とCSSに記述してやればうまくいくような事を聞きましたがうまくいきませんでした。 それほど複雑な構成ではないシンプルなタグ構造だと思います。 ヘッダーとフッターの幅を添付画像のように画面いっぱいに広げるにはHTML, CSSにどのような記述をすればいいのでしょうか? ご存知の方いらっしゃいましたら宜しくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル<title> </head> <body> <div id=container> <header> ヘッダー </header> <nav> </nav> <main> </main> <footer> フッター <footer> </div> </body> </html> bodyタグの範囲について bodyタグの範囲について 質問させてください。 HTMLとJavaScirptで下記のようなソースを書きました。 ~ここから~ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title></title> <script language="JavaScript"> function foo(){ <!-- alert("ほげ"); // --> } </script> </head> <body onClick="foo()"> <input type="text"> </body> </html> ~ここまで~ この場合、ウィンドウの中で<BODY>タグが担当する範囲は以下のどちらでしょうか? 1. テキストボックスのみ(余白を含まない) 2. 余白を含んだウィンドウ全体 私としては、関数foo()が実行されるのはテキストボックス内をクリックした場合だけなので、1.だと思います。 しかし、<body>タグの属性のbgcolorをつけると、余白全てが着色されるので、2.なのかもしれないと思い混乱しています。 どなたかお知恵をお貸しください。 IE6ブラウザへの対応で行き詰ってしまったので、ご意見をお聞かせくださ IE6ブラウザへの対応で行き詰ってしまったので、ご意見をお聞かせください。 以下htmlの一部 <html> <head> <title></title> </head> <body> <div id="hoge"> 中央に表示されます。 </div> </body> 以下スタイルシートの一部 body { background:url("./background1.gif") no-repeat scroll left top; } #hoge { background:url("./background2.gif") no-repeat scroll left top; margin-left:auto; margin-right:auto; } <body>と<div>にそれぞれ、絵柄は同じだけど色が違う背景画像を設定しています。 目的は、ブラウザの横幅を広げた時に背景がずれないようにするためです。 FireFox3.6、IE7、IE8、GoogleChlomeでは目的の動きを取ることを確認できたのですが、IE6ではそうなりません。 IE6では、<div>に設定した背景画像の開始位置が、<div>の範囲(開始位置)になっているのです。 <body>のように、ブラウザの開始位置に配置したいときはどのようにしたらいいのでしょうか? cssハックを使って、IE6だけpositionでずらすという方法も試したのですが、 それだと背景にずれが生じてしまうため、あきらめました。 他にも何か良い方法がありましたら、お聞かせいただけると助かります。 宜しくお願い致します。 tableがbodyにはみ出る。。 文章での質問で恐縮ですが、 html例に記載のような形で、レイアウトを作っています。 ヘッダーとフッター、左右のBOXとベタな構成かと思ってますが、 右ボックス(div right-box)内のテーブルの行が増えた際(運用上、可変で増えます)に、 tableがdiv構成(wrap-1,wrap-2,right-box,footer)からはみ出して、bodyの領域に出てしまいます。 スタイルシートでは左右のボックスをfloat left、float rightしていて、 テーブルの行が可変なので、left-box以外にはheightは指定していないです。 ※left-boxのheight指定は100% heightを指定しなければ、基本的に行追加に合わせて、可変で動くような気がしているのですが、 どうもうまくいかないです。 left-boxにheightを指定しているのは、left-box内に定義している要素があり、 heightの指定がない場合に、その要素の高さになってしまうので、 right-boxと同じ高さになるように、100%を指定しています。 分かりにくい質問で申し訳ないですが、 right-boxのheightをtableの行追加に合わせて可変にする方法はないでしょうか? 本来、heightなしで可変になるのであれば、 可変にならない原因の推測をお願いします。 ---ここからhtml例--- <html> <head> </head> <body> <div id="wrap-1"> <div id="header">; </div> <div class="wrap-2"> <div id="left-box"> </div> <div id="right-box"> <table id="table"> <tr> <td><textarea></textarea></td> </tr> <tr> <td><textarea></textarea></td> </tr> <tr> <td><textarea></textarea></td> </tr> <tr> <td><textarea></textarea></td> </tr> <tr> <td><textarea></textarea></td> </tr> <tr> <td><textarea></textarea></td> </tr> </table> </div> </div> <div class="footer clear"> </body> </div> </div> </body> </html> divタグのheigt:100%について 以下のようなソースを実行すると 赤い枠が黒い枠をはみ出して表示されてしまいます。 黒枠(IDが#main)もheight:100%を設定しており 赤い枠は黒い枠の子要素なのに どうして黒い枠(IDが#main)の高さが100%で表示されないのでしょうか? html,body{ height:100%; } #main{ width:700px; height:100%; border:1px solid black; } #ue{ height:130px; width:700px; border:1px solid blue; } #shita{ height:100%; width:700px; border:1px solid red; } <body> <div id="main"> <div id="ue"></div> <div id="shita"></div> </div> </body> 数秒毎に自動で画像をフェードイン・アウトする方法 以下のサンプルttp://www.geocities.jp/margin0px/sample/slideshow.html(javascript?)を使って自動で画像のフェードイン・アウトを行いたいのですが、コピペしても上手くいきません。誰かご教授下さるかたがいらっしゃいましたら、ご教授下さい。「▼▼メイン画像▲▲」の部分を画像が切り替わるようにしたいと思っています。画像のサイズは出来るだけ大きくしたいと思っています index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="ttp://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>FLOWER GARDEN</title><!-- ▼▼ページタイトル▲▲ --> <link href="components/css/default.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <div id="head_logo"><a href="index.html"><img src="img/head_logo.gif" alt="head_logo" border="0" /></a></div><!-- ▼▼ロゴ画像▲▲ --> <div id="head_right"> <!-- ▼▼キャッチ&案内テキストここから▼▼ --> <h1>想いを花に乗せて・・・・・・フラワーギフトのFLOWER GARDEN</h1> <h2>Tel.03-1234-5678|営業時間 11:00~23:00</h2> <!-- ▲▲キャッチ&案内テキストここまで▲▲ --> </div> </div> </div><!-- //wrapper --> <div id="main_vis"> <img src="img/img_01.jpg" alt="img_01" width="800" height="380" /></div><!-- ▼▼メイン画像▲▲ --> <div id="menubar"> <!-- ▼▼メニュー項目ここから▼▼ --> <div id="menubar_wrap"> <a href="index.html" class="menu_a"> <h2>Home</h2> </a> <a href="concept.html" class="menu_a"> <h2>Concept</h2> </a> <a href="pickup.html" class="menu_a"> <h2>Pick Up</h2> </a> <a href="menu.html" class="menu_a"> <h2>Menu</h2> </a> <a href="shop.html" class="menu_b"> <h2>Shop</h2> </a> <!-- ▲▲メニュー項目ここまで▲▲ --> </div> <!-- //menubar wrap --> </div> <!-- //menubar --> <div id="content"> <div id="content_wrap"> <!-- ▼▼コピーテキストここから▼▼ --> <h2>[ --- information --- ]</h2> <div id="copy"> 誕生日や記念日にフラワーギフトを贈りませんか?<br /> 当店ではオリジナルのフラワーアレンジメントを承っています。</div> <!-- ▲▲コピーテキストここまで▲▲ --> </div><!-- //content wrap --> </div><!-- //content --> <div id="footer"> 2009 FLOWER GARDEN</div> </body> </html> document.all.id1.innerText="ok"; ・・・・・・・・・・ </head> <body> <div id="id1"></div> </body> </html> はネットスケープではどう書けばいいのでしょうか? CSS適用ページで余分なDIVタグが要求される CSS初心者です、質問させてください。 XHTMLに外部CSSを添付させています。 headerは3ブロック、 contentsは3ブロックに分けてから各ブロックに複数ブロックをいれています。それら複数ブロックはそれぞれ幅と高さを指定しています。 contentsとfooterには「clear: both;」をいれています。 ソースは以下の通りです。 <?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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>無題ドキュメント</title> <link href="affiliate.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> <div id="a_Left"> <div id="a1">A1</div> <div id="a2">A2</div> </div> <div id="a_right"> <div id="a3">A3</div> </div> </div> <div id="contents"> <div id="conLeft"> <div id="b1">B1</div> <div id="b2">B2</div> <div id="b3">B3</div> </div> <div id="conCenter"> <div id="c1">C1</div> <div id="c2">C2</div> <div id="c3">C3</div> </div> <div id="conRight"> <div id="d1">D1</div> <div id="d2">D2</div> <div id="d3">D3</div> <div id="d4">D4<div> </div> </div> </div> </div> <div id="footer">E1</div> </body> </html> 明らかにid="footer"の上にある</div></div>は不要なのですが、入れないと表示がおかしくなります。 なぜかさっぱりわかりません。 どうすればいいのでしょうか? よろしくお願いします。 AIは使う人の年齢や市場にも影響する?人工知能の可能性 OKWAVE コラム 共通部分の出力にPHPを使う場合 ただ今Webサイトを運営している者です。 ヘッダとかフッタの各ページ共通部分を、PHPを使って一元的に管理しようと考えています。 PHPを挿入するページをaa.html、PHPで挿入するヘッダのページをheader.phpとすると、 ●aa.html <html> <head> </head> <body> <?php include 'header.php'; ?> </body> </html> ●header.php <html> <head> </head> <body> <div id="header">(中略)</div> </body> </html> こんな感じで考えています。 二つ質問があるのですが、 1. header.phpがaa.htmlの<?php >の部分にそのまま表示される、と考えてよいのでしょうか? 2. http://netcity.blog69.fc2.com/blog-entry-23.html 上のページや、他のサイトを読むと、外部ファイルの拡張子は何でもよいとありますが、これは本当でしょうか? 書いてある内容は同じでも、txtとhtmlとphpでは全然違う気がするのですが……。 phpソースの中のjavascriptを実行する方法 現在、AJAXの勉強をしているプログラミング初心者です。 環境はapache2,php5です。 phpのソースの中にjavascriptを埋め込んだものを動作させるには どうしたらよいのかが分かりません、 例えば以下の2つのファイルの場合。 abc.php↓ --------------------------------------------------------------- <html> <head></head> <body> <?php echo "こんにちわ"; ?> <script tyep="text/javascript"> alert("hello"); </script> </body> </html> --------------------------------------------------------------- abc.html↓ --------------------------------------------------------------- <html> <head> <script> try{ var obj= new ActiveXObject("Microsoft.XMLHTTP");} catch(e){var obj=new XMLHttpRequest();} function load(point){ obj.open("POST","abc.php",true); obj.send(null) obj.onreadystatechange=change; } function change(){ if(obj.readyState==4){ document.getElementById("target").innerHTML=obj.responseText; } } </script> </head> <body> <div id="target"></div> <a href="#" onclick="load();">click!</a> </body> </html> --------------------------------------------------------------- としたところ、 abc.phpを実行した場合はabc.phpのjavascriptが実行されてアラートがでるのですが、 abc.htmlからabc.phpにリクエストを出して出力された場合には、 javascriptが実行されずにアラートが出ない。 どうしてこのようになるのでしょうか? また解決策があれば教えてください。 よろしくお願いします。 jquery中のmatch関数が正常に動作しません <ul> <li id="1" class="comment-set"> <div class="txt"> foo1 </div> </li> <li id="2" class="comment-set"> <div class="txt"> foo2 </div> </li> <li id="3" class="comment-set"> <div class="txt"> foo3 </div> </li> <li id="4" class="comment-set"> <div class="txt"> >>1 foo4 </div> </li> <li id="5" class="comment-set"> <div class="txt"> foo5 </div> </li> </ul> というリストの中で、>>1などとアンカーがついているli要素のみ削除したいと思います。 (上の例だとid="4"のli要素です) 下からループして、文章中に">>(数字)"の形を含むものを見つけたらremove処理を実行しようと思います。 そこで以下のようなコードを書いて走らせたのですが、動作しません。 <script type="text/javascript"> $(function() { var size = $('li.comment-set').length; while(size>0) { var foo='#'+size; console.log(foo); var bar = $(foo).match(/\>\>(\d+)$/); if(bar){ $(foo).remove(); } size = size-1; } }); </script> コンソールには、 [15:21:28.514] TypeError: $(...).match is not a function @ http://localhost/comment_test/index.php:80 というエラーが表示されています。 原因に皆目見当がつかないため、どなたか解決方法を教えていただきたいです。 よろしくお願いいたします。 wrapperなしでCSSのレイアウトは組まない方がいいですか? いつもお世話になっております。 実はふとした疑問というか挑戦といいますか・・・ いつもはとあるサイトさんからダウンロードしたテンプレートの枠組みを使用していたので、余り気にしていなかったのですが、今回フッター部分もヘッダー部分と同様にrepeat-xをして永遠に延長したデザインを作りたいと考えています。 ヘッダー部分は背景を上に合わせて作れば問題ないと思うのですが、フッター部分はページごとに縦の長さが違うためそれぞれ別のスタイルシートを要するのもなんとなくやめたほうがいいようなきがしています。 そこでいつもはwrapperで囲っていたためにヘッダー部分しか横軸を延長できなかったのですが、フッター部分だけをwarapperからはずして延長させたいとおもっています。 これは可能でしょうか? どうかよろしくお願いいたいします。 body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:790px; background-color:#FFFFCC; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:790px; height:100px; background-color:#CC9999; } /* 左側の設定*/ #left{ width:190px; height:550px; float:left; background-color:#FFAC99; } /* 右側の設定*/ #right{ width:600px; height:550px; float:right; background-color:#CCCCFF; } /* フッターの設定*/ #foot{ position:relative; width:100%; height:50px; background-color:#CCFFCC; clear:both; } ------------------------------------- <body> <DIV id="wrap"> <!-- ********* ヘッダー ******** --> <div id="head"> </div> <!-- ********* 左側 ******** --> <div id="left"> </div> <!-- ********* 右側 ******** --> <div id="right"> </div> <!-- ********* フッター ******** --> <div id="foot"> </div> </DIV> </body> ------------------------------------------------- これを・・・ body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:790px; background-color:#FFFFCC; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:790px; height:100px; background-color:#CC9999; } /* 左側の設定*/ #left{ width:190px; height:550px; float:left; background-color:#FFAC99; } /* 右側の設定*/ #right{ width:600px; height:550px; float:right; background-color:#CCCCFF; } /* フッターの設定*/ #foot{ position:relative; width:100%; height:50px; background-color:#CCFFCC; clear:both; } ------------------------------------- <body> <DIV id="wrap"> <!-- ********* ヘッダー ******** --> <div id="head"> </div> <!-- ********* 左側 ******** --> <div id="left"> </div> <!-- ********* 右側 ******** --> <div id="right"> </div> <!-- ********* フッター ******** --> <div id="foot"> </div> </DIV> <div id="foot"> </div> </body> ------------------------------------------------- このようにwrapperからはずしてレイアウトすることは可能でしょうか?色々いじっているとなんとか見た目はできたのですが、縮小するとフッターが真ん中あたりに来たり、なにかと不安でして・・・ かなり長文になりましたが、どうかよろしくお願いたします。 CSSでのdivタグに付いての質問です。 現在HTMLを学習し始めたばかりで困惑しております。 HTML内の<body>タグ内に<div>タグを作りidを"main"としました。 具体的には<div id="main">Main</div>と記述しました。 そこからCSSで#main {color: red;} と記述しましたが、文字色の変更が全く反映されない状態です。 他の<p>タグや<h1>タグ、また<body>タグは全て奇麗に反映されるのに<div>だけが全然ダメな状態です。 一体何が原因なのか教えて下さい。 初心者すぎる質問だと思いますが、どうぞよろしくお願い致します。 【jQuery】 changeが検出できない 間違いがあったため、投稿しなおしです。 MySQL + PHP + javascript with jQuery でプログラムを作成しています。 $.ajaxでPHPを呼び出し、以下のようなinputを書き出しました。 <input id="hoge" onchange="alert('hogehoge')" type="hidden" value="foo" / > その後、以下のようにjsで値の変更を行いましたが、changeイベントが検出できません。 $("#hoge").val("hogehoge");//アラートが出ない 変更後、すぐにアラートが出るようなイメージでいたのですが、アラート自体が出ません・・・ inputに直にonchangeを書いているのがマズイのかな、と思い、以下のように変更もしてみましたが、やはりダメでした。 $("#hoge").livequery("change",function(){ alert("hogehoge"); }); $("#hoge").val("hogehoge");//やはりアラートが出ない プログラムから変更されたval()は、イベントとして取得できないのでしょうか。 なぜ取得できないのか、またそもそも出来ないのなら何か方法はないか、ご存じの方お願い致します。 idとclassの指定方法 id(class)の指定は、セレクタといっしょに指定(1)、セレクタを除いて指定(2) どちらが正しいというのはあるのでしょうか? 【例】 <html> <head> <title>タイトル</title> </head> <body> <div id="sample"> <p>サンプル</p> </div> </body> </html> (1) div#sample p { color:#f00; } (2) #sample p { color:#f00; } どちらでも良いような気がしますが、実際の所どうなんでしょうか。 サイト説明のタグ付けについて XHTML+CSSでサイト構築を勉強している者です。 XHTMLのマークアップで疑問があったので質問させていただきます。 XHTMLの参考書を見ると【サイトの大見出し<h1>の次に配置するのは文書 構造的にサイトの説明文40~80文字程度が良い】と書いてあります。 例 <body> <div id="wrap"> <h1>サイトタイトル<h1> <p>このページは○○についての紹介ページです。…</p> この場合、検索エンジン表示結果リストのタイトル下に説明が出ること と、サイトの概要が文書構造的にすぐ出てくるのでSEO的にも良いと書いてあります。 しかし、アメーバブログやSEO対策をしてあるように見えるサイトは次のようにマークアップしています。 例 <body> <div id="wrap"> <h1>サイトタイトル<h1> <h2>このページは○○についての紹介ページです。…</h2> 概要に<p>を使わず、<h2>を使っています。 確かに中見出しとして文書構造的には良いと思うのですが、<h2>内に80 文字を入れようとすると不自然な感じがします。 <h1>のすぐ後に<h2>を置き、サイト概要を入れるメリット、デメリット はあるのでしょうか。 よろしくお願いします! 注目のQ&A 「You」や「I」が入った曲といえば? Part2 結婚について考えていない大学生の彼氏について 関東の方に聞きたいです 大阪万博について 駅の清涼飲料水自販機 不倫の慰謝料の請求について 新型コロナウイルスがもたらした功績について教えて 旧姓を使う理由。 回復メディアの保存方法 好きな人を諦める方法 小諸市(長野県)在住でスキーやスノボをする方の用具 カテゴリ [技術者向] コンピューター プログラミング・開発 Microsoft ASPC・C++・C#CGIJavaJavaScriptPerlPHPVisual BasicHTMLXMLCSSFlashAJAXRubySwiftPythonパフォーマンス・チューニングオープンソース開発SEOスマートフォンアプリ開発その他(プログラミング・開発) カテゴリ一覧を見る OKWAVE コラム 突然のトラブル?プリンター・メール・LINE編 携帯料金を賢く見直す!格安SIMと端末選びのポイントは? 友達って必要?友情って何だろう 大震災時の現実とは?私たちができる備え 「結婚相談所は恥ずかしい」は時代遅れ!負け組の誤解と出会いの掴み方 あなたにピッタリな商品が見つかる! OKWAVE セレクト コスメ化粧品 化粧水・クレンジングなど 健康食品・サプリ コンブチャなど バス用品 入浴剤・アミノ酸シャンプーなど スマホアプリ マッチングアプリなど ヘアケア 白髪染めヘアカラーなど インターネット回線 プロバイダ、光回線など
お礼
素晴らしい回答をありがとうございます。 素晴らしい案ですね…試したくてうずうずしてきました!