すべてのカテゴリ » インターネット・パソコン » インターネットサービス

質問

終了

たとえば↓
http://www.rakuten.co.jp/worldsea/
こちらのHPの左端に画像が表示されているんですが、どうしているのかと…

  • 質問者：gaku
  • 質問日時：2009-10-30 16:16:53
  • 1

回答してくれたみんなへのお礼

ありがとうございます!!
再度、記述いただいた内容をそのままコピペした所解決しました。
ですが、さきほど試みていたタグの変わりなくどこが問題だったのかしっかりと理解
できるよう再度確認していきます。
数回に及ぶ回答ありがとうございました。
ようやく寝れます。
非常に助かりました、これからも引き続き勉強します。

ベスト回答

左端の画像というのは、ポイント５倍～福袋ほか超セールという黄緑色のオビのことでしょうか？

それのことであれば、右クリックすると「画像を保存」でなく、「背景を保存」「背景をコピー」というのが出るのがわかるでしょうか？
つまりこれは背景画像として表示されています。
そのため、印刷の設定で「背景を印刷しない」などに設定されてると印刷されないのだと思います。

方法ですが、こちらはスタイルシートというもので設定されています。
背景を「左端に表示」「縦方向に繰り返し」「スクロールする（もしくは指定なし）」という感じで設定されています。
具体的には、たとえば
body {
　background-image: url(背景画像.gif);
　background-position: left top;
　background-repeat: repeat-y;
　background-attachment: fixed;
}
といった感じで指定するのです。
スタイルシートは、外部に専用のファイルを作りそれを読み込ませるか、
HTMLの中に直接書き込むかします。
直接書く場合には
<head>
<title>Style Sheet Sample</title>
<style TYPE="text/css">
<!--



-->
</style>
</head>
これの中に上のような記述を入れ込む形になります。


参考までにサイトもご紹介します。
スタイルシート自体の詳しい仕組みはそちらをどうぞ。
http://www.htmq.com/style/background-position.shtml
http://www.tohoho-web.com/css/reference.htm#background2

===補足===
そもそもHTMLタグはわかりますか？
わかるのであれば
<html>
<head>
<style TYPE="text/css">
<!--
body {
　background-image: url(背景画像.gif);
　background-position: left top;
　background-repeat: repeat-y;
　background-attachment: fixed;
}
-->
</style>
</head>
<body>

（サイトの内容）

</body>
</html>

これで表示されます。
（背景画像.gif　の部分は半角で画像ファイルの名前を入れてください）

ちなみに、楽天のサイトは、外部のスタイルシートのファイルを読み込ませているので、上のような記述はHTML本体のソースには出てこない形になります。

  • 回答者：匿名 (質問から3時間後)
  • 1
この回答の満足度
　　
お礼コメント

返答ありがとうございます。
参考サイトまで記述いただき参考にさせていただきましたが、
やはり自分では理解できませんでした。
もう少しじっくり勉強します。
ありがとうございました。

並び替え：

回答

HPを作っている人には簡単に分かる仕組みです。
このページは、表の組み合わせです。
左端のセルを縦に結合させて、同一の画像を幾つも縦に挿入しているだけです。

  • 回答者：匿名希望 (質問から2時間後)
  • 0
この回答の満足度
　　
お礼コメント

プリントアウト時には表示されず、ブラウザ上にのみ表示されました。
それもHPは中央設置にしているんですが、こちらのページでは画面端になっていたので
方法が知りたかったので。
ご丁寧にありがとうございました。

関連する質問・相談

Sooda!からのお知らせ

一覧を見る