• ベストアンサー

HPについてなんですが。

HPについてなんですが。 yahooのようなhpはタグがほぼ<div>つくられいると思うのですが? 段組みを増やす場合は <DIV>と<DIV>の間に<DIV>を追加していけばいいのでしょうか? それと、idを使わずclassを使ったほうがいいのですか?

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

DOMとCSSを学ぶことをお勧めします。 最初にCSSがいいかと思います。 DIV タグは初期のホームページを作る本では、たぶん”段落”と解説していたかと思いますが、CSSを使う場合、”段落”としてはほぼ使われていません。 http://www.htmq.com/style/position.shtml にあるように、ポジショニングに使われる事がほとんどです。もちろん、元々DIVに適用されているDTD(書式などの定義が書かれている)には、「改行、アウトライン」のブロック要素であるため使い道として、見出し、段落、リスト、フォームになりますが、今では単なるBOX(コンテナ)としての使い道がほとんどです。 http://www.htmq.com/html/div.shtml [DIV] http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 [W3C訳 ブロック要素の説明] このポジショニングとはレイアウトの基本で、CSSが対応していないブラウザが多かった時代はTABLEタグをレイアウトタグとして使っていましたが、今はDIVを多様しています。また、DHTMLの基本のタグでもあります。 上記のURLを見れば分かると思いますが、DIVタグのネクストは可能ですので、段落として使うなら、<div> <div></div> </div>でかまいません。ただし上位のDIVのスタイルに中のDIVが影響されますので注意してください。段落の基本的な使い方としては、ネクストしないのが理想です。 段落は通常<p>タグを使います。 >それと、idを使わずclassを使ったほうがいいのですか? これはCSSを理解していないためこのような意味不明な質問になったかと思います。 ID とClassは別機能なので、質問自体が間違っています。IDは単にオブジェクトをユニーク(一意に特定する)にするための属性です。 Classはスタイル名を指定するための属性です。通常両方使います。片方だけでも、問題ありません。逆にIDを指定しても、スタイルは指定した事になりません。指定できるのは、styleタグでから特定IDはこのスタイルと言うやり方になります。 つまり、意味と、使い方がまるっきりち違うので、同意義語として使うのはおかしいです。このように使うのはあなたが初めてです。 StyleからIDを指定する場合と、タグの属性でClassを指定する場合では、DOMから見るとまるっきり違います。JavaScriptなどからDOMにアクセスすると、アクセス方法が違うし、意味も違ってきます。 また優先順位など適用されるものも違ってくるので、ケースByケースで使い分けるの正しい使い方です。 通常Classでスタイルを設定します。Styelタグでは、例えばDIVに同じClassを指定しておくが、このDIVだけは違うスタイルをつけたい時に、styleタグ側からIDを指定して使う事ができます。私は、直接DIVタグにClassを指定して、さらにStyle="color:redなどと独自スタイルを指定しています。この方が、1年後見たときに分かりやすいからです。 と言うことで、DOMとCSSをちゃんと勉強しましょう。たくさんのケースで作る事をお勧めします。

zxqae
質問者

お礼

ド素人に丁寧な回答ありがとうございました。 もっと勉強します。 ありがとう

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

関連するQ&A

  • 開始タグと終了タグについて

    開始タグと終了タグについて ものすごく初歩的な質問で失礼します。 <div id="container"> <div id="header"> </div> <div id="menu"> </div> <div class="main-top-img"> </div> <div class="main-middle-img"> <div id="main-contents"> <div class="text"> <h2 class="title"></h2> <p class="text"></p> <h3 class="subtitle"> <p class="text"></p> </div> </div> <div class="main-bottom-img"> </div> <div id="footer"> </div> </div> などいのように開始タグと終了タグの間に、他の多くの<div>要素がある場合、どこがその要素の終了タグなのか分からなくなります。 それぞれの開始タグが、それぞれの終了タグと対応するのは、どのようなルールのもとに決定されているのですか??

    • ベストアンサー
    • HTML
  • javascriptで困っています。

    Javascriptで <div id='abc' class='xyz'> とあるdivタグに2つめのclass属性を追加したり、削除するにはどうしたらいいのでしょうか? よろしくお願いします。

  • classの中の<a>タグにidを追加

    div class内のaタグにidを追加できる方法がないかを模索しておりますが、検索では直に(タグ)にidやclassを追加する方法しか出てきませんでした。 もしかしたら、突拍子もないことを言っているかもしれませんが JavaScriptに詳しい方アドバイス宜しくお願い致します。 id、classを割り当てるためのメソッド attr(属性, 属性値) $(function(){ $('ul').attr('id', 'style-ul'); $('li').attr('class', 'style-li');}

  • DreamweaverでDivでHPを作る方法

    今までDreamweaverでテーブルを使ってHPを制作していましたが、最近テーブルではなく、divを使って作る方法が主流になっているとのことで、どうやって作ったらいいのか教えて欲しいです。 検索で調べて見ましたが、中々分かりやすいものがないので、どなたか分かりやすいサイトなどございましたらご紹介くださいませ。 また、Divタグを挿入してみましたが、デザイン画面ではテーブルを使ったときのような表示にならずに、「class "a1" id "q" の内容がここに入ります」と表示されました。 Divを使ってテーブルで制作するように「デザイン」を見ながら、ビジュアルで確認しながら作っていけるのでしょうか?

  • classList で、class名が付かない。

    classList を使用して、新規で div タグに class 名を付けようと思っています。 div に id 名を付け、それを対象とした場合は、class 名は付きますが、 id名を含めない タグのみでは、class 名は付かないのでしょうか? コードは以下記述の通りです。 ご回答どうぞよろしくお願いいたします。 <html> <head></head> <body> <div id="hoge">class-name on tag.</div> <script> var dom = document.getElementById( 'hoge' ); //以下のように使えるなら理想です。 //var dom = document.getElementByTagName( 'div' ); dom.classList.add( 'test' ); </script> </body> </html>

  • こんにちは、HP作成をある初心者向けの本で練習していますが、

    こんにちは、HP作成をある初心者向けの本で練習していますが、 まずdivというのが範囲指定というのはわかるのですがそもそもdivというのは どういう意味なのでしょうか?あとdiv idとdiv classの使い分けがいまいちわかりません。 それとわかりにくいかもしれませんがある画像の上に、重ねるように(大きさは下のほうが若干大きいです) もう一つの画像を張るにはどうすればいいでしょうか?よろしくおねがいします。

  • 自働生成される<div>タグに連番を振りたい

    いつもお世話になってます。 早速ですが、質問です。 <div class=hoge">あああ</div> <div class=hoge">あああ</div> <div class=hoge">あああ</div> <div class=hoge">あああ</div> と自動的に吐き出される時、 divに【 class="hoge" id="hoge1" 】のように記述を追加したいのです。 <div class=hoge" id="hoge1">あああ</div> <div class=hoge" id="hoge2">あああ</div> <div class=hoge" id="hoge3">あああ</div> <div class=hoge" id="hoge4">あああ</div> ただ、onloadイベントを使わずに上記を実行したいのですが、 書き方が分かりません。 onloadを使わない書き方をご教授ください。 よろしくお願いします。

  • DIVでの段組でhight属性の設定方法

    DIVでの段組でhight属性の設定方法 添付画像のような段組を外部CSSをつかってしています。 ●BとCにhightを設定しなかった場合 Cに色々コンテンツを入れていき、BよりCの縦の長さが長くなった場合、 BとDの間に隙間ができてしまいます。 ●BとCにhight[100%]を設定した場合 この場合もCの長さがBより長くなった時点で、BとDの間に隙間が発生します。 ●BにCよりも明らかに長い数値を入れた場合 Bのhightを[1000px]とかにしてCよりBを長くした場合、 BとDの間はきっちりとつながります。 ★質問 Cの縦の長さに関係なく、Bの縦の長さを連動させてBとDの間をあけないようにするにはどのようにしたら良いでしょうか? ちなみに、BとCはEの中に入れています。 ------------------------- <div class="E">  <div class="B"></div>  <div class="C"></div> </div> ------------------------- よろしくお願い致します。

    • ベストアンサー
    • HTML
  • HTMLについていくつか質問です。

    調べてもいまいち納得のいかなかった疑問がいくつかあり、質問します。 1、空のdivが悪い、良くないとよく言われますが、どの解説見ても、理由もなしにグループ化のためのタグなのでルール違反やあり得ないと書かれているだけで、全く理解できません。 SEO的に問題があるとか、どの観点からどのようによくないのか理由を教えていただきたいです。 2、<div id="" class="" >といったタグの例を見たのですが、これは単純に、すでにcssに設定されているidやclassを混合して使い、いちいち混合したcssを書かなくてよいために使われるのでしょうか。 3、空のdivの問題に当たった切っ掛けなのですが、どうしても一括で背景を変えたいために、また自由度のためにcssで背景指定のみのdivを、例えば<div id="back" style="float:right; background-image:url(○○.jpg);"></div>をおいておきたいのですが、この場合どうしても空のdivができてしまします。 間に背景と同じ画像の<img >を入れるというのは無しででお願いします。 これは一括で背景を変えたいという目的もありますが、あとからdivの間に文字やリンクをいれるかもしれない(ずっと入れない可能性もある)ために、このような後のdivけん、今のデザインのための画像を置いておこうと考えています。 空のdivで納得するべきか、他のタグで代用できるでしょうか。 どれか1つでもお答えくださると助かります。 回答よろしくお願いします。

    • ベストアンサー
    • HTML
  • <div>タグの中の<img>タグのclass属性を削除したい

    <div class="center"> .... <img ... class="right" ...> .... </div> とあるソースをperlを使って <div class="center"> ... <img ...> ... </div> というように img タグの class="right" を削除したいです。 <div class="center"> の中にあるimgタグのみ対象としたいのですが、 どうすればよいのでしょうか。 なお、<div class="center"> タグの中には複数の <img ... class="right" .. >タグがある場合もあります。

    • ベストアンサー
    • Perl