- ベストアンサー
background-imageを徐々変化させたい
- CSSのtransitionプロパティを使用して、background-imageを徐々に変化させる方法を説明します。
- 要素に:hover疑似クラスを追加し、マウスが乗った時に背景画像が変化するようにします。
- しかし、現在のコードでは正しく動作しないようです。修正する方法についても説明します。
- takaten123
- お礼率50% (3/6)
- CSS
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
No.2です。 えらく冗長だと思ったら重複してますね。 <style type="text/css"> <!-- html,body{margin:0;padding:0;background-color:gray;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;background-color:white;} div.header{position:relative;} div.header div.nav{width:100px;position:absolute;top:100%;left:0;} body>div.section h2, body>div.section>p,body>div.section>div.section{ margin-left:100px; width:auto;min-width:0; } div.header div.nav ol,div.header div.nav ol li{margin:0;padding:0;list-style:none;} div.header div.nav ol li{width:100px;height:40px;position:relative;overflow:hidden;} div.header div.nav ol li a{display:block;width:100%;height:100%;text-indent:-100px;} div.header div.nav ol li a:after{display:block;position:absolute;left:100px;top:0;opacity:1;} div.header div.nav ol li a:hover:after{opacity:0;} /* 時間的変化 */ div.header div.nav ol li a:hover:after{ -moz-transition-property: opacity; -webkit-transition-property: opacity; -o-transition-property: opacity; -ms-transition-property: opacity; -moz-transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s; -ms-transition-duration:1s; -moz-transition-timing-function:ease-in-out; -webkit-transition-timing-function:ease-in-out; -o-transition-timing-function:ease-in-out; -ms-transition-timing-function:ease-in-out; } /* ここまで */ div.header div.nav ol li a[href="/"]{background-image:url(./images/navi/home2.gif);} div.header div.nav ol li a[href="/"]:after{content:url(./images/navi/home.gif);} div.header div.nav ol li a[href="/books"]{background-image:url(./images/navi/books2.gif);} div.header div.nav ol li a[href="/books"]:after{content:url(./images/navi/books.gif);} div.header div.nav ol li a[href="/profile"]{background-image:url(./images/navi/profile2.gif);} div.header div.nav ol li a[href="/profile"]:after{content:url(./images/navi/profile.gif);} --> </style> まあ、デザインのためにHTMLは書かないようにしましょう。その意味でTABLEは禁止!! 先でナビゲーションを横に並べようとしたり、増えたりするたびにHTMLやスタイルシートを書き直すなんて羽目になります。 ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) で、ブラウザの表示メニュー→スタイル(シート)と進んで、スタイルを色々と変えたり印刷プレビュー見たりしてみましょう。HTMLにはデザイン的要素は全くないので、どのようにもデザインできますね。 それをしないことには、始まりません。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ごく簡単なサンプル挙げておきます。 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) で検証済みのHTML4.01strict + CSS3です。 ★タブは＿に置換してあるので戻す。 ★HTML5にする場合は、<!doctype html>にして、<div class="header"></div>→<header></header>、<div class="nav"></div>→<nav></nav>のように変更して、CSSも書き換える。 ★画像は添付のような物 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;background-color:gray;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;background-color:white;} div.header{position:relative;} div.header div.nav{width:100px;position:absolute;top:100%;left:0;} body>div.section h2, body>div.section>p,body>div.section>div.section{ margin-left:100px; width:auto;min-width:0; } div.header div.nav ol,div.header div.nav ol li{margin:0;padding:0;list-style:none;} div.header div.nav ol li{width:100px;height:40px;position:relative;overflow:hidden;} div.header div.nav ol li a{display:block;width:100%;height:100%;text-indent:-100px;} div.header div.nav ol li a:after{display:block;position:absolute;left:100px;top:0;opacity:1;} div.header div.nav ol li a:hover:after{opacity:0;} div.header div.nav ol li a:hover:after{ -moz-transition-property: opacity; -webkit-transition-property: opacity; -o-transition-property: opacity; -ms-transition-property: opacity; -moz-transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s; -ms-transition-duration:1s; -moz-transition-timing-function:ease-in-out; -webkit-transition-timing-function:ease-in-out; -o-transition-timing-function:ease-in-out; -ms-transition-timing-function:ease-in-out; } div.header div.nav ol li a[href="/"]{background-image:url(./images/navi/home2.gif);} div.header div.nav ol li a[href="/"]:after{content:url(./images/navi/home.gif);} div.header div.nav ol li a[href="/books"]{background-image:url(./images/navi/books2.gif);} div.header div.nav ol li a[href="/books"]:after{content:url(./images/navi/books.gif);} div.header div.nav ol li a[href="/profile"]{background-image:url(./images/navi/profile2.gif);} div.header div.nav ol li a[href="/profile"]:after{content:url(./images/navi/profile.gif);} div.header div.nav ol li a:after{ -moz-transition-property: opacity; -webkit-transition-property: background-image; -o-transition-property: background-image; -ms-transition-property: background-image; -moz-transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s; -ms-transition-duration:1s; -moz-transition-timing-function:ease-in-out; -webkit-transition-timing-function:ease-in-out; -o-transition-timing-function:ease-in-out; -ms-transition-timing-function:ease-in-out; } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="/">Top</a></li> ＿＿＿＿<li><a href="/books">書籍</a></li> ＿＿＿＿<li><a href="/profile">プロフィール</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>本文はsection</p> ＿＿<div class="section" id="section1"> ＿＿＿<h3>項見出し</h3> ＿＿＿<p>本文項記事</p> ＿＿＿<p>sectionの階層でレベルが判断される</p> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
background-imageプロパティはtransitionでは変化させることが出来ません。 理由は、数値でない--時間的変化可能なプロパティではないからです。!!言われてみれば当たり前の事ですが・・ If one of the identifiers listed is not a recognized property name or is not an animatable property( http://www.w3.org/TR/css3-transitions/#transition-property-property ) opacityプロパティを使います。 なお、プレゼンテーションにtableを使うべきではありません。 ・単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 ) ・ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) 1999年のHTML4.01の勧告以来強く言われ続けた事です。 DIV要素に「id属性及び class属性と併用することで、文書に構造を付加( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」することで対応します。HTML5だと「文書をよりよく構造化するために、( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」nav要素が追加されました。 すなわち、HTML4.01(XHTML1.0,XHTML1.1)でしたら <div class="header"> <div class="nav"> <ol> <li><a href="/">トップ</a></li> ・・・ HTMLでしたら <header> <nav> <ol> <li><a href="/">トップ</a></li> ・・・ とすべきです。
お礼
ORUKA1951さま 色々とご教授ありがとうございました。 これからはtableは使わず始め良く考えて構築したいと思います。 今回は色々と勉強させて頂き ありがとうございました