Google Chrome の複数行テキストボックスでInternet Explorerに比べて行間が狭い現象について紹介します。
現象の確認
下図のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>複数行テキストの入力欄です</div>
<textarea name="text" cols="50" rows="10"></textarea>
</body>
</html>
Webブラウザで上記のHTMLファイルを表示します。以下の画面表示結果となります。
Internet Explorer の場合
Google Chrome の場合
Microsoft Edge の場合
Google Chromeの表示がInternet Explorerに比べると行間が狭く、きつい感じに見えます。Internet ExplorerとGoogle Chromeの表示イメージを重ねると、Google Chromeのほうが1行あたり1ピクセルほど行間の狭いことが確認できます。
対策1: line-heightを指定する
textareタグのstyle属性、またはCSSで明示的に行の高さを指定することで、ChromeでもInternet Explorerと同じように行間を開けることができます。
Internet Explorer と同じ行間にするには、"line-height: 1.135;" を指定します。
コード例
下記のコードを準備します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>複数行テキストの入力欄です</div>
<textarea name="text" cols="50" rows="10" style="line-height: 1.135;"></textarea>
</body>
</html>
または
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
<!--
.textarea1 {
line-height: 1.135;
}
-->
</style>
</head>
<body>
<div>複数行テキストの入力欄です</div>
<textarea name="text" cols="50" rows="10" class="textarea1"></textarea>
</body>
</html>
解説
textarea のstyleで "line-height: 1.135;" を指定します。行間をフォントの高さの 113.5% とします。
表示結果
上記のHTMLファイルをWebブラウザで表示します。Webブラウザごとに下記の表示結果となります。
Internet Explorer の場合
Google Chrome の場合
Microsoft Edge の場合
Internet ExplorerとGoogle Chromeの表示イメージを重ねて確認します。Google ChromeとInternet Explorerの行間が同じになっていることが確認できます。
対策2: 英文字のフォントをCourier Newに変更する
Google Chromeではデフォルトでは英文字(アルファベット)は「MS ゴシック」のフォントが使われますが、英文字のフォントを'Courier New'に指定すると、Internet Explorerと同じ行間になります。
英文字のフォント変更の詳細に関しては
こちらの記事を参照してください。
コード
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
<!--
.textarea1 {
font-family: 'Courier New','MS Gothic';
}
-->
</style>
</head>
<body>
<div>複数行テキストの入力欄です</div>
<textarea name="text" cols="50" rows="10" class="textarea1"></textarea>
</body>
</html>
表示結果
上記のHTMLをWebブラウザで表示しTextAreaに文字列を入力すると下図の表示となります。
Internet Explorer の場合
Google Chrome の場合
Microsoft Edge の場合
Internet Explorer と Google Chrome の表示結果を重ねた図が下図です。行間が同じになっていることが確認できます。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2017-12-09
作成日: 2017-10-10
