締切済み

CSSがわかりません！

2014/09/17 21:38

やりたいことは一般の画像に「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;を、一部の画像にクラスを指定し追加することは可能ですか？

takochanman
お礼率2% (1/35)

CSS
回答数5
ありがとう数0

みんなの回答 （5）
専門家の回答

みんなの回答

DrFell
ベストアンサー率55% (305/551)

2014/09/20 11:08 回答No.5

<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

ログインすると、全ての回答が全文表示されます。

kacchanchan
ベストアンサー率100% (1/1)

2014/09/19 18:33 回答No.4

ほかの方が書かれている通り基本を理解してからの方が色々と捗りそうですが、一応回答だけ。 img { transition: 0.3s; } div.hoge img { float: left; height: 100px; } <div class="hoge"><img （画像）></div> これで動きます。

ログインすると、全ての回答が全文表示されます。

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/09/18 08:22 回答No.3

スタイルシート W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/ )のメモ：CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. 　が大前提。そのためにはHTMLがきちんとできていること。その文書構造に従って[セレクタ]をもちいてスタイルを適用する要素を特定して、スタイルを記述します。 ★スタイルシートを用いてデザインする唯一最大の目的は『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』でしたね。それによって『スタイルシートは・・略・・、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )』 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-html401j/cover.html#toc ) 　⇒Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html#minitoc ) 　

ログインすると、全ての回答が全文表示されます。