インラインフレーム内のコンテンツを縮小表示する

  • 2017.11.09 Thursday
  • 23:58

htmlを書いていて思うことがあります。

インラインフレーム内に入れ子にしたコンテンツを

「縮小してサムネイルのようにしたい」と。

 

ところが、これは一筋縄では行かなくて、

なかなか苦戦します。

デスクトップだけではなく、iPhoneなどのスマホにも対応しようと思うと大変。

そんな中、試行錯誤の末、

ひとつの着地点を見出したのでメモ。が今回のお題目。

 

<まえおき>

例によって例のごとく、筆者は何の責任も負わないのでそのつもりで。

 

<結果>

上のようになりました。

このインライン部分のソースの記述は、下のようになっています。

<div style="width:100%;overflow:scroll;-webkit-overflow-scrolling:touch;border:solid 1px;">
  <iframe height="600" name="sample" src="https://docs.google.com/spreadsheets/d/1GvSM8GOd1eFs6wXN2pzfF4k9v3Esxr5NILFkhEJBNcA/edit?usp=sharing" style="transform:scale(0.5);-moz-transform:scale(0.5);-webkit-transform:scale(0.5);-o-transform:scale(0.5);-ms-transform:scale(0.5);transform-origin:0 0;-moz-transform-origin:0 0;-webkit-transform-origin:0 0;-o-transform-origin:0 0;-ms-transform-origin:0 0;border:solid 1px;margin-bottom:-300px;margin-right:-100%;width:200%;">この部分はインラインフレームを使用しています。
  </iframe>
</div>

肝心なのは、

  • 紫色の文字:ググると多く散見される部分で、インラインフレーム内を「0.5」に縮小(つまり50%)し、起点を左上にする。iPhoneなども含めた多くのブラウザに対応するために各記述を並べる。
  • 緑色の文字:iPhoneなどでスクロールを可能にする。
  • iframeタグをdivタグで囲ってやる。
  • 赤色の文字:囲んだdivタグで、横幅を100%にしてやらないと、入れ子にするコンテンツが表示領域の横幅をはみ出る場合、右側に余白が生まれて意味のない横スクロールが発生する。
  • 青色の文字:iframeタグで縦を指定した数値の半分を、下部のマージンでマイナスしてやる事によって、余計な余白を消す。
  • 橙色の太文字:入れ子のコンテンツは元の50%に縮小しているので、元の倍の「200%」にしてやる事によって、内容は縮小されたまま表示領域の横幅一杯に表示される。そして、横幅「100%」を、右側のマージンでマイナスしてやる事によって、無駄な余白を消す。

という内容なのだけれど、

面倒ならコピペして変えたい部分だけ弄って理解すればよろし。

入れ子のコンテンツのURLは何でもいいので、見やすくグレーアウト。

他の要素は、見やすくするための隠し味。

 

以上。

お役に立てましたら、このページへチップをスローにて投げ銭をば。

最低金額は「10円」からできるようです。

 

 

 


お気に召しましたら、一票(ワンクリック)下さい。ランキングに参加しておりますゆえ。


人気ブログランキング

ウェブデザインランキング

[このブログの「selected entries」「categories」へジャンプする]

コメント
コメントする








    

calendar

S M T W T F S
      1
2345678
9101112131415
16171819202122
23242526272829
30      
<< September 2018 >>

カウンターなど


[このブログの「selected entries」「categories」へジャンプする]


[✓]

ユグドア」(YggDore)に登録済みです。
カンパやチップを大歓迎します!
要望等も受け付けてます。
(できる範囲が狭いが)

このページへチップを贈る



DIYフリークの集い
(ウェブリング)

前へ
このサイト名欄
次へ
ランダムに飛ぶ
リンク一覧
参加を希望する
Q&A

ランダムでサイトをひとつ紹介します。



Twitterも↓やってます

お勧めソフト、サービスなど

私がよく使うショップ

  ヨドバシ.com/ヨドバシカメラ  

  モノタロウ  

  Amazon.com  

  西友-SEIYUドットコム  

イオンショップ

私も「ビッグローブ光」に乗り換えました。↓


私も「mineo」に乗り換えました。
満足度調査でトップクラスらしい。↓



私も「Norton Internet Security」使ってます。↓

シマンテックストア




楽天モーションウィジェット
A8.net版

(あなたのご利用傾向から)





利用しているアフィリエイト


機能的かも↓


「西友 SEIYUドットコム」のアフィリエイトならここ↓


記事が少なくても審査に通りました。↓

リンクシェア アフィリエイト紹介プログラム

「住信SBIネット銀行」のアフィリエイトならここ↓

アフィリエイトのアクセストレード

誰もが知る楽天市場↓


なんでもござれのAmazon↓





試用スペース

試しに貼ってみた

↓ローテーションバナー(無作為)






ここまで試用スペース



selected entries

categories

archives

recent comment

recommend

links

profile

search this site.

others

mobile

qrcode

powered

無料ブログ作成サービス JUGEM