- ベストアンサー
class属性とdivの違い、ボックスの表現とは
partitaの回答
- partita
- ベストアンサー率29% (125/427)
＞で表示がグッチャグチャになってしまいました なりませんでしたよ（IE6） ＞もう何が class で何が id なのかわかりません。 classとidの使い分けは人によって様々でしょう。一般的には「ページに複数存在するときはclass」と言われます。それ以外はidで記述してかまいません。 中には、すべてclassで、もしくはidで記述している人もいますが、名称を考えるのが大変だと思います。
noname#20377
関連するQ&A
- 紹介された文書を読みましたが、まだわかりません。
以前に class 属性についての質問をしました。 紹介された場所の文書を読みましたが、まだわかりません。 たとえば、ここで質問している人のいくらかは css ファイルの中身を載せていることがありますが、たとえば div id="topbanner" というボックスがあり、 .top-left .top-center .top-right などとあります。 さらに、上には書いていないですが、それぞれのクラスの中で 明らかにそれぞれのクラスがボックスであるかのような表記＝たとえばそれぞれに幅と高さの指定がある になっています。 1. これはボックスなのですか。 でも、私の自動的に作られたページの div id="topbanner" にも左と真ん中と右のブロックがありますが、それらはクラスではなく、div id="topbanner" に対してそれぞれ div id="top-left"、div id="top-center"、div id="top-right" などと、div に div が入れ子になっており、class などどこにも存在していません。 しかし、きちんと表示されています。 2. 逆に、他の人はなぜ私と同じような表記ではないのですか。上の質問の class が表すようなボックスと何の違いがあるのですか。これは正しくない記述なのですか。 明らかに部分がさらに部分に分けられるのに、div だけで動いている私のページは問題があるのでしょうか。 紹介サイトを読んだ上で、さらに混乱してしまいました。
- 締切済み
- HTML
- ボーダースタイルがうまく表示できない
#content { width:525px; } div.box { width:525px; margin-top: 20px; border-bottom:dotted 1px #ccc; } div.left { width:140px; float: left; font-weight: bold; margin-left: 5px; } div.right { width:380px; float: left; line-height: 20px; height: 20px; } <div id="content"> <div class="box"> <div class="left">Address</div> <div class="right">住所<br>東京都</div> </div> </div> クラス名boxというボックスのボトムにボーダー指定をしましたが、ボックスのズレ？によりボーダーがトップになっているように見えてしまいます。 どこが間違っておりますか？ アドバイスを宜しくお願いします。
- ベストアンサー
- HTML
- 特に指定する値がない場合のcssについて
現在作成しているホームページで、以下のようなソースを書きました <div id="wrapper"> <div class="box1 clearfix"> <div class="right1">floatで右寄せ</div> <div class="left1">floatで左寄せ</div> </div> <div class="box2 clearfix"> <div class="right2">floatで右寄せ</div> <div class="left2">floatで左寄せ</div> </div> </div> 初めは特にdivを入れ子にする必要はないと思っていたのですが clearfixの指定をかけるには必要だったので、<div class="box">で囲むことにしました。 ですが、box1やbox2に、特に指定する値がなくて悩んでいます。 特に指定することがない場合にはcssには何も書かなくてよいものなのでしょうか？ 今は取り敢えず何か指定してないと落ち着かない気がして width指定だけ書いているのですが、幅はwrapperで指定していますし特に必要ない気もします。 このような場合には何も指定をしないか、取り敢えずwidthだけでも指定しておくかどちらの方が良いのでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- div入れ子、親でmarginを設定すると子のmarginは反映されない？
段組みレイアウトでdivが 入れ子になってています。 外側が <div id=wrap> <div id=main> <div id=form> </div> </div> </div> #wrap{ width: 840px; margin-top: 0px; margin-right: auto; margin-bottom: 15px; margin-left: auto; } #main { width: 582px; float: right; padding: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 10; } #form { width: 562px; padding: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 20; } としてあります。 id=formのmargin-left :20; だけがブラウザで反映されず、 flort:right;で右に寄せて左に20pxあけました。 id=mainもflort:right;で右に寄っているだけだったようです。 divを入れ子に使う場合、 親でmarginを設定したら、子のmarginは反映されないのでしょうか？
- ベストアンサー
- HTML
- CSSで角丸テーブル
CSSでDIV要素を使って入れ子し、角の丸いテーブルを作っているのですが、なぜか誤差が出てしまいます。 CSSのソースは次のようなものです。 table（2）.gifは角丸テーブルの画像です 画像サイズ：横440px 縦11px .box-center-start { width: 440px; background: url(image/table.gif); background-repeat: no-repeat; } .box-center { width: 440px; background-color: white; margin: 20px 10px 20px 8px; float: left; } .box-center2 { width: 440px; background-color: white; padding: 0px 10px 10px 10px; border-right: 1px solid gray; border-bottom: 1px dashed gray; border-left: 1px solid gray; } .box-center3 { width: 440px; background-color: white; padding: 10px 10px 0px 10px; border-right: 1px solid gray; border-left: 1px solid gray; } .box-center-end { width: 440px; background: url(image/table2.gif); background-repeat: no-repeat; } このように記述し、HTMLに <DIV class="box-center"> <DIV class="box-center-start"></DIV> <DIV class="box-center2"> ～内容 </DIV> <DIV class="box-center3"> ～内容 </DIV> <DIV class="box-center-end"></DIV> と打ってもなぜか綺麗に表示されません。 クラス「box-center-start（end）」の下に、少し余白が入ってしまうのです。（10pxほどの） 何方か助言お願いしますm( _ _ )m
- 締切済み
- HTML
- floatとclearを使ったレイアウト作成について
http://www.ario-nishiarai.jp/ 上記のサイトのようなページ中央より下のレイアウトを作りたいと思い、下記のようにコーディングしました。 <html> <head> <title>Ｗｅｂ</title> <style type="text/css"> .container {text-align:left;width:760px;margin:0px auto;background-color:#FFFFFF;} .content1 {width:760px; height:200; padding:0px; border:1px solid #999999;} .content2 {width:760px;padding:0px;border-right:1px solid #999999; border-bottom:1px solid #999999; border-left:1px solid #999999; margin:0;} .box1 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box2 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box3 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box4 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px; margin-bottom:10px;} .box5 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box6 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .news {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .topics {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;}solid #CCCCCC; margin-top:5px; margin-left:5px;} </style> </head> <body> <div class="container"> <div class="content1"> 画像 </div> <div class="content2"> <!--左側--> <div class="box1"> タイトル<br /> メニュー </div> <div class="box2"> タイトル<br /> メニュー </div> <div class="box3"> タイトル<br /> メニュー </div> <div class="box4"> タイトル<br /> メニュー </div> <!--中央--> <div class="news"> あ </div> <div class="topics"> い </div> <!--右側--> <div class="box5"> う </div> <div class="box6"> え </div> </div> </div> </body> </html> box1、box2、box3、box4のボックスは左側に、news、topicsのボックスは中央に、box5、box6のボックスは右側にレイアウトしたいと思っています。 floatとclearを使って作成するのだと思うのですが、どうコーディングしたら良いのかわかりません。 どこをどう直したら良いかアドバイスいただけますようお願いします。
- ベストアンサー
- HTML
- 回り込みfloatの間隔について質問です
ボックスでボックスを回り込みしています。(?) …書いたほうが早いですね… HTMLが <div id="left"> 左ボックス </div> <div id="right"> 右ボックス </div> CSSが *{ margin: 0px; padding: 0px; } #left { float: left; width: 100px; height: 100px; } #right{ width: 200px; height: 100px; } といった感じです。 左ボックスと右ボックスの間に1～2pxほどの間隔があいてしまいます。 これをなくすにはどうすればいいですか？ お願いします。
- 締切済み
- その他（インターネット・Webサービス）
- CSSで、リンクに触れると一部ボックスが消えてしまう
http://www.stylish-style.com/gallery/base-temp/2-center-head/index.html 上記のサイトのようなページを作りました。 このページでいうところのIDがrightの部分に、ボックスを入れてあります。 ヘッダーの部分にさらに <div id="headerBox"> <!-- 名前 始まり --> <span id="nameBox"> <table cellspacing="0" cellpadding="0" border="0" width="100%"> <tbody> <tr> <td class="nameTD"><img src="face.jpg" alt="" class="nameImg" /></td> <td class="nameTD"><font class="nameBoxText">●●<br /></font></td> </tr> </tbody> </table> </span> <!-- 名前 終わり --> <!-- メニュー --> <span id="mainMenu"> <ul id="menu"> <li id="toppage"><a href="top.html">ホーム</a></li> </ul> </span> <!-- メニュー 終わり--> </div> というボックスを下に入れたとき、既にヘッダーに入れてあった <a href="top.html"><img src="img/logo.gif" /></a> というリンク部分にマウスが触れたときだけ（まるでオンマウスで指定したかのように）、leftとrightの下部分がごっそり消えてしまいます。 リンクの指定は、外部からまとめて呼び出しているため、上記のリンクだけ別に指定はしていません。リンク画像に触れたときだけ、leftとrightの下一部だけ消えます。フッターは表示されていて、繰り上げて表示されます。 タグはすごく長いので、すべては表示できませんが、原因にお心あたりのあるかた、よろしくおねがいいたします。
- ベストアンサー
- HTML
- 外部スタイルシートは同じなのですが…
こんばんは。 HTMLをコーディングしていて困ったことが出て来たのでご指導願います。 外部スタイルシートで共通のスタイルシートを指定し、コンテンツを組んでいるのですが、画像を挿入するとセンターで指定しているボックスが微妙に左へずれるのです。 HTMLのコードは下記／／／ <body> <div class="bace"> <div class="hedder"></div> <div id="menu"> <div class="menu"> <div class="menu_box"><a href="info.html">当サイトについて</a></div> <div class="menu_box"><a href="time.html">時間</a></div> <div class="menu_box_act">アクセス</div> <div class="menu_box"><a href="profile.html">紹介</a></div> <div class="menu_box"><a href="index.html">トップページ</a></div> <div class="clear"></div> </div> </div> <div class="main"> <h1>アクセス</h1> <div class="main_text"> <div align="center"><img src="map.jpg"/></div> ←この部分で画像指示をするとレイアウトが左へずれる。 </div> <div class="main_text"> <h2>アクセス／設備</h2> ○○○徒歩３分<br /> 駐車場2台（バリアフリー）<br /> <br /> <h2>住所</h2> 〒000000000000000000000000<br /> 電話 123-456-789 </div> </div> <div class="futter">Copyright © 2007 All Rights Reserved</div> </div> </body> CSSは下記／／／ * { margin:0; padding:0; } .bace{ width:750px; height: auto; margin-right: auto; margin-left: auto; font-size:90%; } .hedder{ width:750px; height:150px; background-image: url(hed.jpg); background-repeat: no-repeat; } .menu{ width:700px; height:30px; margin-top: 10px; padding-right: 25px; padding-left: 25px; } .menu_box{ height:30px; width:120px; float:left; margin-right: 10px; margin-left: 10px; } .menu_box_act{ height:30px; width:120px; float:left; margin-right:10px; margin-left:10px; display:block; text-align:center; line-height:30px; background-image: url(menu_back2.jpg); background-repeat: repeat-x; } .main{ width:670px; padding-right: 40px; padding-left: 40px; margin-top: 15px; height: auto; } .main_text{ margin-top: 5px; padding-right: 15px; padding-left: 15px; width: 640px; margin-bottom: 5px; height: auto; position: relative; } .futter{ height:15px; width:750px; text-align:center; background-color: #002187; color: #CCCCCC; margin-top: 15px; font-size: 90%; } .clear{ float:clear; } /* メニュー用リンクスタイル */ #menu a{ display:block; color:#333333; height:30px; line-height:30px; text-decoration:none; text-align:center; background-image: url(menu_back1.jpg); background-repeat: repeat-x; } #menu a:hover,a:focus{ color:#333333; background-image: url(menu_back3.jpg); background-repeat: repeat-x; } #menu a:active{ color:#333333; background-image:url(menu_back2.jpg); background-repeat:repeat-x; } 画像を入れないと全くぶれないのに、入れた途端レイアウトはそのまま左右へぶれるということが起こるのでしょうか？ リンクをサイト内でたどるとこのページだけ左へずれて違和感があります。 ご指摘の程、どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- 誤差！？
外部CSSに下記のように記述し .box-base { width: 700px; } .box-header { width: 700px; height: 150px; text-align: left; } .box-center-base { width: 470px; padding: 20px 20px 20px 10px; float: left; } .box-center { width: 440px; text-align: left; } .box-center2 { width: 440px; text-align: left; } .box-left-base { width: 230px; padding: 20px 10px 20px 20px; float: left; } .box-left { width: 200px; text-align: left; } HTMLのほうに <DIV class="box-base"> <DIV class="box-header"> 内容 </DIV> <DIV class="box-left-base"> <DIV class="box-left">内容</DIV> </DIV> <DIV class="box-center-base"> <DIV class="box-center">タイトル</DIV> <DIV class="box-center2">内容<DIV> </DIV> </DIV> と打っているのですがなぜかcenterボックスのほうがleftボックスの右側に来ずに下に下がってしまいます。 そこで、leftボックスのほう（baseとleft）のwidthを2px減らしたら綺麗に表示されました。 でもその分の2px、隙間が開いてしまいました^^;（全体に20pxの隙間が開くはずが右だけ22pxになってしまいました） なぜでしょうか？どなたか助言お願いします。 （CSS、HTMLには修正しています。もしこの情報だけでは判断できない場合は、修正してないものをアップします）
- 締切済み
- HTML
補足
> 一般的には「ページに複数存在するときはclass」と言われます。それ以外はidで記述してかまいません しかし、CSS の書法のサイトには、「複数のとき id が駄目」と書いてはありますが、では「複数でない場合 id でよい」とは書いていなく「id と class は表すものが異なるので使い分けなさい」と書いてあるのです。 だから、「（複数でない場合は）一般によいのだよ」ということではなく、使い分けを聞きたいのです。 top のもとにある、left、center、right は id なのですか、class なのですか。 「コラム」のもとにある、「タイトル」、「本文」は id なのですか、class なのですか。 menu のもとにある、button1、button2、button3 は id なのですか、class なのですか。 「全身」のもとにある、「頭」、「胴」、「足」は id なのですか、class なのですか。 それぞれ、よろしくお願いします。