CSSがうまくいかない。

質問

サイトの冷房、ナイーブのボックスをCSSのwidthなどで変更したいと思っているのですが、classをつけてwidthをやっても何の反応もしません。属性でやると反応します。

もしかしてa href の場合はCSSもしくはclassは使えないなどタグによってはそのような事もあるのでしょうか？

回答No.4

kamepanman · ベストアンサー

ブロック要素で囲まなくても、
a.hogeclass{
display:block;
}
とすれば、aタグもブロック要素になってwidthが効きますよ！

お礼

ありがとうございます。お忙しい中大変ありがとうございました。

display:block;
とはブロック要素にすると言う意味なのでしょうか？

回答No.3

zeitakuWonder

<a>タグは「インライン要素」と呼ばれるもので、幅を指定することができません。
もし、幅を指定したい場合は<a>タグを「ブロック要素」と呼ばれる幅を持つことができるもので囲んで上げる必要があります。

※ご興味がありましたら、参照URLに詳細を貼っておきますのでご覧ください。

質問者様の場合ですと、

【HTML側】
<p class="rakutenside">
<a href=""><img src=""></a>
</p>

【CSS側】
p.rakutenside{
width:;
text-align:center; /* 真ん中に揃える場合 */
}

という風に、ブロック要素である<p>タグで囲んであげて、
囲んだ<p>タグにスタイルを記述してあげればうまくいくと思います。

参考URL：

http://www.kanzaki.com/docs/html/element-level.html

お礼

ありがとうございます。お忙しい中大変ありがとうございました。

<a>タグは「インライン要素だったんですね。
それがきっと原因です。

やってみます。

回答No.2

ORUKA1951

属性では反応しないはずです。
スタイル指定の登場する順番は関係しません。

★属性での指定は詳細度0ですから、どこにスタイルシートを書いても上書きされるはずです。width="200"
★style属性での指定は詳細度 a=0ですから、すべてのスタイルシートを上書きします。
　CSS2では、すべてのスタイル指定の最後にあるとされる。とされていましたがCSS2.1以降は、a=0となりました。

　補足
　　全称セレクタ*は詳細度　0
　　タイプセレクタは詳細度 d=1
　　クラスセレクタ/要素セレクタは詳細度 c=1
　　一意セレクタ(ID)の詳細度は b=1
　　スタイル属性での指定は a=1

　これを組み合わせて詳細度を計算します。すなわち[abcd]という4桁の数です。このとき桁上がりはありませんから、[0 2 2 10]なんてこともありえます。

スタイルの適用は
1) 出所 : ユーザーの重要宣言＞著者の優先宣言＞著者の指定＞ユーザーの指定＞デフォルトのスタイル(ブラウザ)

2) 詳細度でソートします。

3) 最後に同じ詳細度の場合は後出のもので上書きされます。
　　^^^^^^^^^^^^^^^^順番が関係するのはここです。

body div p{color:red;}
p{color:blue;}
と書いても上書きできません。

これらの仕組みをカスケーディングと言います。
カスケーディングスタイルシート(CSS)の最も重要な仕組みです。これがあるからCSSが簡単で便利ですから、使われるのです。

　とにかくカスケーディングを理解しましょう。
「classをつけて」
　の必要すらない場合がたくさんあるのです。何でかんでもclassやidをつけたらだめです。idはリンクやjavascriptのターゲットになるときだけでclassとともに
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より
　のためです。デザインしたいのでclass名をつけましたは順序が逆です。

　なお、示されたサイトはデザインがtableを使ってされていますが、これは絶対に避けるべきとされています。
・単に文書内容を整形する目的だけで表を用いるべきでない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )

お礼

ありがとうございます。お忙しい中大変ありがとうございました。

＞body div p{color:red;}
p{color:blue;}

ここが良くわかりませんでした。

回答No.1

t_ohta

CSSファイル内などで、widthの指定をしたクラスの定義の後にそのタグ名か親要素のスタイル指定でwidthを上書いていませんか？
スタイルシートは後から指定（ファイルの下の方で指定）された条件で上書いていくので、定義を書く順番が重要になります。

お礼

ありがとうございます。お忙しい中大変ありがとうございました。

親要素のdivでwidthを使っていますが、あくまでdivのしていです。
これは関係ないですよね。