- 締切済み
タグ内にstyleを使うのは・・・
- みんなの回答 （4）
- 専門家の回答
みんなの回答
正しいです。 理想的なのは「外部／内部」参照ですが、「直接記述」をしないと反映しないブラウザ（ドコモなんかでは有名）ではこうした方が確実。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
≫こういう書式は正しいのでしょうか？ どういう意味でしょうか？ 仕様書(2.3.5 スタイルシート)＿_http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/intro/intro.html#h-2.3.5 ＿＿より引用 より強力なプレゼンテーション機構をスタイルシートが提供するため、 World Wide Web Consortium は、HTMLのプレゼンテーション関連要素・ 属性を、段階的に縮小させていくこととする。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで 昔なら、画像の上にスペースを空けたい場合、ここに透明な画像などを配置していたものですが、スタイルシートを用いることによって、余分なことをしなくて良くなった。 スタイルシートの使い方は、いろいろあり、ここ( http://oshiete1.goo.ne.jp/qa4553184.html )にも簡単に説明がありますが、 1) 外部スタイルシート 2) <head></head>内の<style></style>内 3) HTMLの各要素内 の順番で推奨ですから、 ≫こういう書式は正しいのでしょうか？ 正しいが、推奨順からは下位 まず、 はじめてのWebドキュメントづくり http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ から、きちんと学ばれると良いでしょう。
お礼
ありがとうございます。 いろいろ例を出していただき、きちんと理解できそうです。
- SAYKA
- ベストアンサー率34% (944/2776)
あまり美しい使い方ではないけれど携帯とかでは外部CSSを持てないのでそう書いてあるのが結構あるね。 それと外部CSSよりもタグに直接書いてある方が後に適用されるからそれを利用したstyleすげ替え(javascriptね)の時に便利なやりかただね。
お礼
ありがとうございます。 携帯では当たり前の書式なんですね。 確かに便利なやり方だなぁと感じました。
- koke29
- ベストアンサー率58% (114/196)
正しいですよ 参考URLのページから後ろ3ページまで読めば色んな方法があるってことが わかると思いますので、よかったら見てみて下さい
お礼
参考まで出してくださりありがとうございます。 とても参考になりました！
関連するQ&A
- addressタグを入れると揃わない
かなり簡素なページをデザインしていますが、フッターの画像をaddressタグではさむと、フッター画像だけ20ピクセル程右に寄ってしまい全体が揃いません。addressを除くと揃うのですが。 ページのソースは htmlファイル <div id="wap"> ここにSWFファイル <div id="nav"> <ul> <li>～</li> </ul> </div> <address><img footer.jpg" /></address></div> CSSファイル #wap { width: 800px; height: 570px; text-align: left; margin-right: auto; margin-bottom: 50; margin-left: auto; position:absolute; left:50%; top:50%; margin-top: -285px; margin-left: -400px; } #nav { background-color: #666666; margin-top: 0px; margin-bottom: 0px; font-size: 12px; color: #FFFFFF; float: left; width: 100%; } #nav ul { list-style-type: none; margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 28px; } #nav li { display: inline; padding: 0px; } 全体を#wapに入れて上からSWF、リストタグのナビ、画像のフッターと入った大変簡素なページですが、フッターの画像をadreesタグで挟むとフッター部分だけ左に20ピクセル程ずれて揃わなくなります。 どなたか解消出来る方おられませんでしょうか。
- 締切済み
- HTML
- スタイルシート【複数の画像の配置について】
初めまして、質問させていただきます！ 今、サイトを構築中なのですが、そこで困ったことがおきました。 <link rel="stylesheet" type="text/css" href="./default.css" media="all" /> <style type="text/css"> <!-- Body{ margin:0 margin:0;} --> IMG.a{ position: relative; left:60px; top:60px;z-index:1;} IMG.b{ position: relative; left:100px; top:20px;z-index:0;} </style> </head> <Body Style="margin:0 margin:0;"> <img class="a" src="**" alt="**" width=197 height=143> <img class="b" src="**" alt="**" width=78 height=59> このように、スタイルシートで画像の位置を指定しているのですが、 画像を増やしていくと、下（または上）に余白が出来き、どんどんスクロールが出来るようになってしまい、うまく画像を配置できなくなってしまいます。 ちなみに画像はFireworksで作ったものを書き出したものです。 他にタグを打ち込むなどで、解消できるのでしょうか？ 構築は初めてで、タグの知識もほとんどありません。 どうか、よろしくお願いいたします。
- 締切済み
- HTML
- <P>タグと<div>タグについて
<P>タグと<div>タグには“前後に空行が入るかどうか”という違いがあるそうですが、下記のようなデータを作り、自分のホームページに記入したところ、前後に全く空行が入りませんでした。 しかし、自分のホームページ以外で、このデータを試してみたところ、<p>タグにはきちんと空行が入るようです。 記入する場所によって、空行が入ったり入らなかったりするのは、なぜなのでしょうか？ ※ブラウザはIE8を使用しています。 <P align="right" style="width:740px;margin:auto;">●●●</p> <P align="right" style="width:740px;margin:auto;">●●●</p> <P align="right" style="width:740px;margin:auto;">●●●</p> <div align="right" style="width:740px;margin:auto;">▲▲▲</div> <div align="right" style="width:740px;margin:auto;">▲▲▲</div> <div align="right" style="width:740px;margin:auto;">▲▲▲</div>
- 締切済み
- その他（インターネット・Webサービス）
- メニューをスタイルシートで設定
画像を使用したメニューをULタグとLIタグで作成し、 スタイルシートで余白等の設定しましたが、画像の下に余白が入ってしまいます。 背景色をつけたところ、LIタグに余白がついていることは 確認できたのですが、これをなくす方法が分からずにいます。 HTML----------------------------------------------------- <UL> <LI><IMG src="img/img1.gif" width="265" height="21"></LI> <LI><IMG src="img/img2.gif" width="265" height="21"></LI> <LI><IMG src="img/img3.gif" width="265" height="21"></LI> </UL> CSS----------------------------------------------------- UL { list-style-type:none; margin:0px; padding:0px; } LI { padding:0px; margin:0px; } アドバイスを頂けると助かります。 どうぞよろしくお願い致します。
- ベストアンサー
- HTML
- スタイルシートが効かない
bodyに以下のスタイルを適用しています。 body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; font-family: 'Arial', 'ＭＳ Ｐゴシック', sans-serif; font-size:12px; line-height:150%; color:#333333; } フォントサイズを12にしているのですが 別のフォントサイズとしてクラスで10pxを指定しても WindowsIEだと、10pxに表示されません。 また、bodyの12pxの指定をはずしても 10pxの指定が反映されませんでした。 ただし、16pxなど他のクラスだと反映されます。 10pxが反映されない理由が分かりません。 どなたかお分かりになる方 いらっしゃいましたら、ご教授願います。 よろしくお願いします。
- ベストアンサー
- その他(業務ソフトウェア)
- spanタグ 無視される
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sample</title> <style type="text/css"> span.test{ padding: 6px 0px; background-color: gainsboro; text-align:center; border: 1px gray solid; margin-top:10px; margin-bottom:8px; color: gray; width: 100px; } </style> </head> <body> <span class="test"> <a href="#A"> A</a> </span> <br> <span class="test"> <a href="#B"> B</a> </span> </body> </html> ------------------------- というソースで spanタグで padding: margin-top:10px; margin-bottom:8px; width: が無視されてしまうのですが なぜでしょう？ 更に画像のように文字が重なってしまいます。 padding: margin-top:10px; margin-bottom:8px; width: これらを適用させるにはどうすればいいでしょうか？ AとBは隣同士に表示したいため、divではなく、spanを使用しました。
- ベストアンサー
- HTML
- HPのelement.styleを消したいです
HPのelement.styleを消したいです。 ブラウザサイズの幅を600pxにしたあたりで element.styleが適応されmargin-top:115pxが出ます。 こちらを無効化したいです。 わかる方がいましたら、教えて頂きたいです。 よろしくお願い致します。 http://attonoto.info/test_02/
- 締切済み
- HTML
- IEとFirefoxの見え方のずれにおけるCSSの解決法（liタグ）
こんにちは、質問させて下さい。 現在 li タグを使って、メニュー（画像）を作っていたのですが、 IEでは表示されるのですが、firefoxだとどうしても左に余白が出てしまいます。 マーカーボックスの指定が消えていないのかな、と素人ながらに思うのですが、それが正しいのか、正しくとも正しくなくとも、ではどう直せばいいのか分かりません。 どうぞご回答お願いいたします。 以下は、そのliに関連するCSSと、ソースです。 ■CSS #div{ width: 458px; float: left; text-align: center; border-top-width: 2px; border-bottom-width: 2px; border-top-style: dotted; border-bottom-style: dotted; border-top-color: #333333; border-bottom-color: #333333; padding-top: 10px; padding-bottom: 10px; margin-bottom: 15px; margin-right: auto; margin-left: auto; padding-left: 10px; } #div ul{ list-style-type:none; display: block; width: 432px; text-align: center; margin: 0px; } #div li { float: left; height: 200px; width: 140px; margin-right: 4px; margin-bottom: 10px; margin-top: 0px; margin-left: 0px; } #div li img{ border:none; ■html <div> <ul> <li><a href="1.html"><img src="image/menu1.jpg" alt="品"></a></li> <li><a href="2.html"><img src="image/menu2.jpg" alt="品"></a></li> <li><a href="3.html"><img src="image/menu3.jpg" alt="品"></a></li> <li><a href="4.html"><img src="image/menu4.jpg" alt="品" /></a></li> <li><a href="5.html"><img src="image/menu5.jpg" alt="品"></a></li> <li><a href="6.html"><img src="image/menu6.jpg" alt="商"></a></li> </ul> </div> 宜しくお願いいたします。
- ベストアンサー
- HTML
- styleタグとbodyタグの関係について分かりません・・・
スタイルシートの中にbodyを入れた場合、</html>の前に</body>は必要でしょうか？それとも不要でしょうか？ 下記のタグはマウスオーバーで画像の濃さを変えるようにしたかったため、サイトより転用しました。 スタイルの中にbodyタグを入れる意味はどういった利便性がありますか？ <style type="text/css"> <!-- body { margin-left: 2em; margin-right: 2em; style: overflow-x:hidden; color: black; background: #FFFFFF; } a:link { color: blue; } a:visited { color: purple; } h1 { font: bold 1.5em Verdana; } a img { filter: Alpha(Opacity=100); -moz-opacity: 1.5; border-style: none; } a:hover img { filter: Alpha(Opacity=50); -moz-opacity: 0.5; } --> </style> ご存知の方教えてください！
- ベストアンサー
- HTML
- <img>タグにCSSのclass設定可能？
<img>タグにスタイルシートのclassは、直接設定できるのでしょうか？ 例えば,以下のようにテーブルの中にexample.jpgという画像があるとします。 <table border="4" width="250"> <tr> <td align="left"> <img src="example.jpg" width="100" height="100" borde="0"> </td> </tr> </table> この場合、<td align="left">とあるのでexample.jpgはセルの中で左揃えになって表示されます。 質問1： ここで、スタイルシート使用して、<td align="left">のまま、example.jpgをセルの中で中央揃えにして表示したいとします。また、スタイルシートを使用して、example.jpgの上下には10pxのマージンを設定します（ここでは、スタイルシートに関する質問のため、あえてhspaceは<img>タグに使用しません。）。スタイルシートの指定は、<head></head>内で行なうことにします。 この場合、以下のように<img>タグの中に直接classを設定できますか？できない場合は、その理由、正しいやり方等をお教え下さい。 <head> <style type="text/css"> .abc{ text-align:center; margin-top:10px; margin-bottom:10px: } </style> </head> <table border="4" width="250"> <tr> <td align="left"> <img class="abc" src="example.jpg" width="100" height="100" borde="0"> </td> </tr> </table> やはり、<div></div>で<img>タグを囲んで、 <head> <style type="text/css"> .abc{ text-align:center; margin-top:10px; margin-bottom:10px: } </style> </head> <table border="4" width="250"> <tr> <td align="left"> <div class="abc"> <img src="example.jpg" width="100" height="100" borde="0"> </div> </td> </tr> </table> などとするしか方法がないのでしょうか？ 質問2： また、スタイルシートを使用せずに、上記のテーブルで<td align="left">のままexample.jpgを中央揃えにする方法はあるのでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
お礼
ありがとうございます。 やはり携帯はそれでなければならないほどなんですね。 またひとつ知識が増えました。