- ベストアンサー
タグの属性とスタイルの優先度について
Questaの回答
- Questa
- ベストアンサー率48% (13/27)
>“タグの属性”と“スタイル”での指定なら、“スタイル”が優先されると考えてよいのですか？ その通りです。スタイルが優先します。 「属性は詳細度 0 に相当するCSS規則として解釈される。それらは制作者スタイルシートの先頭に挿入されているかのごとく扱われ、後続するスタイルシートで上書きされるかもしれない。」 http://www.w3.org/TR/CSS21/cascade#preshint (CSS 2.1) 6.4.4 Precedence of non-CSS presentational hints
関連するQ&A
- ブラウザ上部に余白があります。
近い現象はありましたが、解決出来なかったのでご質問させて頂きます。 下記のソースでhtmlを制作しましたが、#headerの上に余白があります。 どうすればこの余白をとる事が出来るでしょうか？ お教え頂ければと思います。 ↓ソース↓ <!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 type="text/css"> <!-- html, body{ margin:0; padding:0; } div#header{ background-color: #F00; margin:0px; padding:0px; } --> </style> </head> <body> <div id="header"> <h1>test</h1> </div> </body> </html>
- 締切済み
- HTML
- liタグ中の二つのTABLEの間を埋めたい
お世話になります。 現在二つのテーブルタグを埋めたくて、思考錯誤中です。 普通にTABLEタグを利用すると、二つのテーブルは隙間なく埋まります。 これをliタグに持っていくと、隙間が発生しております。 これを埋める方法はありませんでしょうか？ 何卒よろしくお願いします。 （ちなみに私の環境はIE6です。） <!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> <title></title> </head> <body style="background-color:Black;"> <div> <table> <tr> <td> <table style="background-color: Red;"> <tr> <td> a </td> </tr> </table> <table style="background-color: Red;"> <tr> <td> b </td> </tr> </table> </td> </tr> </table> </div> <ul> <li style="text-align: left; vertical-align: middle;"> <table style="background-color: Yellow;"> <tr> <td> a </td> </tr> </table> <table style="background-color: Yellow;"> <tr> <td> b </td> </tr> </table> </li> </ul> </body> </html>
- ベストアンサー
- HTML
- DreamWeaverでのスタイルシート適用後のプレビューについて
最近やっとDreamWeaverを購入してテーブルからCSSデザインに 乗り換えようと奮闘中のものです。 外部スタイルシートに div#container { background: #ffffff; padding: 20px; margin: 10px 30px; border: 2px solid #999999; } と書き、 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" /> <link href="/test.css" rel="stylesheet" type="text/css" /> <title>test</title> </head> <body> <div id="container"> test web site </div> </body> </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>無題ドキュメント</title> <html> <style type="text/css"> <!-- #main { width: 800px; margin-right: auto; margin-left: auto; background-color: #FFFFFF; } body { margin:0px; padding:0px; background-color: #999999; } --> </style> </head> <body> <div id="main"> <p><img src="images/head_01.gif" width="800" height="1000" /></p> </div> </body> </html>
- ベストアンサー
- ブログ
- h3タグのCSS装飾
おせわになります。 h3テキストの左横にアイコンを設置し、 下線としてドットラインをひこうと思います。 アイコンをh3背景画像で表示し、 ドットラインをh3タグの外にdivをおき表示させているのですが、 ドットラインを表示させる為のだけのdivタグなので、 あまり良い方法とは思わないのですが、 他に良い方法はありますでしょうか？ ▼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>テスト</title> <style type="text/css"> <!-- h3 { font-size:14px; margin:0; padding:0; background: url(http://www.geocities.jp/ajax3210/arrow.gif) no-repeat 3px 2px; padding-left:25px; } .h3-dotline { padding-top:10px; padding-bottom:10px; background:url(http://www.geocities.jp/ajax3210/dotline.gif) repeat-x left bottom; --> </style> </head> <body> <div class="h3-dotline"> <h3>テキストテキスト</h3> </div> </body> </html>
- ベストアンサー
- CSS
- スタイルシートでテーブル
とても基本的な事なのですが、 以下のコードを実行すると IE6 で見た時に セルの下に隙間が出来てしまいます。 Firefox 2.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=shift_jis" /> <title>[ Picture ]</title> <style type="text/css"> <!-- * { margin: 0px; padding: 0px; } #container { width: 750px; border: 1px solid #ccc; background: #fff; margin: 0 auto; } #section1 { text-align: center; background: blue; } #section2 { text-align: center; background: red; } --> </style> </head> <body> <div id="container"> <div id="section1"> <img src="images/picture01.jpg" /> </div> <div id="section2"> <img src="images/picture02.jpg" /> </div> </div> </body></html> -------------------------------------------------------------
- ベストアンサー
- CSS
- ie6.0で、余分なmargin-bottom(padding-bottom)が表示される
ieのバージョンのちがいで、表示が異なってしまいます。たとえば、ホームページのタイトル画像を、table要素とimg要素で表示させたとき、ie6.0では、余分なmargin-bottom(padding-bottom?)が付加されます。どうやれば、統一できるのでしょうか？ （参考のために、レンダリングの見本を画像で添付しておきました。） <!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"? lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="keywords" content="ダイエット" /> <meta name="description" content="ダイエット効果の高いサプリメントやダイエット食品を紹介。また、豆乳ダイエットやキャベツダイエット、 プロティインダイエットなどの簡単にやれて成功率の高いダイエット法なども紹介しています。" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="INDEX" href="./index.html" /> <link rel="stylesheet" href="./base.css" type="text/css" media="all" /> <link rev="MADE" href="mailto:aaa@yahoo.co.jp" /> <title>美容ダイエットグッズランキング・総合トップ10/Team-10kg—1年で-10kgのダイエットを</title> </head> <body style="background-color:#000000;"> <table style="width:100%; background-color:#c0c0c0;" cellspacing="0" cellpadding="0"> <tr style="background-color:#ffff00; margin-bottom:0; padding-bottom:0;"> <td style="background-color:#ffff00; margin-bottom:0; padding-bottom:0;"> <a href="./index.html"><img style="vartical-align:middle; border-style:none; margin-bottom:0; padding-bottom:0;" src="./img/title.jpg" alt="Team-10kg" width="192" height="50"></a> </td> ------------------------------------------------------------------- @charset "utf-8"; *{ margin: 0; padding: 0; } table{ width:800px; color:#ffff00; background-color:#000000; } table,tr,td { margin: 0; padding: 0; } </tr> </table> </body> </html>
- ベストアンサー
- HTML
- ホームページをセンターに表示したい！！
DreamweaverCS3を使ってホームページを作成しています。 ホームページをセンターに表示したく、 marginをautoにしてもセンターに表示されません。 いったい何が原因なのでしょうか？？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- saved from url=(0014)about:internet --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 中略 <style type="text/css"> td img {display: block;}body { margin:auto; } ↑この部分です。 どなたかご教授下さい。
- ベストアンサー
- ホームページ作成ソフト
- このhtmlソースのFontの相対指定における問題点を教えて下さい。
このhtmlソースのFontの相対指定における問題点を教えて下さい。 html初心者です。（CSSは、まだです。） 文字フォントを相対値（単位は、％）で書いているのですが、うまくいきません。 （諸事情により、CSSを使わずに表示させなければなりません…） 作成したいWebページのイメージ図があり、 そのイメージ図で表示されている文字と同じフォントサイズ にするため相対値で設定したのですが <font size="4%"> でちょうど同じ大きさになってしまいました。 しかも、5以降の大きい数字の値にすると表示されるフォントも4%より大きくなるのですが、 そのサイズは5%でも50%でも100%でも全部同じ大きさで変わりません。 普通、相対値の場合 100% が普通の大きさというか基準の大きさになると思うのですが 今、コーディングしているページではそうはいきません。なぜなのでしょうか？ また、どこをどう変更すれば相対値 100% と書いた時、基準となる大きさを表示させられるのでしょうか。 今回、コーディングにおいて条件が付いています。それは、以下の通りです。 ・CSSは、使わない。 ・basefont sizeは、指定しない。 ・相対値の単位は、％とする。 また、よろしければFontの相対指定について基準・推奨設定方法も教えて下さい。 以下に作成中のファイルから抜粋したソースを示します。 ブラウザで表示する場合、エンコードを Unicode(UTF-8) で表示させて下さい。 <?xml version="1.0" encoding="utf-8"?> <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>システム</title> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/" /> </head> <body style="margin-top : 0px"> <table align="center" style="margin-top : 0" cellspacing="0" cellpadding="0"> <tr> <td valign="top"> <table style="margin-top : 0" cellspacing="0" cellpadding="0"> <tr> <td valign="top"> <!--フォントサイズを相対値で指定--> <font size="4%"> <a href=>システム</a> </font></td> </tr> </table> </td> </tr> </table> </body> </html> 以上、よろしくお願いします。
- 締切済み
- HTML
- javascriptでちゃんと表示されない。
javascriptの参考書通りに書いてるのになぜか出ません。 なぜか、新製品と価額だけしかでません。 リラックスチェアとか価額４０００とかが出ません。 何が原因かわかりません。 何が原因なんでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>はじめてのHTML</title> <style> table{border:solid 1px orange; border-spacing:0pc;} th,td{border:solid 1px orange; padding:4px;} </style> <script type="text/javascript"> var prod_name={'リラックスチェア','リラックスデスク','ブックスタンド'}; var prod_price ={4000,12000,800}; </script> </head> <body> <h1>新商品価額表</h1> <table> <thead> <tr><th>製品名</th><th>価額</th></tr> </thead> <tbody> <script type="text/javascript"> document.write('<tr>'); document.write('<td>'+ prod_name[0]+'</td>'); document.write('<td>'+ prod_price[0]+'</td>'); document.write('</tr>'); </script> </tbody> </table> </body> </html>
- ベストアンサー
- JavaScript
お礼
W3Cの記事を引用していただいての丁寧な回答ありがとうございました。