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ファイルを表示します。以下の画面表示結果となります。
Google Chromeの表示がInternet Explorerに比べると行間が狭く、きつい感じに見えます。Internet ExplorerとGoogle Chromeの表示イメージを重ねると、Google Chromeのほうが1行あたり1ピクセルほど行間の狭いことが確認できます。
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の表示イメージを重ねて確認します。Google ChromeとInternet Explorerの行間が同じになっていることが確認できます。
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 の表示結果を重ねた図が下図です。行間が同じになっていることが確認できます。
