- ベストアンサー
タイプの動画は？HTMLを勉強する人のための参考サイト
- HTMLを勉強している人のための参考サイトを作成したい方へ
- 参考サイトを例に、ボタンのオーバーマウス時のキラキラ処理やアニメーションの仕組みについて解説
- 動きのある要素についてはJQueryを使用している可能性がある
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
No.2の回答は、参考にされたサイトを基にしていますから、もっと簡単な例を h1:hover:after{content:"▲;} h1:after{content:"△";} で、h1に△を追加しておき、h1にポインターが乗ると▲に変わります。 ・content ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html#content ) ・:before、:after疑似要素 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html#before-after-content ) 詳細度を比較すると、h1:hover:afterは[0012]で、h1:afterは[0,0,0,2]ですから、前者が優先されますね。 ・Calculating a selector's specificity ( http://www.w3.org/TR/CSS2/cascade.html#specificity ) これを画像にする場合は content:url(); です。このcontentは、章番号を自動的に振ったりすることに利用することが多いですが、このように画像やテキストを加えることもできます。 挿入される内容の位置は、positionと座標で指定します。 ・指定しなければ、そのまま:beforなら前に、:afterなら後 ・追加される内容相対配置する場合は、position:relativeで指定してずらします。 ・絶対配置する場合は、直近のstatic以外の親になる要素の座標を基準にします。 h1{position:relative;} h1:after{content:"▽";postion:absolute;top:-100%;left:0;} h1:hover:after{content:"▼";color:red;} ・配置体系 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#positioning-scheme ) ※質問は画像と言う表題でしたが、画像はアニメーションGIFで良いです。 それを表示するためにはスタイルシートを使用すると良いでしょう。HTMLには何も手を加えなくて良いですしね。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
いまどき、まったく参考にならないHTMLでありスタイルシートです【はっきり言うと決してまねをしてはならないものです。】・・・これについては最後に説明します。 しかし、同様なことはCSSを使ってとっても簡単にできます。 HTMLが <body> <div class="header"> <h1>タイトル</h1> </div> <div class="section"> <h2>見出し</h2> <p>記事を書く</p> <div class="nav"> <ol> <li><a href="/">Top</a></li> <li><a href="./profile">Prifile</a></li> <li><a href="./contact">Contact</a></li> <li><a href="./linls">Links</a></li> </ol> </div> <p class="link"><a href="" class="pre">Prev</a><a href="./2page.html" class="next">Next</a></p> </div> <div class="footer"> <h2>文書情報</h2> </div> </body> だったとします。HTMLにはこのように文書構造しか書きません。またdivやspanはidやclass名を使って、文書構造を補完するためのものです。 →『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 画像はブリンク(点滅)する星と歩く鳥のGIF画像(アニメーションGIF)と、鳥の静止画像があればよいです。 body{width:100%;height:100%;position:relative;} div.nav ol,div.nav ol li{display:block;list-style:none;margin:0;padding:0;text-align:center;} div.nav ol li{width:15%;display:inline-block;position:relative;margin:0 2%;} div.nav ol li a{display:block;width:100%;height:100%;} div.nav ol li a:hover{content:url([ブリンク画像]);position:absolute;bottom:100%;left:0;} p.link a{display:block;width:100px;height:100px;line-height:100px;position:absolute;top:50%;} p.link a.pre{left:0;} p.link a.next{right:0;} p.link a.pre:after{position:absolute;content:url([左向き鳥]);bottom:100%;left:0;} p.link a.next:after{position:absolute;content:url([右向き鳥]);bottom:100%;right:0;} p.link a.pre:hover:after{position:absolute;content:url([左に歩く鳥]);bottom:100%;left:0;} p.link a.next:hover:after{position:absolute;content:url([右に歩く鳥]);bottom:100%;left:0;} とかになるでしょう。HTMLには文字を書いておいて、スタイルシートで文字色(リンク色)を透明にして背景を置いても良いでしょう。 HTMLをこのように、文書構造だけ書いておけば、スタイルシートを書き換えることでまったく異なるデザインに出来ます。 ★示されたサイトが駄目な理由 Another HTML-lint 5 ( http://www.htmllint.net/en/html-lint/htmllint.html# ) で採点すら出来ない。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 注。 CSSではclass属性が非常に大きな力を持っている。 したがって文書作成者は、体裁に殆ど何の関係も無い要素（HTMLだとDIV要素やSPAN要素など）をベースにして、それらにclass属性でスタイル情報を与えれば、独自の構造化言語を設計できると考えられる。 しかし、文書の構造要素は広く受け入れられている一般的意味を持つ場合が多いので、こういった使用法は避けるべきである。 文書作成者が定めたクラス名では、意味を理解してもらえない場合もある。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#class-html )］より divの用途が完璧に間違ってますね。私は十数年この世界にいますが、これほど酷いものははじめてみました。
お礼
お礼が遅くなりすまいせん！ javaのソース名をありがとうございました☆
- torayoshi
- ベストアンサー率62% (910/1449)
JQueryも使われてますが、キラキラのエフェクトは、 top_effect.png（トップのキラキラ）とtop_over.png（マウスオーバーのキラキラ）をplatinum_effect.jsで連続的に高速で切り替えてる（上下にずらしてる）ようです。 （top_over.pngを背景として切り替えてる） マウスオーバーで画像を切り替えるのはCSSでよく使われてる手法と同じです。 nextボタンの鳥さんは分かりませんでした（たぶん同じかなと） 分かったのはここまでです。 全体的にとても複雑でそれ以上は分かりませんでした。 回答でなくて申し訳ないです。
お礼
お礼が遅くなってすいません！ 調べていただきましてありがとうございます！
お礼
お礼が遅くなりすまいせん！ 丁寧な解説とソースをありがとうございました☆