
表題の通りです。
jQueryでそういったプラグインがありますが、下記のようなHTMLにCSSのみでそれを実現することはできますか?
<div class="graph"> <div> <div class="graph-item"> <h2 class="txt-h2">売上</h2> <div class="graph01"></div> <div class="graph02"> <div>¥12,650</div> <div>前年</div> </div> </div> </div>
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
下記のような質問は推奨されていません。
- 質問になっていない投稿
- スパムや攻撃的な表現を用いた投稿
適切な質問に修正を依頼しましょう。
回答3件
11
ベストアンサー
CSSのよく使うfont-sizeの指定方法は以下があると思います。
- px:絶対指定。pxで直接指定する。
- em:相対指定。親要素のフォントサイズの何倍か。
- %:相対指定。親要素のフォントサイズの何パーセントか。
- rem:相対指定。html要素のフォントサイズの何倍か。
css
1.text1{ 2 font-size: 10px; //px指定 3} 4.text2{ 5 font-size: 1.6em; //em指定 6} 7.text3{ 8 font-size: 160%; //%指定 9} 10.text4{ 11 font-size: 1.6rem; //rem指定 12}
ただ、質問者さんがレスポンシブなページでフォントサイズをいい感じに可変させたいなら以下の指定があります。
- vw:相対指定。ビューポートの幅の何パーセントか。
- vh:相対指定。ビューポートの高さの何パーセントか。
- vmin:相対指定。ビューポートの「幅か高さの短い方」の何パーセントか。
- vmax:相対指定。ビューポートの「幅か高さの長い方」の何パーセントか。
CSS
1.text1{ 2 font-size: 3vw; //vw指定 3} 4.text2{ 5 font-size: 4vh; //vh指定 6} 7.text3{ 8 font-size: 5vmin; //vmin指定 9} 10.text4{ 11 font-size: 6vmax; //vmax指定 12}
ビューポートの説明や設定方法は以下が参考になるかと思います。
参考:viewportとはなにか?
追記
説明をだいぶ簡略化してしまったので、もう少し正しい説明を追加します。(言っていることは上記と一緒)
単位 | フルネーム | 説明 |
---|---|---|
vw | Viewport Width | ビューポートの幅に対する1/100の単位 |
vh | Viewport Height | ビューポートの高さに対する1/100の単位 |
vmin | Viewport Minimum | ビューポートの幅と高さのうち, 小さい方の値に対する1/100の単位 |
vmax | Viewport Maximum | ビューポートの幅と高さのうち, 大きい方の値に対する1/100の単位 |
投稿2016/09/30 02:06
編集2016/09/30 02:31総合スコア214
2
ページ幅(画面幅)に合わせて滑らかに拡縮するようにしたいのであれば
文字サイズの単位にvw
を使用すると良いかと思います。
ただ、基準となるのは「viewportの幅」なので、
大画面モニタ等で横幅いっぱいに広げたりすると拡大しすぎてしまう、等の弊害も生じます。
画面幅を狭くしすぎた場合も同様です。
従ってvw
で文字サイズを指定した場合には、
同時にメディアクエリを併用して、
一定の画面幅を超えたらpx等の固定サイズに変更するなどの
処置をするとよいかと思います。
またvw
はAndroid標準ブラウザは4.4以上でないと使えないので、
非対応環境のためのフォールバックでpx
・em
等の従来からある単位での指定も加えておいた方が良いと思われます。
投稿2016/09/30 02:21
総合スコア3761
下記のような回答は推奨されていません。
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
このような回答には修正を依頼しましょう。
2
CSS メディア クエリを使用してレスポンシブにする
CSSのメディアクエリを使用することで、デバイスの状態(解像度など)に応じたサイズ変更が可能になります。
以下の例ではpタグのサイズを変更しています。
css
1p { 2 font-size: 20px; 3} 4@media (min-width: 500px) and (max-width: 600px) { 5 p { 6 font-size: 10px; 7 } 8}
投稿2016/09/30 01:50
編集2016/09/30 01:54総合スコア897
下記のような回答は推奨されていません。
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
このような回答には修正を依頼しましょう。
回答へのコメント

あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
関連した質問
Q&A
受付中
インスタンスを使用して複数の商品の合計金額を出す方法について教えてください
回答2
クリップ0
更新
2023/06/05
Q&A
受付中
タブの切り替え時にふわっと表示させたい。
回答2
クリップ0
更新
2023/06/06
Q&A
解決済
Python スクレイピングができない
回答1
クリップ0
更新
2023/06/07
Q&A
解決済
ハンバーガーメニューの挙動について(transitionが、もとに戻る時には適応されない)
回答2
クリップ0
更新
2023/06/02
Q&A
解決済
htmlのformのsubmitが効かない
回答1
クリップ0
更新
2023/06/07
Q&A
解決済
Javaの外部ライブラリが使えない
回答1
クリップ0
更新
2023/05/30
Q&A
解決済
Java キーボードから入力を受け付ける命令
回答3
クリップ0
更新
2023/06/07
意見交換
受付中
いくつかのメソッドの大項目としてのコメントアウトをどう書くか
回答4
クリップ1
更新
2023/06/04
同じタグがついた質問を見る
CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2016/09/30 02:16
退会済みユーザー
2016/09/30 09:47
2016/09/30 09:49