- ベストアンサー
スタイルシート使用の際、”style”と”class”を一緒に記述するのは問題はないのでしょうか？
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
文法的には問題ありません。ただし，No. 2 のご回答にもありますように，style 属性によるピンポイント爆撃はスタイルシートのうまみを薄めてしまうので，おすすめしかねるところです。さらに，新しい HTML（XHTML 1.1）では，「style 属性の使用は推奨されない」となっています。 ここで，もしこのような記述をされた場合に気をつけなければならないのは，指定の優先順位です。 厳密にはかなりややこしくなりますが，一般的には，class 属性を通じて指定されたもの（class 属性で絞り込む CSS の記述）より，style 属性で指定したもののほうが優先順位が高くなります。 この点注意してご使用ください。
その他の回答 (3)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
問題有りません、 class指定によるスタイルの指定より、 直接style属性で指定したスタイルの方が（重複する指定に関して）優先されます。
お礼
ありがとうございます。 その点に気をつけながら作成していきたいと思います。
- jakarta
- ベストアンサー率38% (607/1597)
私も結果として整合性がとれているならば、ある意味で問題はないといえるかと思います。 しかしソースの可読性が低くなるのと、修正がややこしくなりますので避けるべきと思います。個人的にはそのように記述したことはありませんね。
お礼
早速の回答ありがとうございました。 確かに、修正はややこしくなりそうですね。 ソースが見にくくなるので、できるだけ避けたいと思います。
構いません。 最終的にスタイルシート全体に矛盾がなければいいのです。 （仮に矛盾があったとしても、言語的なシステムトラブルは発生しません。ただ、ブラウザによって見え方が変わったりするだけです）
お礼
早速の回答ありがとうございます。 勉強になりました。
関連するQ&A
- スタイルシートのテーブル枠について
今までテーブルを利用してホームページに簡単な線を つけていました。これをスタイルシートで行うと 微妙にうまくできません・・・お助けください。 すべてＩＥで検査しております。 html従来の私の線の引き方 <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#000000"> <img src="sps.gif" width="600" height="1"> </td> </tr> </table> 上記の表現をスタイルシートを利用してやりたいのですが 線が１pxのはずが、大きくなってしまいます。 cssを利用した記述 css部分 .index_table{ width: 600px; border:0px; border-width: 0px; margin: 0px; padding: 0px; } html部分 <table class="index_table"> <tr> <td bgcolor="#000000"> <img src="ims/sps.gif" width="600" height="1"> </td> </tr> </table> これに似たいい方法は、ないでしょうか？ 質問が、うまくまとまってなくてすみません・・・
- ベストアンサー
- HTML
- テーブルタグの属性をスタイルシートで記述するには？
<table width="730" border="0" cellspacing="0" cellpadding="0"> をCSSで記述する場合に足らない部分や間違っているところを教えてください。 <table class="test"> table.test{ width: 760px; }
- ベストアンサー
- HTML
- スタイルシートの書き方
HPの中に以下のようなテーブルを並べて作っているのですが、後からまとめて編集しやすいようにCSSファイルを別に作ろうと思います。 自分であれこれ試してはいるのですが、スマートな（？）スタイルシートの書き方がいまいちわかりません。 どのように指定すればいいでしょうか？ 因みに下のタグもかなり自己流な部分があるのではないかと思うので、おかしいところがあれば指摘してください。 よろしくお願いします。 ------------------------------------------------------ <table border="0" bgcolor="#000000" cellspacing="0" cellpadding="0"> <tr> <td> <table border="0" cellspacing="1" cellpadding="2" width="500"> <tr><td bgcolor="#ffffff" width="150">AAA</td><td>BBB</td></tr> </table> </td> </tr> </table>
- ベストアンサー
- CSS
- CSS(スタイルシート)で画像の縦サイズに合わせて、中央揃えで文字を表示したい。
CSS(スタイルシート)で画像の縦サイズに合わせて、中央揃えで文字を表示したい。 スタイルシートで、画像の縦サイズに合わせて中央揃えで文字を表示したいのですが、 どのように記述したら良いのかわかりません。 下記のようにテーブルを使えば簡単に出来るのですが、 これをスタイルシートのみで表現するにはどのように記述すればいいのでしょうか？ ちなみに左側画像の縦サイズは変わります。 よろしくお願いします。 ------------------------------------------------------------------- <html> <head> <title>CSS</title> <style type="text/css"> <!-- #waku { width: 451px; margin: 0; padding: 6px 8px 6px 8px; background-color: #008837; } --> </style> </head> <body> <div id="waku"> <table width="435" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="80"><img src="hoge.gif" width="80" height="変わります"></td> <td width="355" valign="middle">あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</td> </tr> </table> </div> </body> </html> -------------------------------------------------------------------
- 締切済み
- HTML
- スタイルシートでpaddingを使うと背景がずれる
はじめまして。はじめて質問させて頂きます。 スタイルシートに関する質問なのですが、例をあげて質問させて頂きます。 sample.html---------------------------- 途中抜粋 <table border="0" cellspacing="0" cellpadding="0" > <tr> <td id="key1">例</td> </tr> </table> style.css-------------------------------- td#key1 {background-image: url(image/sample.gif); vertical-align: top; padding-top: 5px;} 以上のようにテーブルの中で"例"という文字を上から5px分下にずらしたいので、vertical-align: top; padding-top: 5px; と記述してあげたのですが、"例"という文字と同時に、背景である(sample.gif)も同時に下方向にずれてしまいます。背景がずれないようにするには vertical-align: top; padding-top: 5px; という記述以外に何か記述方法がありますでしょうか？ よろしくお願い致します。
- 締切済み
- HTML
- 楽天ブログ・日記の下に表示のおすすめアイテムって・・・。
ブログ初心者です。 いつかはアフェリエイトまでできると良いな～と思っていますが、まだその前の段階ですでにつまづいております・・・（汗） メインの日記の下に、おすすめアイテムを載せられるように設定したのですが、こちらの画像は私自身で気にいった商品を載せられるのですよね・・・。 （もしかして、楽天の広告ページ？？） 【Recommend Item】ってタイトルに出ています。 今まで、自動的にブログの内容に合うようなアイテムが表示されているような気がしますが、好きな雑貨などを載せたいのですが・・・。 もし自分で出来るならどのように画像を載せればいいのでしょうか？？ たとえばですが、アフェリエイトのやり方のページで出ていたこの商品を載せたい場合、この部分をどこに載せるとブログのおすすめアイテムに載せられるのか教えてください。 すみません・・・。 パソコンが苦手で、↓これも間違っているのかな？と思っています。 <a href="http://***" target="_blank"> .:*:.*.:*:.2本ベルトのフォーマルシューズ .:*:.*.:*:. </a> ************** さらに、画像の載せ方が分からないのですが、こちらのテンプレートを製作した方は全然ブログをされていないようなので、もし、分かる方でいらっしゃったら教えてください！ コチラは、トップやアフェリエイト部分のテンプレートらしいのですが 。 <center><table cellspacing="3" cellpadding="0" width="560"><tr><td width="33%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0" style="border:2px solid #CCFFFF"><tr><td style="border:12px dotted #E0FFFF"><table cellspacing="0" cellpadding="2" style="border:2px dotted #CCFFFF" bgcolor="FFFFFF" width="140" height="140"><tr><td align="center" valign="middle">画像１</td></tr></table></td></tr></table></td><td width="34%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0" style="border:2px solid #CCFFFF"><tr><td style="border:12px dotted #E0FFFF"><table cellspacing="0" cellpadding="2" style="border:2px dotted #CCFFFF" bgcolor="FFFFFF" width="140" height="140"><tr><td align="center" valign="middle">画像大２</td></tr></table></td></tr></table></td><td width="33%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0" style="border:2px solid #CCFFFF"><tr><td style="border:12px dotted #E0FFFF"><table cellspacing="0" cellpadding="2" style="border:2px dotted #CCFFFF" bgcolor="FFFFFF" width="140" height="140"><tr><td align="center" valign="middle">画像３</td></tr></table></td></tr></table></td></tr><tr><td colspan="3" align="right"><font style="font-size:10px"> </a></font></td></tr></table></center> 画像１・２・３の部分に、何を入れるとショップの商品とリンクするのでしょうか？？ どうぞ、よろしくお願いいたします。
- ベストアンサー
- ブログ
- cellspacing="0" cellpadding="0"の推奨スタイルシート記述
初めまして。 cellspacing="0" cellpadding="0"をCSSで記述する場合。 いくつかあるかと思われますが、ブラウザ種類に対し現時点で互換性の高いと思われる、記述の仕方を教えてください。 ちょっと調べた感じでは、例えばcellspacing="0"は、一例として、 border-collapse:collapseみたいなことで、同様の意味としてスタイルシートに置き換えられるらしいです。 しかし表示結果の具合、推奨の有無を今のところ聞いていませんので、不安なんです。 現時点で、OperaやIEやFirefoxなど含め、色んな環境下で互換性が高い（推奨できる）といえる、 上級者の方から観て推奨でき得る、 よりベターなcellspacing="0"のスタイルシートへの書きかた（HTML）、 よりベターなcellpadding="0"のスタイルシートへの書きかた（HTML）、 をお教えください。 また、考え方なのですが、上記の互換性をクリアしない場合。 あらゆるユーザーのことを考えてあげれば、スタイルシートを諦め、 個別にHTMLで地道にcellspacing="0" cellpadding="0"を記述していくという考え方もあります。 ただWEBの基本原則として構造と見栄えは分離するというものがあるみたいで、 構造（HTML）に、cellspacing="0" cellpadding="0"のような見栄えを書き込んでしまうのは、 やはりNGなのでしょうか。 上級者の方から観れば、こういった構造はどのように思われますか？ もし「変」であれば、率直なご感想をお聞かせください。 しかし出来れば互換性が高いCSSの記述法が分かれば最良です。優先はスタイルシートでの解決です。 宜しくお願いいたします。
- 締切済み
- HTML
- お世話になります。htmlの質問です。
ただいまテーブル設置のことで悩んでます 更新履歴とTOP絵のテーブルがつながってしまうのです 別々にわけたいのですがいじればいじるほどサイトがめちゃくちゃになります。 自分の今のタグです。 <table width="300" border="0" align="right" cellpadding="1" cellspacing="0" bgcolor="black"> <tr><td> <table border="0" cellspacing="0" cellpadding="6" bgcolor="#FFFFFF" width="300"> <tr><td COLSPAN="6"><FONT COLOR="black"> <IMG src="img/top絵.png" border="0" align="left"> <TABLE width="100" border="0" align="right" cellpadding="1" cellspacing="0" bgcolor="#FFFFFF"> <TR> <TD BGCOLOR="black"> <FONT COLOR="white"><SMALL><B>◆更新履歴。</B></FONT> </TD> </TR> <TD> <style><!--textarea,input{ background-color:#FFFFFF; filter:Alpha(opacity='70'); font-size:x-small; }--></style> どうすればいいようになるんでしょうか？ <textarea rows="5" cols="85"> サイト開設しました。
- 締切済み
- その他([技術者向] コンピューター)
- 表の作成をスタイルシートで
皆さんはHTMLで表を作成する際、どのように作成していますか？ 私はTableタグとスタイルシートを使っているのですが、これをスタイルシートのみで 作成できないでしょうか。 例えば以下のような表で、■部分は他のセルと背景色を変えます。 ■□□ ■□□ ■□□ 通常私がやっている方法は、tableタグに下記スタイル「tb01」を、タイトル部分には 「td.title」を設定を設定しています。 -----------------HTML-------------------------- <table width="100%" border="0" cellspacing="1" cellpadding="0"> <tr> <td class="title">6月7日</td> <td>text</td> <td>text</td> <td>text</td> </tr> <tr> <td class="title">6月8日</td> <td>text</td> <td>text</td> <td>text</td> </tr> </table> ---------------------------------------------------------- -----------------スタイルシート-------------------------- .tb01 {FONT-SIZE: 12px; border-collapse : collapse ; border-width : 1px 0 0 1px ; border-style : solid ; border-color : #CDCDCD ; ; width:350px; background-color:#FFFFFF; } table.tb01 td {border-width : 0 1px 1px 0 ; border-style : solid ; padding : 7px ; line-height:120%; border-color : #CDCDCD ; } td.title {background-color:#ECECEC; } ---------------------------------------------------------- スタイルシートのみでは無理でも、もっと良い方法があれば 是非教えてください。
- ベストアンサー
- HTML
- スタイルシートのせい？IEのせい？
自己サイトのリニューアルに伴い、今までゴチャゴチャだったHTMLソースをHTML＋CSSで簡潔にしたい、と思って作業を開始したのですが、例えば下記のように （外部スタイルシート） TABLE{ padding-top : 5px;padding-left : 5px;padding-right : 5px;padding-bottom : 5px; border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-color : black black black black;} （HTMLその１） <table width="500"><tbody><tr> <td>あああああ</td> </tr></tbody></table> (HTMLその２) <table border="0" cellpadding="0" cellspacing="0" width="500"><tbody><tr> <td>あああああ</td> </tr></tbody></table> と記述しIE6で確認したところ、その２では思った通りの余白(padding)ができるのに、その１ではできませんよね。 CSSに関するページを読みあさる限りではその１の記述の方が正しいと思われるのですが・・・ CSSでpaddingを指定しているのに、わざわざHTMLで0にしなきゃいけないのが納得いかない・・・ これは私のCSSの記述の仕方が悪いのでしょうか？ それともIEの解釈によるもの？ 本当は上記のようなレイアウトも<div>でやりたいのですが、まだ抵抗があって・・・ このままでは結局以前と同じゴチャゴチャのHTMLソースになってしまいそうです・・・ ちなみにエディタはHPBv6をメインで使っていますが、最終的にはテキストエディタで手直ししています。 他のブラウザではまだ動作未確認です。
- ベストアンサー
- CSS
お礼
多々教えていただきありがとうございました。 新しい HTML（XHTML 1.1）では， 「style 属性の使用は推奨されない」とは。。。 勉強になりました！