practice

<html>

h2{margin:20px;
font-size:18px;
color:#456789;}

p{font-size:14px;
color:#aa4444;}

div{font-size:16px;}
div.レター_スペース_01{letter-spacing:16px;}
div.レター_スペース_02{letter-spacing:1em;}
div.レター_スペース_03{letter-spacing:0.5em;}
div.レター_スペース_04{letter-spacing:0.25em;}
div.レター_スペース_05{letter-spacing:0.05em;}
div.レター_スペース_06{letter-spacing:normal;}
div.レター_スペース_07{letter-spacing:1em;
font-weight:bold;
color:white;
background-color:black;
display:inline-block;
padding-left:10px;}

div.ライン_ハイト_01{line-height:normal;}
div.ライン_ハイト_02{line-height:20px;}
div.ライン_ハイト_03{line-height:1em;}
div.ライン_ハイト_04{line-height:120%;}
div.ライン_ハイト_05{line-height:6mm;}
div.ライン_ハイト_06{line-height:0.3in;}
div.ライン_ハイト_07{line-height:1.5pc;}
</style>
<div class="sample">
</div>
<h1>letter-spacing</h1>
<h2> 文字の間隔を指定</h2>
<p>CSS の Property → letter-spacing で文字の間隔を広げたり狭めたり, 調節することができます.</p>
<p>letter-spacing を指定するときは px (ピクセル) ではなく, 文字間隔を相対的な比率で指定できる em (エム) を使用すると良いでしょう.</p>
<p>em という単位は「そのときの文字の高さを 1」として相対的に値が決まります.</p>
<p>1em の大きさは, (何も指定が無い場合は)ブラウザの default font-size で決まっているということで, em を使用するとタグの文字サイズに対して大きさが変化します. つまり通常は1文字が 16px なので 1em = 16px ということになります(初期値は normal ).</p>
<p>「もしも font-size が 10px のときの 1em は 10px」<br>
「もしも font-size が 40px に設定されているときは 1em は 40px」となります.</p>
<hr>
<div class="レター_スペース_01">letter-spacing / 文字の間隔を指定</div>
<div class="レター_スペース_02">letter-spacing / 文字の間隔を指定</div>
<div class="レター_スペース_03">letter-spacing / 文字の間隔を指定</div>
<div class="レター_スペース_04">letter-spacing / 文字の間隔を指定</div>
<div class="レター_スペース_05">letter-spacing / 文字の間隔を指定</div>
<div>letter-spacing / 文字の間隔を指定<span style="font-size:12px;color:red;">していない</span></div>
<hr>
<p>注意: 文字列の最後に空白が入ります(文字の背景に色を付ける場合は display:inline-block / margin / padding などで調節が必要です).</p>
<div class="レター_スペース_07">letter-spacing / 文字の間隔を指定</div>
<hr>
<h1>line-height</h1>
<h2> 行間を指定</h2>
<p>値に対する単位は通常 px / em / % などで指定します(初期値は normal ).</p>
<p>また, cm / mm / in / pc などの単位も使用できます.</p>
<hr>
<div class="ライン_ハイト_01">カタログ, パンフレット, ポスター等のＣＭ用写真撮影 / 新聞, 雑誌, 報道現場での記録 / テレビ番組, 映画, 写真集, カレンダー等の記念撮影</div>
<hr>
<div class="ライン_ハイト_02">カタログ, パンフレット, ポスター等のＣＭ用写真撮影 / 新聞, 雑誌, 報道現場での記録 / テレビ番組, 映画, 写真集, カレンダー等の記念撮影</div>
<hr>
<div class="ライン_ハイト_03">カタログ, パンフレット, ポスター等のＣＭ用写真撮影 / 新聞, 雑誌, 報道現場での記録 / テレビ番組, 映画, 写真集, カレンダー等の記念撮影</div>
<hr>
<div class="ライン_ハイト_04">カタログ, パンフレット, ポスター等のＣＭ用写真撮影 / 新聞, 雑誌, 報道現場での記録 / テレビ番組, 映画, 写真集, カレンダー等の記念撮影</div>
<hr>
<div class="ライン_ハイト_05">カタログ, パンフレット, ポスター等のＣＭ用写真撮影 / 新聞, 雑誌, 報道現場での記録 / テレビ番組, 映画, 写真集, カレンダー等の記念撮影</div>
<hr>
<div class="ライン_ハイト_06">カタログ, パンフレット, ポスター等のＣＭ用写真撮影 / 新聞, 雑誌, 報道現場での記録 / テレビ番組, 映画, 写真集, カレンダー等の記念撮影</div>
<hr>
<div class="ライン_ハイト_07">カタログ, パンフレット, ポスター等のＣＭ用写真撮影 / 新聞, 雑誌, 報道現場での記録 / テレビ番組, 映画, 写真集, カレンダー等の記念撮影</div>
<hr>

</html>