🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

1回答

2356閲覧

ブラウザウィンドウから文字が上下にはみ出す場合、全体を縮小して全体がブラウザに収まるようにできませんか?

tiqua_nibio

総合スコア62

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2019/12/04 12:03

こちらにソースコードがあります。

概要は、画面いっぱいに数字の列を並べたものを表示するのが目的です。
しかしながら、CSSにてhtml、bodyに対して、font-sizeを倍にすると、一部がはみ出して見れなくなります。
こちらのディスプレイはFull HD(1920x1080)です。

やりたいことは、font-sizeを倍にして、2倍にならなくとも、画面からはみ出さない範囲まで大きくするということができないかと考えております。また、ブラウザのサイズを変えたときもフォントのサイズが自動で変わればと考えております。

少しむずかしい条件をつけたいと思うのですが、javascriptを使わずにページ表示できれば…と考えております。
わかる方がおられましたら、よろしくおねがいします。

HTML

1<!DOCTYPE html> 2<html> 3<head> 4<style> 5html, body { 6 margin: 0; 7 padding: 0; 8 border: none; 9 width: 100%; 10 height: 100%; 11 overflow: hidden; 12 font-size: 100px; 13} 14 15.fb_container { 16 display: flex; 17 align-items: center; 18 justify-content: center; 19 width: 100vw; 20 height: 100%; 21} 22</style> 23</head> 24<body> 25 26 <div class="fb_container"> 27 <table> 28 <tr> 29 <td>1111111111111111111111111111111111111</td> 30 </tr> 31 <tr> 32 <td>2222222222222222222222222222222222222</td> 33 </tr> 34 <tr> 35 <td>3333333333333333333333333333333333333</td> 36 </tr> 37 <tr> 38 <td>4444444444444444444444444444444444444</td> 39 </tr> 40 <tr> 41 <td>5555555555555555555555555555555555555</td> 42 </tr> 43 <tr> 44 <td>6666666666666666666666666666666666666</td> 45 </tr> 46 <tr> 47 <td>7777777777777777777777777777777777777</td> 48 </tr> 49 <tr> 50 <td>8888888888888888888888888888888888888</td> 51 </tr> 52 <tr> 53 <td>9999999999999999999999999999999999999</td> 54 </tr> 55 <tr> 56 <td>0000000000000000000000000000000000000</td> 57 </tr> 58 </table> 59 </div> 60 61</body> 62</html>

HTML

1html, body { 2 font-size: 200px;/*に変更すると一部が表示されなくなる*/ 3} 4 5

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

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

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

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

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

guest

回答1

0

font-size を vh で指定すればどうですか。
10行だと 6.3vhが適切なようです。
フォントやline-heightや余白設定で変わると思いますので数値は調節してください。

css

1html, body { 2 margin: 0; 3 padding: 0; 4 border: none; 5 width: 100%; 6 height: 100%; 7 overflow: hidden; 8 font-size: 6.3vh; 9} 10 11.fb_container { 12 display: flex; 13 align-items: center; 14 justify-content: center; 15 width: 100vw; 16 height: 100%; 17}

投稿2019/12/04 12:21

hatena19

総合スコア34073

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

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

tiqua_nibio

2019/12/04 14:20

調査していただき、ありがとうございます。 大変申し訳無いのですが、行数も流動的です。 自動的に収まるようにしたいのです。
hatena19

2019/12/04 18:26

なら、JavaScript使わないと無理がと。
tiqua_nibio

2019/12/12 03:52

わかりました。技術的には難しいようですね。
hatena19

2019/12/12 04:04

CSSでコンテンツの文字数や行数を取得する方法はないので、CSSだけでは無理ですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問