- ベストアンサー
背景をダウンロードさせない方法について
以下のサイトを参考にして、右クリックで画像を保存されないようにしてみました。http://www.stylish-style.com/csstec/basic/g-photo-guard.html しかし、残念ながら右クリックすると普通に保存出来てしまいます。何がいけないのでしょうか。 ＜htmlファイル＞ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>画像保存禁止</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="sample"> <span class="guard"></span> <img src="略" alt="画像" width=650 height=918> </div> </body> </html> ＜cssファイル＞ div.sample { position:relative; width:650px; height:918px; } span.guard { position:absolute; display:block; width:100%; height:100%; border:thin solid black; background-image:url(img/beach.png); }
- rio_grande
- お礼率77% (349/452)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
関連するQ&A
- 背景画像をCSSで中央に指定し、さらにその背景画像の中に違う画像を
背景画像をCSSで中央に指定し、さらにその背景画像の中に違う画像を 位置指定したいのですが、うまく反映されませんでした。 「 background-position: center center; 」「 background-position: center center; 」 がCSS側での背景画像位置指定と多くヒットしたのですが、反映はされませんでした。 「 margin-left: 80px; 」を指定したところ、画面中央に位置が反映されたのですが 画面サイズを１０２４×７６８から１２８０×１０２４に変更すると 中央から左寄りにずれてしまいます。 下記に実際のソースを記載致しますので、どなたか解る方がいらっしゃいましたら アドバイスの程宜しくお願いいたします。 － 画面サイズを変更すると位置がずれてしまうソース － @charset "utf-8"; #img { width: 700px; height: 125px; background: url(img.jpg); margin-left: 80px; background-repeat: no-repeat; } #img #img2 { float: right; margin-right: 0px; margin-left: 30px; margin-top: 59px; margin-bottom: 0px; } ---------------------------------- － HTML － <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>img</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body"> <div id="img"> <div id="img2"><img src="img_1.gif" width="50" height="30" border="0" /> <img src="img_2.gif" width="50" height="30" border="0" /></div> </div> </body> </html> ------------------------------------------- － 検索でヒットした位置指定のソース － @charset "utf-8"; #img { width: 700px; height: 125px; background: url(img_2.jpg); background-position: center center; background-repeat: no-repeat; } #img #img2 { float: right; margin-right: 0px; margin-left: 30px; margin-top: 59px; margin-bottom: 0px; } ------------------------------------------- － HTMLは上記と同じ －
- ベストアンサー
- HTML
- 左寄せを中央に表示できますか？
左寄せを中央に表示できますか？ 現在ホームページを作成しています。 画面で表示させると全体が左寄せで表示されています。 画面を開いたら添付の画像のようにグレーの画像を真ん中にくるよう表示させたいのですが、出来ますか？ よろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>安心</title> <meta name="keyword" content="," /> <meta name="discription" content="" /> <link rel="stylesheet" type="text/css" href="styles.css" media="all" /> </head> <body> <div id="top_main"> <div class="title_top"> <div id="sub_title"> <img src="images/main_top_left.jpg" width="484" height="609" alt="サブ" /> </div> <div id="main_title"> <img src="images/main_top.jpg" width="900" height="322" alt="メイン" /> </div> <div id="sub_title_b"> <img src="images/main_top_right.jpg" width="532" height="609" alt="サブ" /> </div> </div> </div> </body> </html> /* reset css */ html,body,div,h1,h2,h4,h5,h6,p,a,span,em,storng,table,tr,td,th,dl,dd,dt,object,embed,ul,li,ol,img{ margin : 0; padding : 0; /* font-family:Helvetica, "MS Pゴシック", "メイリオ", Osaka, "ヒラギノ角ゴ Pro W3", serif;*/ } a img{border : none;} div#top_main{ width:auto; } div.title_top{ width:2000px; margin:0px auto; } div#main_title{ width:900px; height:382px; position:relative; margin:0px auto; margin-top:0px; float:left; } div#sub_title{ width:484px; height:609px; position:relative; margin-top:0px; float:left; } div#sub_title_b{ width:532px; height:609px; position:relative; margin-top:0px; float:left; }
- 締切済み
- HTML
- CSS適用時に背景画像をテキストの上に上書きする
XHTMLでテキストで入力したものを、CSS適用時に背景画像をテキストの上に上書きして画像に置き換えたのですが、そこがリンクしてる場合オンマウスしてもマウスカーソルが、リンク用のアイコンに切り替わらず困ってます。 ---XHTMLのソース--- <div id="logo"> <h1> <a href="index.html"> <span></span>テキスト部分</a> </h1> </div> ---CSSのソース--- #logo{width:106px;float:left;margin:0;padding:0;} #logo h1{font-size:10px;position:relative;width:106px;height:43px;} #logo span{background:url("../img/logo.gif") no-repeat;width:100%;height:100%;position:absolute;} （購入した本に載っていたテクニックなんで、 h1とspanに対して何でpositionでrelativeとabsoluteを入れる必要があるのかも正直分からない状態です。） ご指導宜しくお願いします。
- ベストアンサー
- CSS
- positionの設定の仕方について
中央に1つの大きな画像を配置。 そしてその画像の左右の任意の位置に、リストを配置しようと考えています。 しかし、以下のような表記にしましたがリストが思うように配置されません。 職場ではリストの配置まではうまく行きました。 が、自宅の環境で見ると、職場とはどこかの設定が違っているのか、DW8上では配置されているのですが、ブラウザ上(IE、Ff)ではリストが全く動いていません。 画像はきちんと配置されています。 どうしてこういう違いがでるのかさっぱり分からず、質問させてもらいました。 よろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>ポジションタグ練習用ページ </title> <link href="css/position2.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="position"> <ul> <li id="01"><a href="1.htm">あいうえお</a></li> <li id="02"><a href="2.html">かきくけこ</a></li> </ul> <img src="images/flower.jpg" alt="花" width="260" height="402" id="img"> </div> </body> </html> -------------------- #position { position: relative; left: 0px; top: 0px; } #img { position: relative; height: 402px; width: 260px; left: 85px; top: 0px; } #01 { position: absolute; height: 20px; width: 100px; left: -11px; top: 0px; background: #FFFFCC; } #02 { position: absolute; height: 20px; width: 100px; left: 360px; top: 26px; background: #FFCC99; }
- ベストアンサー
- HTML
- CSSのposition：fixedでIE6にも対応させたい Part.2
前回の質問でアドバイスを元に作ってみました。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>XYXYXYXYXY</title> <style type="text/css"> * { margin:0; padding:0; color:#FFFFFF; } body { background-color:#000000; text-align:center; } div#pagebody { width:684px;margin:25px auto; } span#a1 { position: fixed; bottom:50px; left:0px; right:0px; } h1 { font-size:44px; font-weight:bold; padding:25px; } div#left { width:342px; float:left; } div#right { width:342px; float:right; } </style> <!--[if lt IE 7]> <style type="text/css"> html {overflow: hidden;} body { height: 100%; overflow: auto; } span#a1 { position: absolute; } </style> <![endif]--> </head> <body> <div id="pagebody"> <h1>XXXXXXXXXX</h1> <div id="left">XYXYXYXYXY</div> <div id="right">XYXYXYXYXY</div> <div id="left">XYXYXYXYXY</div> <div id="right">XYXYXYXYXY</div> <table width="480" height="2000" border="1" cellspacing="5" cellpadding="5"> <tr> <td> </td> <td> </td> </tr> </table> <span id="a1"><a href="#"><img src="3top.jpg" width="240" height="95" border="20"></a></span> </div> </body> </html> 上記でFirefoxはほぼ完璧のようです。 jpgが見れませんが実際jpgを用意すると見れます。 （tableが何故かセンタリングしていませんが、、、スクロールバーで確認するためにtableを入れただけです。） 問題のIE6です。 IE6ではセンタリングが全く作用していません。 （tableは何故かセンタリングが作用しています、、、スクロールバーで確認するためにtableを入れただけです。） かなりの初心者なので何故XHTMLが出てきたのかさっぱり理解できませんが あとはIEのセンタリングだけなのでアドバイスお願いします！
- 締切済み
- HTML
- XHTML1.1でposition:relative指定したdivの挙動
XHTML1.1で、widthとheightをpx指定したdiv（divA）の中に、position:relative;を指定したdiv（divB）を配置した場合、 divAよりdivBの幅が広くなると、divBの内容がdivAの外側にはみ出して表示されてしまいますよね。 これを回避する方法はないのでしょうか。 以下簡単ですがサンプルです。 ----- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> #divA { width: 200px; height: 200px; border: 1px solid #000; overflow: scroll; } .divB { position:relative; } </style> </head> <body> <div id="divA"> <div class="divB"> ************************************************************************************************************<br /> </div> </div> </body> </html>
- ベストアンサー
- CSS
- 画像の貼り方教えてほしいです
CSSの画像の貼り方がわかりません body{ background-color: #f2f2f2; padding: 0; margin: 0; } div#container { width: 700px; padding: 0; margin-left: 150px; background-color: white} div#header { background-color: blue; badkground-image: url(画像.jpg); width: 640px; height: 233px ｝ 画像の部分のCSSはこんな感じです。 htmlは <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="roll.css" type="text/css" media="all" /> </head> <body> <div id="container"> <div id="header"> </div> <div id="menu"> <ul> <li><a href="#">web</a></li> <li><a href="#">title1</a></li> <li><a href="#">title2</a></li> <li><a href="#">css</a></li> <li><a href="#">seo</a></li> </ul> </div> <div style="clear:both; "></div> </div> </body> </html> こうなってます。 ここまで何が間違っているかわかりません。 初心者ですがどなたかわかる方よろしくお願いします。
- 締切済み
- HTML
- 背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示する方法
背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示するようにしたいと思ったのですが、背景画像も常に中央に表示されてしまいます。 そのため、上記の現象の対処法について何かご教示いただける方がいらっしゃいましたら、よろしくお願いします。 【やりたい事】 1. ブラウザの横幅が1024の際、背景画像を画面中央に表示したい。 2. ブラウザの横幅が1024の際、背景画像の上に表示されている画像を画面中央に表示したい。 3. ブラウザの横幅が1000以下の際、ヘッダーやコンテンツやフッターという文言の表示方法と同じように、左側を基準に表示したい。 4. ブラウザの横幅が1000以下の際、背景画像の上に表示されている画像は画面中央に表示したい。 【現状】 1,2,4は出来ています。 ただ、3については、ヘッダーやコンテンツやフッターという文言の表示方法と同一にする方法が分からず、画面中央に表示されてしまいます。 【ソースコード】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>title</title> <style type="text/css"> <!-- body { text-align: center; margin:0; padding:0; } #wrapper_index_up, #wrapper_index_bottom { margin: 0 auto; text-align: left; } #wrapper_index_up, #wrapper_index_bottom, #header, #contents, #footer { width: 1000px; } #header { background-color:red; } #top_img_wrapper { background-image:url(http://cdn.oshiete.goo.ne.jp/images/top/search_bk.gif); background-repeat:no-repeat; background-position: center; } --> </style> </head> <body> <div id="wrapper_index_up"> <div id="header">ヘッダー</div> </div> <div id="top_img_wrapper"> <img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif" alt="" width="139" height="92" /> </div> <div id="wrapper_index_bottom"> <div id="contents">コンテンツ</div> <div id="footer">フッター</div> </div> </body> </html> どうかよろしくお願いします。
- ベストアンサー
- HTML
- CSSで、フレーム的な表現をしたいのですが、スマートなやり方を教えてください。
CSSにて、「サイドメニュー」「ヘッダ」「コンテンツ」と言うコンテンツを制作したく、以下のソースを記述したのですが、コンテンツ部分（.contents）を100%にすると当然、ヘッダ部分（.header）の100px分がはみ出てしまい、サイドメニュー（.side）の下に余白がでてしまいます。 これを回避するために、現状position: fixed;を使用し、IE用には分岐で他のcssを読ませるようにしているのですが、もっとスマートに、ひとつのcssでこのレイアウトを実現する方法はないものでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <title>test</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> <!-- *{ margin: 0px; padding: 0px; } html, body { height: 100%; width: 100%; overflow: auto; } .header { position: absolute; left: 200px; width: 300px; height: 100px; background-color: #ddd; } .side { position: absolute; width: 200px; height: 100%; background-color: #aaa; } .contents { position: absolute; margin-top: 100px; margin-left: 200px; width: 300px; height: 100%; background-color: #333; overflow: auto; } --> </style> </head> <body> <div class="header"> header </div> <div class="side"> side </div> <div class="contents"> contents<br /> </div> </body> </html>
- 締切済み
- HTML
- IE以外のブラウザでスペース
お世話になります 現在、ホームページを作っているのですが <?xml version="1.0" encoding="EUC-JP"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <body style="margin-top:0px;"> <table cellpadding="0" cellspacing="0"> <tr> <td style="vertical-align: top;"><img src="img/01.gif" width="180" height="20" alt="画像1" /></td> <td style="vertical-align: top;"><img src="img/02.gif" width="180" height="5" alt="画像2" /></td> </tr> </table> </body> </html> とやったときに IE6.0では上にスペースなく表示されるのですが NN7.1やOpera、Firefoxなどでは画像2の方の上にスペースが入ってしまいます このスペースをなくす方法はないでしょうか？ よろしくお願いします
- ベストアンサー
- CSS
お礼
出来ました。なるほどbeach.pngはimg src=の方に書くんだったんですね。助かりました。（ホントに"略"って書いちゃってました。。（汗））有難うございました。