• 締切済み

CSSがわかりません！

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

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

みんなの回答

  • DrFell
  • ベストアンサー率55% (305/551)
回答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

回答No.4

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

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答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 ) 　

  • ONEONE
  • ベストアンサー率48% (279/575)
回答No.2

そのhtmlだと、img.hogeではなく.hoge > imgです。

  • kamikami30
  • ベストアンサー率24% (812/3335)
回答No.1

あえてやってみて、自分で確認してみてください。 それでもわからなかったら質問すると良いと思います。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

職業から探して質問する
質問する