background-imageを徐々変化させたい

解決済

質問者：takaten123
質問日時：2014/05/20 11:16
回答数：3件

現在、二枚の画像を徐々に変化させたいと思い

～HTML～

<TABLE>
<TBODY>
<tr>
<td><a href="http://www.abcd5.com/news" class="news_botan"></a></td>
</tr>
<tr>
<td><a href="http://www.efgh5.com/news" class="news_botan"></a></td>
</tr>
</TBODY>
</TABLE>

～CSS～

.news_botan{
width:110px;
height:10px;
display:block;
background:url(IMGTXT/news0.gif) no-repeat;
transition: background-image 4.0s ease 5s;
-webkit-transition: background-image 3.0s ease 3s;
-moz-transition: background-image 3.0s ease 3s;
-ms-transition: background-image 3.0s ease 3s;
-o-transition: background-image 3.0s ease 3s;

}

.news_botan:hover{
background:url(IMGTXT/news3.gif);
}

としましたが変化しませんでした。
どうすれば徐々にnews0.gifからnews3.gifに変化する事が出来るのでしょか？

通報する

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

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： ORUKA1951
回答日時：2014/05/21 09:59

No.2です。

えらく冗長だと思ったら重複してますね。
<style type="text/css">

</style>

　まあ、デザインのためにHTMLは書かないようにしましょう。その意味でTABLEは禁止!!

　先でナビゲーションを横に並べようとしたり、増えたりするたびにHTMLやスタイルシートを書き直すなんて羽目になります。
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
で、ブラウザの表示メニュー→スタイル(シート)と進んで、スタイルを色々と変えたり印刷プレビュー見たりしてみましょう。HTMLにはデザイン的要素は全くないので、どのようにもデザインできますね。
　それをしないことには、始まりません。

- 0
- 件

通報する

この回答へのお礼

ORUKA1951さま

色々とご教授ありがとうございました。
これからはtableは使わず始め良く考えて構築したいと思います。
今回は色々と勉強させて頂き
ありがとうございました

通報する

お礼日時：2014/05/21 21:37

No.2

回答者： ORUKA1951
回答日時：2014/05/20 19:25

ごく簡単なサンプル挙げておきます。

★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">

＿</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>

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2014/05/20 15:56

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/#transitio … )
　opacityプロパティを使います。

なお、プレゼンテーションにtableを使うべきではありません。
・単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
・ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　1999年のHTML4.01の勧告以来強く言われ続けた事です。
　DIV要素に「id属性及び class属性と併用することで、文書に構造を付加( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」することで対応します。HTML5だと「文書をよりよく構造化するために、( http://standards.mitsue.co.jp/resources/w3c/TR/h … )」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>
・・・
とすべきです。