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

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

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

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

CSS

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

Q&A

1回答

1235閲覧

CSSでブロックの中を埋めるような形でフォントを最大化する方法があれば教えてください

hasigyokuginkan

総合スコア28

HTML

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

CSS

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

0グッド

3クリップ

投稿2020/11/18 14:13

編集2022/01/12 10:55

やりたいこと

  1. 青枠の領域は動的に変化する
  2. 青枠はどんな形式でサイズを指定されるかわからない(20vwだったり100pxだったりする)
  3. その青枠のなかの文字を、青枠内で最大になるようにしたい

JavaScriptを使ったトリッキーな方法では長期のメンテが難しくなったり、変則的なレイアウトなどで動かなくなりがちなので、できればCSSだけで行える正攻法な手段があれば知りたいです。

理想

イメージ説明

ブロックの縦幅が 20vw なのでそれを font-size に指定すると上の画像のようになるのだけど、縦幅はわからないという前提なので使えません

font-size に親の height を指定する、といった記述ができればいいのだけど。

現状

イメージ説明

該当のソースコード

html

1<html> 2 <head> 3 <style> 4 .box1 { 5 width: 20vw; 6 height: 20vw; /* 仮で20vwとしているが 100px とする場合もある */ 7 8 border: 1px solid blue; 9 text-align: center; 10 line-height: 100%; 11 12 /* 高さが 20vw と知っていればフォントにも同じサイズを指定するとだいたい合うがわからない場合にどうすればよいか */ 13 /* font-size: 20vw; */ 14 } 15 </style> 16 </head> 17 <body> 18 <div class="box1">A</div> 19 </body> 20</html>

試したこと

  1. font-size に 100% を指定 → ブロックの縦幅ではなく 1em を指定したのと同じ
  2. font-size に -webkit-fill-available を指定 → 変化なし
  3. font-size: fit-content(100%) → 変化なし。そもそも fit-content は width とかに指定するもの
  4. 画像にする → 下のようにすると領域を埋めてくれるが、フォントで行いたい

css

1background-position: center; 2background-size: cover; 3background-repeat: no-repeat; 4background-image: url("path/to/A.png");
  1. SVGにする → 下のようにすると領域を埋めてくれるが、(文字すべてのSVGを用意するのが大変なので)、フォントで行いたい

html

1<html> 2 <head> 3 <style> 4 .box1 { 5 width: 20vw; 6 height: 20vw; 7 border: 1px solid blue; 8 } 9 </style> 10 </head> 11 <body> 12 <div class="box1"> 13 <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1240.000000 1280.000000" preserveAspectRatio="xMidYMid meet"> 14 <g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)" stroke="none"> 15 <path d="M5736 12132 c-186 -367 -803 -1578 -1371 -2692 -568 -1114 -1457 -2857 -1975 -3875 -519 -1017 -1269 -2489 -1667 -3269 l-723 -1419 0 -98 c0 -84 2 -98 18 -103 9 -3 235 -54 502 -115 267 -60 863 -196 1325 -301 462 -105 908 -207 992 -226 99 -22 178 -34 225 -34 l73 0 529 1265 529 1265 1942 0 1942 0 538 -1122 c296 -618 569 -1187 606 -1265 l68 -141 38 8 c34 8 2181 475 2823 614 l245 53 3 99 3 100 -299 584 c-165 322 -573 1120 -907 1775 -334 655 -870 1703 -1190 2330 -783 1532 -2116 4142 -2832 5545 -322 630 -648 1268 -725 1418 l-139 272 -117 0 -117 -1 -339 -667z m794 -6012 c216 -476 395 -871 397 -877 4 -10 -160 -13 -801 -13 -443 0 -806 4 -806 8 0 4 23 59 51 122 28 63 201 457 386 875 184 418 340 769 345 779 10 19 11 18 23 -5 7 -13 189 -413 405 -889z"/> 16 </g> 17 </svg> 18 </div> 19 </body> 20</html>
  1. JavaScript の fitty を使ってみる → 挙動がおかしい&不安定

html

1<html> 2 <head> 3 <script src="/tmp/fitty.min.js"></script> 4 <script> 5 document.addEventListener('DOMContentLoaded', () => fitty(".text")) 6 </script> 7 <style> 8 body { 9 line-height: 100%; 10 } 11 .box1 { 12 width: 20vw; 13 height: 20vw; 14 border: 1px solid blue; 15 } 16 </style> 17 </head> 18 <body> 19 <div class="box1"><span class="text">A</span></div> 20 </body> 21</html>

イメージ説明

GitHub では issue が溜っていてあまりメンテされていない様子でした

ブラウザ

Google Chrome を利用しています

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

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

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

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

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

Lhankor_Mhy

2020/11/19 07:20

質問の編集拝読。 JavaScriptを使うこと自体には抵抗がない、という理解でいいですか?
hasigyokuginkan

2020/11/19 07:26

助言ありがとうございます 紹介していただいたライブラリを試したところ、使い方がおかしいのか、どうも挙動が怪しくて困っています
guest

回答1

0

ご希望に合うかどうかわかりませんが。

サンプル

js

1let target = document.querySelector('.box1'); 2target.style.fontSize = getComputedStyle(target).height;

JavaScript ではなくて、置換要素を使う方法でやってみました。

サンプル

html

1<object type="text/html" class="box1" 2 data="data:text/html,<html><style>*{margin:0}body{font-size:100vh;line-height:1;overflow:hidden}</style><body>A</body></html>" 3> 4</object>

え? もっとトリッキーだからダメ?
デスヨネー

投稿2020/11/19 07:32

編集2020/11/19 08:40
Lhankor_Mhy

総合スコア35865

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

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

Lhankor_Mhy

2020/11/19 07:40

ああ、JavaScriptではダメなのですね。 わかりました。では、方法はないと思います。
hasigyokuginkan

2020/11/19 08:16

最近のCSSは fit-content, max-content, object-fit のような領域に関係する便利機能が増えてきているようなので、もしかしたら font も同様のことができるようになっているのではないかと考えて質問させていただきました 今回は JavaScript を使うつもりはないのですが、別の機会にどうしても必要になったときは、fitty ライブラリではなく、提示していただいた方法でやろうと思います
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問