![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
お分かりになるかた教えていただきたいのですが、
普通はないのですが、HPで横に長い例えば5000PXぐらいの背景があって、それを普通に表示させると一番左に寄って表示されてしまします。色々試したのですが、この横長背景を真ん中の部分つまり2500PXあたりをページを読み込んだ時に表示するやりかたはありますでしょうか?
このようなページは普通つくらないとは思いますが、今回は横長ということで考えています。ですが、自分がセンターに読み込みの時に表示させたい、つまり背景画像を作ったときにセンターの位置に表示させたい部分が真ん中に作ったもので、どうにか読み込みの時に左に寄らないで背景を、と考えております。
もちろんスクロールが発生しますが、真ん中表示させて、スクロールは右左ということです。今は左寄りにつめられて表示なので右にしかスクロールしません。。
お分かりの方お力をお貸しください。
どうぞ宜しくおねがいいたします。
No.3ベストアンサー
- 回答日時:
<a href="#pos">みたいな形でリンクしておけば、その場所にスクロールします。
<a name="pos" id="pos" style="position:absolute;top:0;left:2500px;"></a>
もしくは
<script type="text/javascript">
onload=function(){
scrollTo(2500,0);
};
を書いておくかですね。
> ですが、自分がセンターに読み込みの時に表示させたい、つまり背景画像を作ったときにセンターの位置に表示させたい部分が真ん中に作ったもので、どうにか読み込みの時に左に寄らないで背景を、と考えております。
すみません、わかりません。
<body style="background-image:url(image.jpg);
background-position: top -2500px;">
としておけば、画像の左側2500ピクセル分を隠せます。
余談ですが、<a>については色々云われがありますが、
スクロール(アンカー)を目的として<div id="pos"></div>という空の要素を入れるくらいなら、
「アンカーを意味する<a>」を使う方が良いと、私は思います。
ブロック要素が必要でnameを使いたくなければ
<div style="略"><p style="width:0;height:0;overflow:hidden;"><a id="pos"></a></p></div>
とするのが良いと思いますが、あくまで私見ですので、悪しからず。
写真の表示のさせ方次第で、他にもっと適切な方法はあると思いますが。
本当にありがとうございます。助かりました。
こちらの
<script type="text/javascript">
onload=function(){
scrollTo(2500,0);
};
であれば、今後横のサイズが変わったときにでも値を変えることによって好きな位置をセンターに持ってこれるので重宝しそうです。
本当に普通ならこんなことはしないのですが、普通だから普通じゃないことをやってみようということになりまして。。。。
写真の表示のさせ方は色々とサイトを観て回っては探しているのですが、今回のものはあまりに無謀?なということもありまして、見つけることができなかったものですから。
とにかく、ほんとうにありがとうございました。
私ももっと勉強をしまして自分で解決できるようになれるようにがんばりたいと思います。
お手数をおかけいたしまた。
No.2
- 回答日時:
良く解らないので再度質問を整理して解り易く説明して下さい。
5000pxの画像なんて普通は表示させませんよ。
この回答への補足
そうなのです。普通はそんなに横に長い写真などは表示させないのですが、今回は、例えば360度のパノラマ写真があったとします。
写真で言えば、4枚とか5枚の写真が合成でくっついているようなものです。
で、その1枚分がモニターに納まる感じで映るのですが、
このパノラマを画像を縮小などしないで、そのまま横スクロールで
HPにしたいIMGとして貼り付けたいということなのです。
もちろん普通はそんなことしないのですが、あえて今回はということなのです。
ですので、4枚の写真が連なったパノラマ写真を横スクロールでということです。
そのパノラマ写真を表示する時に左端から表示をしないで、ブラウザが読み込んだら真ん中を表示させたいということです。
真ん中がデフォルトの表示設定ですので、横スクロールが右左になるということです。
説明が上手くなくて申し訳ないのですが、お力をお貸しいただけないでしょうか。なにとぞ宜しくおねがいいたします。
No.1
- 回答日時:
>もちろんスクロールが発生しますが、真ん中表示させて、スクロールは右左ということです。
背景として配置ではなく、<img>でということですか?
背景でいいなら、スタイルシートのbackground-positionでどうとでもなりますけど、imgだとJavaScriptが必要になるんじゃないでしょうか。
ラベルリンクでできたかな?
ちょっと確認しないと分かりませんけど。
background-position
http://www.tagindex.com/stylesheet/page/backgrou …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- Windows 10 zoomで自分の顔の背景 3 2023/06/07 22:34
- レトロゲーム ファミコンのインベーダー。なぜ左右に動けるのか? 1 2022/07/05 14:19
- その他(Microsoft Office) googleスプレットシートで左右の数値を比較して色判別させたい 2 2022/06/06 18:33
- JavaScript HTML&CSS Javascriptによる動的テーブル 1 2023/03/27 19:51
- その他(ブラウザ) zoomのバーチャル背景が選べない 4 2022/12/08 12:38
- その他(Microsoft Office) エクセルでの作成データをモニター画面内に収めたい。 1 2022/04/23 11:52
- 美術・アート デザインについての考察。 なぜ人の脳は、規則正しく連続した要素を「背景」と認識するのか、実験してみま 2 2022/04/11 21:08
- Windows 95・98 タスクバーの背景の色だけを変えたい。 2 2022/07/13 14:44
- その他(IT・Webサービス) PCの画面表示 1 2022/08/05 11:06
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像とその下にあるテキストの...
-
lightbox2で画像を天地左右中央...
-
iframe内をクリックさせない方...
-
画像の上にテキスト配置で、拡...
-
background-repeat CSS で切れ...
-
画像の大きさに合わせて文字の...
-
ページの上下に白い横線が入る
-
要素の幅をいろんな写真の幅に...
-
<hr>の縦バージョンはありますか?
-
htmlかcssで背景の白い枠をなく...
-
html言語で背景画像を中央...
-
CSSでサイトの背景に画像を組み...
-
ホームページ作成で不動の背景
-
背景画像をブラウザ上部に隙間...
-
background-imageにmax-width:1...
-
WEB上でディレクトリ内の画像を...
-
IE6だけ最後の文字を数文字繰り...
-
CSSサイトの印刷時のレイアウト...
-
Googleマップの埋め込みで上部...
-
サイトは中央配置、背景に画像...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
画像とその下にあるテキストの...
-
lightbox2で画像を天地左右中央...
-
画像の上にテキスト配置で、拡...
-
background-repeat CSS で切れ...
-
【Webサイト】画像が小さく表示...
-
IMGタグで画像の繰り返し使用は…
-
background-sizeの背景で最小値...
-
同じ画像 複数回使用
-
【至急お助け!】チェックボッ...
-
iframe内をクリックさせない方...
-
htmlかcssで背景の白い枠をなく...
-
background-sizeでcontainする...
-
CSSで背景画像をランダムに表示...
-
ページごとに背景画像を変更し...
-
画像上に文字を表示するとiPhon...
-
LightBoxの矢印の出し方
-
WEB上でディレクトリ内の画像を...
-
submitボタンの上に重ねた画像...
-
CSS マウスオーバーでテキスト...
おすすめ情報