ubichupas.net

スタイルシートを使って表の見出しを意地でも1行に納める

ウィンドウサイズに合わせてテキストが折り返すのはWebの常識だけど、 改行に対するこだわりが強い日本人は未だに慣れない。 表の見出しともなると「絶対に許さん」と言われることもある。 そうなるともうフォントサイズを極小にするしか手が無い。

そんな場合に最適なフォントサイズとして vw (viewport width)という単位が使える。 1vmとは画面いっぱいで1行に100文字表示できる大きさを指す。 つまり表の見出しを数えて全部で40文字程度なら 2vm（1行に50文字）にすると余白も含めてちょうどよい大きさとなる。

iPhoneのビューポートは横幅320pxなので2vmは6.4pxということになるが、 高精細液晶なので意外と読み取れてしまう。 パソコンの画面なら8pxでも小さすぎるとお叱りを受けてしまうので、 vm指定は本当にありがたい。

table_size.html 
<!DOCTYPE html>
<html lang="ja">
<head>
<title>font-size in table</title>
<style>
html {
    font-size: 18px;
}

h1 {
    font-size: 3.75vw;
}

table {
    font-size: calc(6px + 1.875vw);
    margin: 1rem auto;
    max-width: 640px;
    width: 98%;
    word-break: keep-all;
}
table th {
    font-size: 0.5em;
    line-height: 1.2em;
    height: 4em;
}
table td {
    font-size: 0.8em;
    padding: 0.25em;
    text-align: right;
}

table, th, td {
    border: solid 1px silver;
    border-collapse: collapse;
}
table th {
    background-color: lavender;
}

@media (min-width: 960px) {
    h1 { font-size: 36px; }
    table { font-size: 24px; }
}
</style>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>

<h1>見出しを縮小して折り返しに抵抗する。</h1>

<table>
  <tr>
    <th>売上高</th>
    <th>営業利益</th>
    <th>経営利益</th>
    <th>親会社に帰属する当期純利益</th>
    <th>減価償却費</th>
    <th>研究開発費</th>
    <th>為替レート(円/US$)</th>
  </tr>
  <tr>
    <td>1,033</td> <td>-98</td> <td>-127</td> <td>-18</td> <td>121</td> <td>41</td> <td>109.1</td>
  </tr>
  <tr>
    <td>1,519</td> <td>-229</td> <td>-351</td> <td>-1,466</td> <td>214</td> <td>45</td> <td>108.2</td>
  </tr>
</table>

<div style="font-size: 2vw;">
壱弐参肆伍陸漆捌玖拾零零零零零零零零零弐零零零零零零零零零参零零零零零零零零零肆零零零零零零零零零伍零零零零零零零零零陸零零零零零零零零零漆零零零零零零零零零捌零零零零零零零零零玖零零零零零零零零零佰
</div>

</body>
</html>

単純なvm指定はブラウザをフルスクリーンにした場合 フォントサイズが大きくなりすぎて逆に折り返しを招いてしまう。 そこでウィンドウサイズがある程度大きくなったら フォントサイズを固定に変更するという対処が必要になる。 さらにその固定サイズがvm指定で変化して来たサイズに ピタリと一致するように算出できてなければダサくなる。

今回はウィンドウサイズが320px～960pxのとき フォントサイズを18px～24pxの範囲で変化させたい。 最小6pxも保証しようと思い (24 - 18 - 6) / (960 - 320) = 0.01875で font-size: calc(6px + 1.875vw);という指定になった。

0 件のコメント:

コメントを投稿