- 締切済み
ページのトップへの画像
ページのトップへの画像をcssにしようと思っています。 現在 ＝＝＝ html ＝＝＝ <html lang="ja"> <head> <meta charset="utf-8"> <style type="text/css"> <!-- div.box { width: 90%; height: 20px; color: #ffffff; background-color: #000000; padding: 3px 10px 3px 10px; } .gotop { float: right; padding-top: 3px; } --> </style> <title>Title Box</title> </head> <body> <div class="box"><a href="#top" class="gotop"><img alt="gotop" src="gotop.png"></a>Title Box</div> </body> </html> のようになっているソースを画像を指定してのcssに変えたいと思っていますがうまくできません。 上手にする方法を教えてください。
- synchro-night
- お礼率44% (71/161)
- CSS
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
CSSを利用する目的はなんでしょう??。 かってHTML3.2あたりまでは、プレゼンテーションをHTMLで行おうとしてきたために、人にはわかるけど、機械には無論、障害者のためのスクリーンリーダーや点字端末、あるいは画像を利用できないユーザーには利用できなくなってしまったからでした。 そのため1999年勧告のHTML4.01では、文書構造とプレゼンテーションの分離が強く勧められることになりました。 そのため、文書構造を記述するHTMLは極めてシンプルになりました。 文書構造はidやclassを使ってDIVで行います。 『id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 <body> <div class="header"> <p class="go_Top"><a href="/">Top</a></p> <h1>タイトル</h1> <div class="nav"></div> </div> <div class="section"> <h2>本文見出し</h2> </div> <div class="footer"> </div> </body> 参考--HTML5では、より厳密になって <body> <header> <p class="go_Top"><a href="/">Top</a></p> <h1>タイトル</h1> <nav>ナビゲーション</nav> </header> <section> <h2>本文見出し</h2> </section> <footer> </footer> </body> になります。 これで、検索エンジンにも点字端末にもスクリーンリーダーでも理解できるHTMLができました。パンくずリスト( breadcrumb list http://ja.wikipedia.org/wiki/%E3%83%91%E3%83%B3%E3%81%8F%E3%81%9A%E3%83%AA%E3%82%B9%E3%83%88 )の一種ですね。 div.header,div.section,div.footer{ width:90%;min-width:640px;max-width:900px; margin:0 auto; } div.header{position:relative;} div.header p.go_Top{ position:absolute; top:3px;right:3px; width:80px;height:80px; background-image:url([画像のURL]); text-indent:-10em; } <p class="go_Top"><a href="/"><img src="[画像URL]" width="80" height="80" alt="トップへ"></a></p> の場合は、 div.header p.go_Top{ position:absolute; top:3px;right:3px; } だけでよいです。SEO的にも差があるわけではありません。 もしこの画像をCSSで変更したいなら、HTMLはそのままで上記CSSに変更すれば良いです。
