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

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

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

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

CSS

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

Q&A

解決済

3回答

1518閲覧

pに対するフォントサイズ指定について

nasio777

総合スコア12

HTML

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

CSS

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

0グッド

0クリップ

投稿2016/11/07 23:27

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<title>a</title> 5<meta charset="utf-8"> 6<style> 7html,body,ul,li,p,h1,h2{ 8margin:0; 9padding:0; 10} 11p{ 12 font-size:xx-small; 13} 14</style> 15</head> 16 17<body> 18<p>あああああ</p> 19</body> 20</html>

初投稿、初歩的な質問で恐縮なのですが、html,cssに関しての質問です。

pセレクタにフォントサイズを指定しても変わらないのはこれ以上、小さくならないということでしょうか?

px、em、%指定しても変わりませんでした。

ちなみにフォントサイズを大きくする指定は問題なく反映されました。

よろしくお願いします。

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

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

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

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

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

guest

回答3

0

ベストアンサー

皆さんの仰るように [最小のフォントサイズ] が設定値以下のフォントサイズが指定された場合にブラウザで設定されている [最小のフォントサイズ] に固定されているのだと思います。

一部で CSS の transform プロパティで回避する手段が提案されていますが、[最小のフォントサイズ] は小さすぎるフォントサイズを指定するWebサイトに対してユーザが視認できる最小のフォントサイズを指定する事で対策するユーザの自衛手段ですので、transform で回避するのはユーザ側からしてみれば不利益な手法となりうると考えます。
基本的にはユーザの事を第一に考え、[最小のフォントサイズ] がいかようであっても正しく表示されるのが望ましいと思います。
それが難しければ、せめてブラウザの規定値の [最小のフォントサイズ] でレイアウトが崩れない配慮が必要だと思います。

Re: nasio777 さん

投稿2016/11/08 01:01

think49

総合スコア18156

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

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

0

ブラウザによって表示できる「最小のフォントサイズ」が設定されているようです。
Safariが9px、GoogleChromeで10pxという記述を見つけました。

基準のサイズをfont-sizeで指定し、-webkit-transformで縮小する手で小さくすることは可能のようです。

css

1.sample { 2 font-size: 10px; 3 -webkit-transform: scale(0.8); 4 -webkit-transform-origin: 0% 0%; 5 -ms-transform: scale(0.8); 6 -ms-transform-origin: 0% 0%; 7 transform: scale(0.8); 8 transform-origin: 0% 0%; 9}

参考
memocarilog IE9以下 と その他のモダンブラウザで 10px 以下のフォントサイズを表示する CSS の指定方法
http://memocarilog.info/webdesign/7819

KoToRi BlogGoogle Chromeでfont-sizeが10px以下にならない時の対処法
http://kotori-blog.com/soft/chromefontsize/

(追記10:43 ※CSSを一部修正)

投稿2016/11/07 23:51

編集2016/11/08 01:46
dit.

総合スコア3235

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

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

dit.

2016/11/08 01:33

>think49さん そうですね、もちろん「小さすぎて読めないような文字」を推奨するつもりはありません。 標準の状態からのfont-size:xx-small;でもかなり小さいと思います。 質問者さんがサイズを小さくしたい意図がわからなかったので、「できなくはないですよ」という意味で回答をしましたが、補足が足りませんでした。
guest

0

ブラウザに最小フォントサイズの設定がある場合があるのでそれに引っかかっているのではないでしょうか?

投稿2016/11/07 23:52

hana-da

総合スコア1728

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問