Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 reference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial
ASP ADO リファレンス | PHP関数リファレンス | MySQL関数リファレンス

文字の行間設定

■ 文字の行間設定

行の高さ(行送り)を設定します。

値には、次のような指定方法あります。

■ キーワード

■ サイズを表す数値+単位

ボックス領域の高さ(1行の上端から下端までの幅)を、数値に単位をつけて設定します。フォントサイズが12ptのときに12ptや1emを設定すると行間が0になり、またフォントサイズが12ptのときに10ptを設定するとテキストが次の行にはみ出してしまいますので注意してください。単位についてはスタイルシートにおける単位の扱いを参照してください。

■ 割合を表す数値(単位なし)

その要素のフォントサイズ(その要素に設定されているサイズや親要素から継承してきたサイズ)に対する行の高さの割合を、単位なしの数値で設定します。例えばフォントサイズが10pxのときに1.5を設定すると、行の高さは15pxになります。

■ パーセントを表す数値+%

その要素のフォントサイズ(その要素に設定されているサイズや親要素から継承してきたサイズ)に対する行の高さの割合を、パーセンテージで設定します。

■ 作例

次の指定は、いずれも同じ結果になります。

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css>
<title>文字の行間設定</title>
<style type="text/css">
<!--
div  {font-size: 16pt; margine:20px auto 20px 20px; width:500px; padding:20px; background-color:#ffcc99}
.sample1  {line-height:normal}
.sample2  {line-height:2}     /*値を2に設定すると、行の高さはフォントサイズの2倍(32pt)になる
-->
</style>
</head>
<body>
<div class="sample1">

情報工学とは,技術の進歩と経済的な利潤を得ることそして環境の調和と人類社会との関わりを考えながら、ソフト的な情報工学や知能工学・ハード的な構造工学などの幅広い分野を統合した学問です。 ひとつのまとまりとしての組織・仕事・作業などをシステムとしてとらえ、先端的技術開発・不確実性を持つシステムに対処可能な工学的手法の開発など、従来の個別技術分野の枠組を越えて,幅広い総合的な視野で21世紀の人類の発展情報を整理・統合することを目的としています。
アンダースタンディング・ビジネスは、企画書・ビジネスプラン・学会発表・プレゼンテーションをコンピュータを使ってインパクトのあるものに仕上げたり、ソフトウェア・ハードウェアの仕様書といった煩雑なものの記録、業務用の納品書・請求書・入金伝票、個人・ビジネス用の手紙と住所録管理、統計管理・推計調査、戦略的経営管理、工学設計等も含み、これらを統合管理する方法を提供します。
言葉をかえると、イントラネット・グループウェア・E-コマース・IT Solutionといった先端技術を駆使した環境を構築します。 アンダースタンディング・ビジネスとは、『難しいこと、わかりにくいことをコンピュータを使って簡単に理解できるようにする』仕事です。また、コンピュータを使っていく上で難しいこと、わかりにくいことを簡単に理解するためのお手伝いをしています。

</div>
<div class="sample2">

情報工学とは,技術の進歩と経済的な利潤を得ることそして環境の調和と人類社会との関わりを考えながら、ソフト的な情報工学や知能工学・ハード的な構造工学などの幅広い分野を統合した学問です。 ひとつのまとまりとしての組織・仕事・作業などをシステムとしてとらえ、先端的技術開発・不確実性を持つシステムに対処可能な工学的手法の開発など、従来の個別技術分野の枠組を越えて,幅広い総合的な視野で21世紀の人類の発展情報を整理・統合することを目的としています。
アンダースタンディング・ビジネスは、企画書・ビジネスプラン・学会発表・プレゼンテーションをコンピュータを使ってインパクトのあるものに仕上げたり、ソフトウェア・ハードウェアの仕様書といった煩雑なものの記録、業務用の納品書・請求書・入金伝票、個人・ビジネス用の手紙と住所録管理、統計管理・推計調査、戦略的経営管理、工学設計等も含み、これらを統合管理する方法を提供します。
言葉をかえると、イントラネット・グループウェア・E-コマース・IT Solutionといった先端技術を駆使した環境を構築します。 アンダースタンディング・ビジネスとは、『難しいこと、わかりにくいことをコンピュータを使って簡単に理解できるようにする』仕事です。また、コンピュータを使っていく上で難しいこと、わかりにくいことを簡単に理解するためのお手伝いをしています。

</div>
</body>
</HTML>

情報工学とは,技術の進歩と経済的な利潤を得ることそして環境の調和と人類社会との関わりを考えながら、ソフト的な情報工学や知能工学・ハード的な構造工学などの幅広い分野を統合した学問です。 ひとつのまとまりとしての組織・仕事・作業などをシステムとしてとらえ、先端的技術開発・不確実性を持つシステムに対処可能な工学的手法の開発など、従来の個別技術分野の枠組を越えて,幅広い総合的な視野で21世紀の人類の発展情報を整理・統合することを目的としています。
アンダースタンディング・ビジネスは、企画書・ビジネスプラン・学会発表・プレゼンテーションをコンピュータを使ってインパクトのあるものに仕上げたり、ソフトウェア・ハードウェアの仕様書といった煩雑なものの記録、業務用の納品書・請求書・入金伝票、個人・ビジネス用の手紙と住所録管理、統計管理・推計調査、戦略的経営管理、工学設計等も含み、これらを統合管理する方法を提供します。
言葉をかえると、イントラネット・グループウェア・E-コマース・IT Solutionといった先端技術を駆使した環境を構築します。 アンダースタンディング・ビジネスとは、『難しいこと、わかりにくいことをコンピュータを使って簡単に理解できるようにする』仕事です。また、コンピュータを使っていく上で難しいこと、わかりにくいことを簡単に理解するためのお手伝いをしています。
情報工学とは,技術の進歩と経済的な利潤を得ることそして環境の調和と人類社会との関わりを考えながら、ソフト的な情報工学や知能工学・ハード的な構造工学などの幅広い分野を統合した学問です。 ひとつのまとまりとしての組織・仕事・作業などをシステムとしてとらえ、先端的技術開発・不確実性を持つシステムに対処可能な工学的手法の開発など、従来の個別技術分野の枠組を越えて,幅広い総合的な視野で21世紀の人類の発展情報を整理・統合することを目的としています。
アンダースタンディング・ビジネスは、企画書・ビジネスプラン・学会発表・プレゼンテーションをコンピュータを使ってインパクトのあるものに仕上げたり、ソフトウェア・ハードウェアの仕様書といった煩雑なものの記録、業務用の納品書・請求書・入金伝票、個人・ビジネス用の手紙と住所録管理、統計管理・推計調査、戦略的経営管理、工学設計等も含み、これらを統合管理する方法を提供します。
言葉をかえると、イントラネット・グループウェア・E-コマース・IT Solutionといった先端技術を駆使した環境を構築します。 アンダースタンディング・ビジネスとは、『難しいこと、わかりにくいことをコンピュータを使って簡単に理解できるようにする』仕事です。また、コンピュータを使っていく上で難しいこと、わかりにくいことを簡単に理解するためのお手伝いをしています。

■ 相対値設定と絶対値設定

■相対値での設定
ブラウザ側で設定したフォントサイズを(IEの大、中、小など)相対値では、1.0emと表わされます。 line-heightの設定で、1.4emと記載した場合には文字の上下に0.2emずつのスペースが確保されます。 140%と指定しても同じです。この場合、見ている側の文字サイズが変わっても相対的に変化します。

■絶対値での設定
絶対値での指定では、font-sizeとの関係が重要となります。font-sizeを8pt、line-heightを12ptと設定した場合には、文字の上下に2ptのスペースが確保される事になります。しかし、フォントの大きさは見る人のブラウザ設定で変えられる事もあり、逆に重なって表示される事もあります。フォントサイズ変更時に全体のバランスを保つには、line-heightは相対値での設定の方がいい場合があります。

■記述例
P{line-height:1.4em;}

<<<戻る
R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box | CSS Trial