概要
画面いっぱいに大きな文字を表示したい場合に便利です
環境
- macOS 11.6
- chrome
- FitText.js 1.2.0
サンプルコード
index.html の作成だけで動作します
- index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<style type="text/css">
#counter {
color: #40e0d0
}
.container {
width: 100%;
margin: 0 auto;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1 id="msg">Count: <span id="counter">0</span></h1>
</header>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FitText.js/1.2.0/jquery.fittext.min.js" integrity="sha512-e2WVdoOGqKU97DHH6tYamn+eAwLDpyHKqPy4uSv0aGlwDXZKGwyS27sfiIUT8gpZ88/Lr4UZpbRt93QkGRgpug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$("#msg").fitText(1.2);
</script>
</html>
ポイント
JavaScript で再描画しているので body の最後で呼び出しましょう
fitText 関数の引数の数字はコンプレッサーで値を小さくすると文字が大きくなり値を大きくすると文字のサイズが小さくなります
動作確認
- open index.html
で以下のように表示されます
0 件のコメント:
コメントを投稿