CSSがわかりません！

締切済

質問者：takochanman
質問日時：2014/09/17 21:38
回答数：5件

やりたいことは
一般の画像に「transition: 0.3s;」を適用
hogeクラスの画像に「float: left;、height: 100px;」を適用
です。

CSSには
img {
transition: 0.3s;
}
img.hoge {
float: left;
height: 100px;
}
と記述しました。
これだと、<div class="hoge"><img （画像）></div>
の、（画像）の部分に「float: left;、height: 100px;」が適用されませんでした。

試しに
img {
float: left;
height: 100px;
transition: 0.3s;
}
としてみたところ、すべての画像に
float: left;、height: 100px;、transition: 0.3s;が適用されました。

ということは
img {
transition: 0.3s;
}
という、書き方がまずかったのでしょうか？

transition: 0.3s;は、すべての画像に適用したかったので
あえてクラスを設定することはしませんでしたが
この度のfloat: left;、height: 100px;を、一部の画像にクラスを指定し
追加することは可能ですか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

最新から表示
回答順に表示

No.5

回答者： DrFell
回答日時：2014/09/20 11:08

<div class="hoge"><img （画像）></div>……【原型】

とのことですね。

img.hoge {
/*
hogeクラスのついているimgという意味です。
<div><img （画像） class="hoge"></div>
なら、効きます。

【原型】hogeクラスの中の要素なら
.hoge img
と書がなくてはなりません。
スペースで開けると子孫を意味します。
もし、直下の子どもだけなら.hoge>imgとなります。

*/
float: left;
height: 100px;
}

よくある一覧表では、前者はE.Fと表され、後者はE　Fと表されます。直下の子どもならE>Fですね。とっつきやすそうなセレクタの一覧表を紹介します。実験だけではなかなかわからないので、説明書・解説書などを見ておくと理解が速いと思います。
http://zero.css-happylife.com/selectors/
http://www.tohoho-web.com/css/selector.htm

- 0
- 件

通報する

No.4

回答者： kacchanchan
回答日時：2014/09/19 18:33

ほかの方が書かれている通り基本を理解してからの方が色々と捗りそうですが、一応回答だけ。

img {
transition: 0.3s;
}

div.hoge img {
float: left;
height: 100px;
}

<div class="hoge"><img （画像）></div>

これで動きます。

- 0
- 件

通報する

No.3

回答者： ORUKA1951
回答日時：2014/09/18 08:22

スタイルシート

W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/ )の
メモ：CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。.
　が大前提。そのためにはHTMLがきちんとできていること。その文書構造に従って[セレクタ]をもちいてスタイルを適用する要素を特定して、スタイルを記述します。
★スタイルシートを用いてデザインする唯一最大の目的は『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』でしたね。それによって『スタイルシートは・・略・・、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』

img {} とは、img要素を指定するセレクタ。タイプセレクタといいます。
img.hoge {}の.hogeは、クラスセレクタでclass属性の値リストにhogeを持つimg要素
　<img class="hoge">、<img class="hoge abc">などに適用されます。
div.section p img{}の半角スペースは子孫セレクタで、その子孫(子々孫々)の要素に
　classにhogeをもつdiv要素の子孫のp要素の子孫のimg要素と言う意味

　それぞれ詳細度は
img {設定1} [0001]
img.hoge {設定2} [0011]
div.section p img{設定3}　[0013]
　になりますね。その要素について書かれたスタイルは、より詳細度が高いもので上書きされます。
<body>
　<p><img></p>設定1が適用
　<p><img class="hoge"></p>設定1が適用＜設定2が適用
　<div class="section">
　　<h2><img></h2>設定1が適用
　　<p><img></p>設定1が適用＜設定3が適用
と言う風にね。慣れれば極めて簡単でシンプルな仕組みです。

transition: のようなCSS3にいきなり飛び越さず、まずHTMLとCSS2.1あたりを徹底的に身につけてください。そのほうが絶対に早いです。「急がば回れ!!」
　⇒HTML 4.01 Specification (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　⇒Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

　