[CSS]親要素に対する文字サイズ

CSSで、親要素に対して何％という指定はできないのでしょうか？

html
1<body>
2  <div>
3    <p>あ</p>
4  </div>
5</body>

css
1div{
2 width:100vw;
3 height:500px;
4}
5p{
6 /*ここで「あ」の文字を画面親要素divのちょうど半分（つまり250px）に指定したい*/
7}
8

（いろいろ省略してます）

ふつうに、font-size:50%;では、文字のデフォルトに対して50％　となってしまいます。
途中でdivの大きさが変わった時に、それに付随して「あ」の文字サイズも変わるようにしたいです。

イメージ


DIVのサイズが変わると文字のサイズも変わる

Lhankor_Mhy

2018/05/15 11:47

『途中でdivの大きさが変わった時』というのは、具体的にはどのようなケースを考えていますか？　① javascript等で動的にCSSが変更される場合。② コンテンツが溢れてCSS指定の高さを超える場合。③ サイトのデザイン変更でCSSの値を変更した場合。

moscow3

2018/05/15 11:58

①に該当します。（正確にはCSSアニメーションですが）

Lhankor_Mhy

2018/05/16 00:50

私も、think49さんと同様に CSS variable と calc を考えていたのですが、①だとすると要件を満たさないですね。CSSアニメーションなら、javascript で transitionstart イベントを拾うなどするといいかもしれませんね。

Lhankor_Mhy

2018/05/16 00:51

いや、CSSアニメーションで書いたほうが楽ですね。失礼しました。

行動規範の内容に同意します

回答3件

font-size: 50%

CSSで、親要素に対して何％という指定はできないのでしょうか？

質問文が正確ではありませんね。
親要素のfont-sizeに対して50%、は指定可能です。

font-size: 50% - JSFiddle

CSS
1div {
2  width: 100vw;
3  height: 500px;
4  font-size: 500px;
5  background-color: #fee;
6}
7
8p {
9  font-size: 50%;
10}

算出値 (Computed values)

親要素の height に対する50%を実現するには、親要素の算出値を得る必要がありますが、算出値を元に計算させるのはリスクがあります。

算出されるまで処理を待機しなければならない
お互いを参照しあう関係性になると、無限ループしてしまう

CSS新仕様を作る事はおそらく可能ですが、質問者さんが考える以上に複雑で分かりづらい仕様になる事が想像できます。
このアプローチをとるなら、CSSの計算が終わった後にJavaScriptで実装するのが現実解です。

element.clientHeight - Web API インターフェイス | MDN

CSS Custom Properties for Cascading Variables Module Level 1

計算後の算出値を元にするよりも、手動で計算させる方がコストが安く、アルゴリズムもシンプルになります。

Custom Properties + calc() - JSFiddle

CSS
1:root {
2  --sample-height: 500px;
3}
4
5div {
6  width: 100vw;
7  height: var(--sample-height);
8  background-color: #fee;
9}
10
11p {
12  font-size: calc(var(--sample-height) / 2);
13}

Re: moscow3 さん

投稿2018/05/15 12:31

think49

総合スコア18162

質問のとおり、親要素に対しての比率はCSSだけでは厳しそうですが、親要素基準ではなくビューポートの幅を基準にするのであれば、 font-size: **vw というものがあります。

ブラウザの横幅を基準として文字サイズが可変します。

フォントサイズを「vw・vh」でビューポートの幅にあわせて可変させる

投稿2018/05/15 11:30

Bonito_Bonito

総合スコア67

ベストアンサー

font-sizeだと参照する値が異なるので、javascriptか何かで書くしかないのではと思います。

html
1<body>
2  <div id="hoge"><!--拾いやすくするためにidを設定-->
3    <p>あ</p>
4  </div>
5</body>

javascript
1//例えばjQueryを使ったとして
2$(function(){
3    $(window).on('load resize', function(){
4        $w = $('#hoge').innerWidth();//親要素の幅を取得
5        $w = $w  / 2;//値を半分にする
6        $('#hoge').find('p').css('font-size',　$w + 'px');
7    });
8});