質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1549閲覧

CSS/javascript はみ出た要素を縮小し、画面ぴったりに表示したい

nnahito

総合スコア2004

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/11/25 15:13

編集2017/11/25 15:35

行いたいこと

table要素で縦横にはみ出た場合、セルの大きさの比率を変えずに縮小し、
画面に収めたい。
イメージ説明

質問

テーブルの、セルの大きさの比率を変えずにブラウザの画面に収めたいと考えております。
しかし、以下のようなコードを書いても表示が乱れるだけでした。

html

1<table id="element"></table>

※↑<td>タグは省略

javascript

1$(document).ready(function(){ 2 3 // ウインドウのサイズ 4 let window_width = $(window).width(); 5 6 // セルの幅 7 let cell_width = $('#element td').width(); 8 9 // テーブルの幅 10 table_width = cell_width * 100; 11 12 // テーブルの幅を拡張 13 $('#element').css('width', table_width); 14 15 // 横スクロールの幅取得 16 let scrollsize = document.body.scrollWidth; 17 18 let zoom = window_width / scrollsize; 19 20 // 画面いっぱいになるまで、ズームアウト 21 $('#element').css('transform', 'scale('+ zoom +', 1)'); 22 23});

乱れた感じ

イメージ説明

これは何故でしょうか?
利用ブラウザは、
Firefox Developer Edition 58.0b6(64bit)
です。

どのようにすれば縮小がうまくいくか、ご存じの方がいらっしゃいましたらご教示いただけますと幸いです。

追記

HTML/CSS/JSの全文

呼んでいるJSライブラリ

html

1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <title></title> 6 <meta charset="UTF-8"> 7 8 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 9 <script src="lattice.js?a"></script> 10 11 <style> 12 13 div{ 14 margin: 5px; 15 } 16 17 #element { 18 border: 1px #e0e0e0 solid; 19 table-layout: fixed; 20 } 21 22 #element td{ 23 border: 1px #e0e0e0 solid; 24 width: 50px !important; 25 height: 50px; 26 text-align: center; 27 vertical-align: middle; 28 } 29 30 .no-place{ 31 background-color: #e0e0e0; 32 } 33 34 </style> 35 36</head> 37 38<body> 39 40 <div> 41 <button id="add_row">行を追加</button> 42 <button id="add_col">列を追加</button> 43 <button id="del_row">行を削除</button> 44 <button id="del_col">列を削除</button> 45 <br> 46 <button id="get_table">中身を取得</button> 47 <br> 48 <label> 49 <input type="checkbox" id="no-place">灰色にする 50 </label> 51 </div> 52 53 <hr> 54 55 <table id="element"> 56 57 </table> 58 59 <hr> 60 <div id="out_json_text"></div> 61 62 63 <script> 64 var $Lattice; 65 66 67 $(document).ready(function(){ 68 69 $Lattice = new Lattice('#element', 'a', 100, 100); 70 $Lattice.initialize(); 71 72 // ウインドウのサイズ 73 let window_width = $(window).width(); 74 75 // セルの幅 76 let cell_width = $('#element td').width(); 77 78 // テーブルの幅 79 table_width = cell_width * 100; 80 81 // テーブルの幅を拡張 82 $('#element').css('width', table_width); 83 84 // 横スクロールの幅取得 85 let scrollsize = document.body.scrollWidth; 86 87 let zoom = window_width / scrollsize; 88 89 // 画面いっぱいになるまで、ズームアウト 90 //$('#element').css('transform', 'scale('+ zoom +', 1)'); 91 // 92 // console.log(scrollsize); 93 // console.log(window_width); 94 // console.log(zoom); 95 96 }); 97 98 99 /** 100 * 行を追加 101 */ 102 $('#add_row').on('click', function(){ 103 $Lattice.addRow(); 104 }); 105 106 107 /** 108 * 列を追加 109 */ 110 $('#add_col').on('click', function(){ 111 $Lattice.addCol(); 112 }); 113 114 115 /** 116 * 行を削除 117 */ 118 $('#del_row').on('click', function(){ 119 $Lattice.removeRow(); 120 }); 121 122 123 /** 124 * 列を削除 125 */ 126 $('#del_col').on('click', function(){ 127 $Lattice.removeCol(); 128 }); 129 130 131 /** 132 * データを保存 133 */ 134 $('#get_table').on('click', function(){ 135 let json = $Lattice.get(); 136 137 $('#out_json_text').text(JSON.stringify(json)); 138 }); 139 140 141 /** 142 * セルがクリックされたとき 143 */ 144 $(document).on('click', '#element td', function(){ 145 146 // 灰色にするボタン 147 if ( $('#no-place').prop('checked') ){ 148 $(this).addClass('no-place'); 149 } else { 150 $(this).removeClass('no-place'); 151 } 152 153 154 155 }); 156 </script> 157 158</body> 159</html> 160

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/11/25 15:31

CSSやHTMLを省略されてしまうと状況の再現が出来ません。追記していただけませんか?
nnahito

2017/11/25 15:35

ご指摘ありがとうございます。追記させていただきました
guest

回答2

0

横100個の要素ならそうなると思います。
0. scale(0.233048, 1)このようになって縦横比がおかしくなる
0. borderも1px以下になるため表示されない(ことがある)

動くサンプル:https://jsfiddle.net/8vaprgh9/

やり方に無理が有ると思います。

投稿2017/11/25 16:05

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nnahito

2017/11/25 16:33

ご回答ありがとうございます。 > やり方に無理が有る なるほど、そういうことだったのですね…… こちら、どのようなアイデアで解決を行えばよいでしょうか? もしご存知でしたらそちらもご教授いただけますと幸いです。
kei344

2017/11/25 16:43

テーブルの中身次第ですが、スクロールするか、テーブル自体の組み方を変えてしまう(コンテンツによってはテーブルを使わないことも)のが手早いと思います。 文字がセルの中に入るのであれば、文字が6pxを下回ると表示がうまくいかない(可読性が無い)可能性が高くなります。文字が無いのであれば罫線ではなく面で表現する(背景色を交互にするなど)ほうが縮小には向きます。
nnahito

2017/11/26 02:18

ご返信ありがとうございます。 > テーブル自体の組み方を変えてしまう なるほど……構成を変えないと難しい感じですね。。。 > 文字がセルの中に入るのであれば、文字が6pxを下回ると表示がうまくいかない > 文字が無いのであれば罫線ではなく面で表現する こちら、Excelで作っていた座席システムをWebで表示する仕組みにしようと思っております。 席数も多いので拡大縮小で全体を見やすくしたいなーと…… なので、この方法しか思いつかずやや困っております。
kei344

2017/11/26 14:30

今の方法では、例えば320px幅のモバイル端末で見た場合、1セルあたり2px(罫線抜いて3px)しか表示できません。色分けで席の位置関係がわかればよいなど、それで問題が無いものであれば画面幅に合わせて情報を減らしていけばよいかもしれません。 別の方法としては、映画館のチケットや航空券のチケットのように、「座席全体⇒タッチした周辺の席」という感じに 2~3段階くらいに拡大表示する方法。 上記とほぼ同じですが、GoogleMapのような拡大縮小インターフェイスで全体を見せるとか。(下記は画像を表示していますが、3段階の座席表をHTMLで作ってMapインターフェイスで動かすことも可能です) 【Extending Leaflet, New Layers - Leaflet - a JavaScript library for interactive maps】 http://leafletjs.com/examples/extending/extending-2-layers.html
nnahito

2017/11/28 05:36

ご返信ありがとうございます。 > GoogleMapのような拡大縮小インターフェイスで全体を見せる 私もこちらをイメージしておりました。 こちらはやはり画像でないと難しいのでしょうか?
kei344

2017/11/28 06:29

> こちらはやはり画像でないと難しいのでしょうか? HTMLを出すことも出来ると思いますよ。(未調査ですが、GoogleMapsAPIで5年ほど前にそういう実装をしたことがあります。同種のライブラリとして出来ると思います)
nnahito

2017/11/30 07:35

ご返信ありがとうございます。 申し訳ありませんが、英語なのでよくわかりませんでした…… 結局描画したいHTMLはどこで渡すのでしょうか? いただいたGridLayerのオプション部分にも渡せそうなあたいはなさそうでした。 一応、以下、テストで作ってみましたが、結局画像しか表示できずに断念しました。 どこにHTMLをかけば良いのでしょうか? <!DOCTYPE html> <html> <head> <title>GridLayer Test</title> <meta charset="utf-8" /> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" /> <style> body { padding: 0; margin: 0; } html, body, #map { height: 100%; width: 100%; } </style> </head> <body> <div id="map"></div> <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script> <script> // 表示する場所 var map = new L.Map('map', { center: [10, 0], zoom: 2}); // 表示する内容を作成(レイヤー作成) var tiles = new L.GridLayer(); var CanvasLayer = L.GridLayer.extend({ // レイヤーの定義(coordsはどこで使ってんの?) createTile: function(coords){ // キャンバス作成 var tile = L.DomUtil.create('canvas', 'leaflet-tile'); // サイズの取得 var size = this.getTileSize(); tile.width = size.x; tile.height = size.y; // 2Dオブジェクト var ctx = tile.getContext('2d'); return tile; } }); // マップを読み込んでる? // ここで必要HTMLを入れる処理を書く? //L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {}).addTo(map) L.gridLayer(); // 要素に描画 tiles.addTo(map); </script> </body> </html>
nnahito

2017/11/30 09:19

ご回答ありがとうございます。 > このあたりのコードを参考にしてみてください。基本的に行っていることは同じです。 とのことでしたので、 L.tileLayer('./check.html', {}).addTo(map) とやってみるとメモリオーバーになりました。。。(画面は灰色のままです)
kei344

2017/11/30 09:42

L.tileLayer('./check.html', はどこから来たのかわかりませんが、まずはサンプルをそのまま動かしながら変更すべき点を考えたほうが良いと思います。 https://jsfiddle.net/vfbda7ge/ 日本語での情報が少ないため、英語が読めないならこのライブラリは使えないと見て別の手段を検討されることをお勧めします。(私はGoogleMapsAPIでの実装経験があったため「どう組めばどこに出力がでるか」がなんとなくわかりますが、元々地図表現ライブラリなので実装に向いているわけでは有りません)
nnahito

2017/11/30 10:13

もともとがHTMLの拡大縮小を目指していたので、実験を試みております。 サンプルを動かして、実際マップの表示はできておりますが、どのサンプルも結局画像の拡大縮小をおこなっていて、私の行いたい物がありません。 > 日本語での情報が少ないため、英語が読めないならこのライブラリは使えないと見て別の手段を検討されることをお勧めします ここまでお付き合い頂いて申し訳ございませんが、時間がないための質問のため、このライブラリの利用は見送らせていただきます。(もちろん時間があれば使ってみたかったですが…) ありがとうございました。
guest

0

ベストアンサー

calc()

calc() で計算してやれば、内容の最小幅に反しない範囲でなら実現可能な気がします。
動的に要素ノードを追加するなら、width プロパティ値も動的に算出してやる必要はあります。

HTML

1<style> 2html, body { 3 margin: 0; 4 padding: 0; 5 width: 100%; 6} 7#sample { 8 margin: 0; 9 padding: 0; 10 width: calc(100% - 2px); 11 border: 1px black solid; 12 border-collapse: separate; 13 border-spacing: 1px; 14} 15 16#sample td { 17 background-color: #eef; 18 border: 1px black solid; 19 width: calc(100%-200px); 20 overflow: hidden; 21 height: 50px; 22 text-align: center; 23 vertical-align: middle; 24} 25</style> 26</head> 27<body> 28<table id="sample"> 29 <tbody> 30 <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 31 </tbody> 32</table>

動的計算のコード

tableは自動的に等間隔の幅に合わせる為、アスペクト比だけ合わせれば、期待通りに動作するようです。

下記コードは width, height 以外のプロパティ値(border, font-size等)は元の値を維持します。
必要であれば、setStyleRule() の適用範囲を広げて下さい。

HTML

1<style> 2html, body { 3 margin: 0; 4 padding: 0; 5 width: 100%; 6} 7 8#sample { 9 margin: 0; 10 padding: 0; 11 width: calc(100% - 2px); 12 border: 1px black solid; 13 border-collapse: separate; 14 border-spacing: 1px; 15} 16 17#sample td { 18 background-color: #eef; 19 border: 1px black solid; 20 text-align: center; 21 vertical-align: middle; 22} 23</style> 24</head> 25<body> 26<form id="table-setting"> 27 <p><label>縦横比(縦/横) <input type="number" name="aspect-ratio" value="1"></label></p> 28 <p><label>列数 <input type="number" name="cells-length" value="5"></label></p> 29 <p><label>行数 <input type="number" name="rows-length" value="5"></label></p> 30</form> 31<table id="sample"> 32 <tbody> 33 <tr><td></td></tr> 34 </tbody> 35</table> 36<script> 37'use strict'; 38(function () { 39 function setStyleRule (doc, selectorText, property, value) { 40 var styleSheets = doc.styleSheets, 41 styleSheetslength = styleSheets.length, 42 i = 0, 43 cssRules, cssStyleRule, cssRulesLength, j; 44 45 while (i < styleSheetslength) { 46 cssRules = styleSheets[i++].cssRules; 47 cssRulesLength = cssRules.length; 48 j = 0; 49 50 while (j < cssRulesLength) { 51 cssStyleRule = cssRules[j++]; 52 53 if (cssStyleRule.selectorText === selectorText) { 54 cssStyleRule.style[property] = value; 55 return; 56 } 57 } 58 } 59 } 60 61 function handleInputAspectRatio (event) { 62 var input = event.target, 63 aspectRatio = input.valueAsNumber, 64 doc = input.ownerDocument, 65 td = doc.getElementById('sample').tBodies[0].rows[0].cells[0], 66 width = doc.defaultView.getComputedStyle(td, '').width; 67 68 setStyleRule(doc, '#sample td', 'height', parseFloat(width) * aspectRatio + 'px'); 69 } 70 71 function handleInputRowsLength (event) { 72 var input = event.target, 73 length = input.valueAsNumber, 74 tbody = input.ownerDocument.getElementById('sample').tBodies[0], 75 rows = tbody.rows, 76 rowsLength = rows.length, 77 tr; 78 79 if (length === rowsLength) { 80 return; 81 } 82 83 if (length > rowsLength) { 84 tr = rows[0]; 85 86 while (rowsLength++ < length) { 87 tbody.appendChild(tr.cloneNode(true)); 88 } 89 } else { 90 while (rowsLength > length) { 91 tbody.removeChild(rows[--rowsLength]); 92 } 93 } 94 95 handleInputAspectRatio({target: input.form.elements['aspect-ratio']}); 96 } 97 98 function handleInputCellsLength (event) { 99 var input = event.target, 100 length = input.valueAsNumber, 101 doc = input.ownerDocument, 102 tbody = doc.getElementById('sample').tBodies[0], 103 rows = tbody.rows, 104 rowsLength = rows.length, 105 tr = rows[0], 106 cells = tr.cells, 107 cellsLength = cells.length, 108 td, df, i; 109 110 if (length === cellsLength) { 111 return; 112 } 113 114 if (length > cellsLength) { 115 td = cells[0]; 116 df = doc.createDocumentFragment(); 117 118 while (cellsLength++ < length) { 119 df.appendChild(td.cloneNode(true)); 120 } 121 122 i = 0; 123 124 while (i < rowsLength) { 125 rows[i++].appendChild(df.cloneNode(true)); 126 } 127 } else { 128 while (rowsLength) { 129 tr = rows[--rowsLength]; 130 i = cellsLength; 131 132 while (length < i) { 133 tr.deleteCell(--i); 134 } 135 } 136 } 137 138 handleInputAspectRatio({target: input.form.elements['aspect-ratio']}); 139 } 140 141 142 function main () { 143 var elements = this.document.getElementById('table-setting').elements, 144 aspectRatio = elements['aspect-ratio'], 145 rowsLength = elements['rows-length'], 146 cellsLength = elements['cells-length']; 147 148 aspectRatio.addEventListener('input', handleInputAspectRatio, false); 149 rowsLength.addEventListener('input', handleInputRowsLength, false); 150 cellsLength.addEventListener('input', handleInputCellsLength, false); 151 152 handleInputAspectRatio({target: aspectRatio}); 153 handleInputRowsLength({target: rowsLength}); 154 handleInputCellsLength({target: cellsLength}); 155 } 156 157 main.call(this); 158}.call(this)); 159</script>

Re: nnahito さん

投稿2017/11/26 15:02

編集2017/11/26 17:08
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問