SSブログ

南房総ツアー・野島埼灯台(2016)スタイルシートでパノラマ写真のスクロールバー [旅行:千葉]

バスツアーで房総半島の最南端まで行って蜂蜜を買ってきました。
 
1.東京湾アクアライン、海ほたるPAから。
  トイレ休憩でしたが少しだけ時間をとってくれましたので写真を撮れました。
DSCN6862.JPG 
 
2.月の沙漠記念公園に到着、
  王子と姫が乗ったラクダ像があります。
DSCN6895.JPG 
 
3.まだ海には涼しいのですが好きな人がサーフィンしていました。
 DSCN6899.JPG
 
4.房総半島の最南端の野島埼灯台
  台風の中継で有名なところです。
DSCN6998.JPG 
 
5.灯台からの眺め(スタイルシートでパノラマ写真のスクロールバーを表示しています)

>

 
 
6.海の方に向かう道のパノラマ写真。


 
 
7.htmlを修正するとスクロールバーが表示できました。(^。^)
  基本的な修正方法は
  img タグをdivで囲ってstyleを追加するだけです。
元のhtmlソース
 <img width="2571" height="450" align="" alt="DSCN6999.JPG" src="xxxx.JPG" border="0" />
修正したhtmlソース
 <div style="overflow: auto;">
 <img style="width: auto; max-width: none; height: 450;"src="xxxx.JPG" border="0" />
 </div>


パノラマ写真


 
 
8.灯台から海の方に向かう道
DSCN7011.JPG 
 
9.
DSCN7012.JPG 
 
10.灯台方向の眺め
DSCN7013.JPG 
 
11.CSSやjavascriptで自動スクロールもできるのですが
   個人的には手動でスクロールしないと目が回る気がします。

(パノラマ写真)


 
 
12.(パノラマ写真)


 
 
13.ツアーのお買い物に組み込まれていた「はちみつ工房」にも行きました。
DSCN7051.JPG 
 
14.蜂さんのお仕事を聞いた後で500ccくらいの蜂蜜をお土産に購入。(^。^)

   桜の蜂蜜が売り切れだったのが残念でした。 
DSCN7053.JPG 
 
15.帰る途中でツアーバスは「東京湾観音」に立ち寄っています。
   下から見上げる角度で撮ると どうしてもウルトラマンを思い出す。
DSCN7062.JPG 
 
16.大坪山山頂に東京湾入り口に向かって建てられ、56メートルの高さがあります。
   (ウルトラマンはしらべたら40m)
DSCN7085.JPG 
 
17.大坪山山頂から東京湾。
DSCN7086.JPG 
 

パソコンの IE ではスクロールできましたが スマホ では上手くスクロールできませんでした。

ざんねん。

nice!(35)  コメント(6) 
共通テーマ:旅行

nice! 35

コメント 6

zombiekong

パノラマのスクロール面白いです~。
by zombiekong (2018-05-22 00:06) 

スイカが好き

zombiekong さん コメントありがとうございます。
スマホの場合もPCモードのページを見たらスクロールバーが付いていました。
でもちょっと残念なのでまた調査して挑戦しようと思います。
by スイカが好き (2018-05-22 22:31) 

kou

パノラマ写真は縮尺表示をして、別ウィンドウで原寸表示をしていましたが、スクロールで見せる方法もあるのですね。
これはなかなか面白いです。
by kou (2018-05-22 23:20) 

スイカが好き

kou さん コメントありがとうございます。
htmlを編集するので少し手間ですが良かったら使ってみてください。(^。^)
by スイカが好き (2018-05-23 18:03) 

YAP

昨年のGWにこの辺りを1泊で旅行しました。
都心からそんなに遠くないのに、いいところですよね。
パノラマ写真のスクロール、おもしろいです。
by YAP (2018-05-24 08:10) 

スイカが好き

千葉も良いですよね、
鴨川シーワールドやマザー牧場、
鋸山がすごい近い割には絶景だと思います。
CSSは気に入ったのがあればどうぞです。(^。^)
by スイカが好き (2018-05-24 22:43) 

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。