- ベストアンサー
ブラウザスタイルの初期化は必ずした方がいいでしょうか？？
ＷＥＢを勉強中です。 ブラウザスタイルを初期化をすれば 各々のブラウザの初期値をクリアしてくれるので 常に body{ margin:0 padding:0 } は記述するべきかと思ったんですが、 やはり常に記述するものなのでしょうか？？ ちょっとよくわからないので実務上どうなのかとか知りたいです、、、
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- CSSでブラウザ判別した場合の表記方法
スタイルシートでブラウザを判別して それにみあった表示を行うようにしたいと思っています。 header('content-type:text/css'); img{border:none;}#共通 p{color:#000000;}#共通 <?php $Agent = getenv( "HTTP_USER_AGENT" ); if( ereg( "Firefox", $Agent ) ){ print <<<END body{background-color:#FFFFFF;} #wrapper{ margin:0 auto; padding:0; } END; } elseif( ereg( "MSIE", $Agent ) ) { print <<<END body{background-color:#000000;} #wrapper{ margin:0 auto; padding:0; } END; } else { print <<<END body{background-color:#666666;} #wrapper{ margin:0 auto; padding:0; } END; } ?> スタイルシート側の記述を上記のようにしております。 ですが、どうしてもエラーが でてしまいます。 どこがおかしいかわからず困っております。 どうかお教えください。
- ベストアンサー
- PHP
- スタイルシートの記述方法に関して。
スタイルシートで、基本的なデザインは一通り出来ると思っています。 実は今サンプルのスタイルシートを修正しています。 スタイルシートの記述方法に関して、質問があります。 サンプルのスタイルシートの記述方法ですが、要素の記述にて上位の要素を全て記述し、最終的な要素を記載しています。 例として 一番外側の要素を：#wrapper ヘッダー：#header コンテンツ：#content メインコンテンツ：#main サイドコンテンツ：#side とします。 自分の場合であれば、スタイルシート内の記述は div#wrapper { width: 500px; margin: 0px auto; padding: 0px; } div#header { width: 480px; margin: 0px auto; padding: 0px; } div#content { width: 480px; margin: 0px; padding: 0px; } div#main { float: left; width: 300px; margin: 0px; padding: 0px; } div#side { float: right; width: 170px; margin: 0px; padding: 0px; } と記述していましたが、サンプルでは以下の通りに記述されています。 div#wrapper { width: 500px; margin: 0px auto; padding: 0px; } div#wrapper #header { width: 480px; margin: 0px auto; padding: 0px; } div#wrapper #content #main { float: left; width: 300px; margin: 0px; padding: 0px; } div#wrapper #content #side { float: right; width: 170px; margin: 0px; padding: 0px; } と記述されています。 上記の記述に、技術的に有利になる点は有るのでしょうか、単に CSS の記述を判りやすくしているだけのように思えます。 上記の記述方法は、一見判りづらいと思いますが、記述している要素が確実に判ると思います。 ただ、その反面 CSS のソースが肥大化します。 上記の記述方法に、他にメリット、デメリットがあるのかアドバイスを頂ければ幸いです。 ちなみに、参考にさせて頂いてる CSS のソースは海外で作られたソースになります。 海外では一般的に使われている記述方法になるのでしょうか。
- ベストアンサー
- CSS
- CSSとページの軽量化
CSSに記述するスタイルの量によってページの読み込み速度は変わりますか？ <1> *{ margin:0px; padding:0px: } <2> *{ margin:0px; padding:0px: } body{ background-color:#000 } 例えばこの場合だと<1>の方が読み込みは早くなったりするのでしょうか？
- ベストアンサー
- CSS
- IEのブラウザだけちゃんと表示されません。
ウェブデザインをしています。 Macで制作して サイトを立ち上げたのですが、 WindowsのIEにのみブラウザの下の方が 表示されません、、、。 http://www.hudge.jp/works/works.html かなり困っています。 どうもheight: 100%;が適応されていないっていうのは なんとなくわかったのですが、 どうやって直したらいいのかわかりません。 WindowsでもFire foxだと上手くいくのですが、、、。 CSSはこんな感じです。 <style type="text/css"> /* hide from ie on mac \*/ html { height: 100%; overflow: hidden; } #style { height: 100%; } /* end hide */ body { height: 100%; margin: 10; padding: 0; background-color: #000000; } </style> すいませんが、お願いします。
- ベストアンサー
- HTML
- *{margin:0px;padding:0px;}というＣＳＳのタグの意味について教えてください。
<style type="text/css"> *{margin:0px;padding:0px;} </style> ホームページで上記のようなソースを見かけたのですが、これはどういう意味なのでしょうか？ 試しに新規ページにこのコードを記述してbody内にtableを作ってみたのですが、tableに記述したcellpaddingが 数値をいろいろ変えても動作しません。 この*{margin:0px;padding:0px;}という記述をすることによる意図は何なのでしょうか？ 宜しくお願いします。
- ベストアンサー
- HTML
- WindowsのIEで、スタイルシートのfloatがずれてしまいます
スタイルシートの「float」についてなんですが、 ------------------------------------------------------------------- <html> <head> <title>メニューテスト</title> <style type="text/css"> <!-- body { margin: 0px; padding: 0px; } #menu{ float: left; width: 170px; margin-top: 0px; margin-left: 8px; } --> </style> </head> <body> <div id="menu">あいうえお</div> </body> </html> ------------------------------------------------------------------- 上記のようにすると、WindowsのIE5以降で見たとき、 「あいうえお」のマージンが8pxと指定してあるにもかかわらず、16pxほど空いてしまいます。 「float」を外せば正常に表示されます。 他のブラウザでは正常に表示されますので、Win IEのみの現象だと思うのですが 何か良い解決方法はないでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- スタイルシート
スタイルシートを使ってホームページを作り始めたんですが、左にメニューを作りたかったので body { margin: 0px; padding: 0px; } .main { width: 580px; position: absolute; left: 210px; } .side { width: 180px; margin-left:10px; } とcssファイルを作り何個かのページに記述したらトップページを除いて他のページは配置がおかしくなったりレンタルサーバの広告がど真ん中に重なったりしてしまいます。なぜでしょうか？ 配置がおかしいとはsideとmainが ■■という配置にして欲しいのですが ■ ■という風になってしまいます。 わかりにくくてすみません。
- 締切済み
- HTML
- ブラウザ依存のボタンのデザインを使いたい。
cssで特にデザインを設定しない場合に表示されるボタンのデザインを使いたいと思っています。 しかし、ブラウザスタイルの初期化 *{ margin: 0; padding: 0; border: 0; font-style: normal; font-size: 100%; text-decoration: none; } をすると、ボタンがグレー背景ののっぺりしたものになってしまいます。 この状態ですでにページのデザインは完成していますので、ユニバーサルセレクタ内はさわらず、ボタンのデザインをブラウザのデフォルトのデザインで表示させる方法を教えてください。
- ベストアンサー
- HTML
- スタイルシートで、マージン０に出来ません
夜分に失礼します。 個人の趣味のホームページですが ブラウザ上部と左部のマージンを０に出来ずに困っています。 スタイルシートで、margin 0;としても、マージン０にならないのに BODY句に直打ちすると、マージン０になるので、もう、ワケが分かりません。 ご参考までに、ソースを記します。 また、ブラウザはIE6です。 どうぞ、宜しくお願いします。 <HTML> <HEAD> 中略 <STYLE type=text/css> BODY_i{margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; font-family: "ＭＳ ゴシック","Osaka－等幅",monospace; font-size:12pt; color:#696969; line-height:150%;} .photo1{width:982px; height:730px; background-color:#DCDCDC; border-style:solid ridge ridge solid; border-width:1px 2px 2px 2px; border-color:#DCDCDC #DCDCDC #DCDCDC #DCDCDC; text-align:center; vertical-align:middle; padding:11px 11px 11px 11px;} </STYLE> </HEAD> <BODY class=BODY_i> <!-- <BODY topmargin=0 leftmargin=0> --> <P class=photo1> <IMG SRC="test_CIMG6224.JPG"> </P> </BODY> </HTML>
- 締切済み
- その他（インターネット・Webサービス）
- “タグの属性”と“スタイル”の優先度について
HTMLの勉強をしています。以下のソースですと、“cellpadding”が機能しません。試しに、*{margin:0; padding:0;}を外しレンダリングしてみると、うまくいきました。これは、やはり、「“タグの属性”と“スタイル”での指定なら、“スタイル”が優先されると考えてよいのですか？」 よろしく、お願いします。 <!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=utf-8" /> <title>無題ドキュメント</title> <style text/css> *{ margin:0px; padding:0px; } </style> </head> <body> <table width="200" border="1" cellspacing="1" cellpadding="15"> <tr> <td>セルパディング</td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
補足
回答ありがとうございます。 body{ margin:0 padding:0 } というのはＭｄＮを読んでいたら当たり前のように記述されていた のでこれは必須なのかなぁと思ってしまいました。 *{ margin:0; padding:0; } は全ての要素を初期値に戻すものでしたね。 そうするとあまりブラウザの初期値は気にする必要はない ですかね？？