【おやじのweb技】 html/javascript/css等
| フォント 10ポ 行間隔 100% |
ブラウザで長い文章をみると、デフォルト設定では行間隔が狭くて非常に読みにくいですね。そのため段落ごとに1行開けたりしますが、スタイルシートを用いて行の間隔を設定してしまった方が楽です。 この文章。テーブル内のフォントの大きさを10ポイントに設定していますが、、行間隔は通常の100%(ディフォルト設定)です。文章が長くなればなるほど、非常に見にくくなるのが判ります。 |
| フォント 10ポ 行間隔 150% |
ブラウザで長い文章をみると、デフォルト設定では行間隔が狭くて非常に読みにくいですね。そのため段落ごとに1行開けたりしますが、スタイルシートを用いて行の間隔を設定してしまった方が楽です。 この文章。読みやすくはありませんか。テーブル内のフォントの大きさを10ポイントに、行間を通常の150%に拡げています。 |
| フォント 10ポ 行間隔 200% |
ブラウザで長い文章をみると、デフォルト設定では行間隔が狭くて非常に読みにくいですね。そのため段落ごとに1行開けたりしますが、スタイルシートを用いて行の間隔を設定してしまった方が楽です。 この文章。少し間延びしているでしょうか。テーブル内のフォントの大きさを10ポイントに設定していますが、、行間隔は通常の200%まで拡げています。 |
※テーブルの行間隔設定ですから、すべてのテーブルに適用されます。
※<head>〜</head>間または外部スタイルシートに記述
-----次の行から(copy)-----
<style type="text/css">
<!--
table {
font-size:10pt; /*フォントの大きさ*/
line-height:150%; /*行間*/
}
-->
</style>
-----上の行まで(copy)-----
◆手順【style sheet/クラス設定】
※テーブル毎に行間隔を変える場合は、下記のクラス属性の設定を行います。
※クラス属性の設定を行う表には
<table>
<tr>
<td class="table_200">〜</td>
</tr>
</table>
のように<td>の設定を行います。
※下記は<head>〜</head>間に記述して下さい。
-----次の行から(copy)-----
<style type="text/css">
<!--
.table_200 {
font-size:10pt; /*フォントの大きさ*/
line-height:200%; /*行間*/
}
-->
</style>
-----上の行まで(copy)-----
※外部スタイルシートで行間隔を設定している場合でも、クラス設定が優先されます。
------
◆スタイルをテーブルに設定するので、すべてのテーブルがこのスタイルシート設定にとなります。
◆line-height:150%; ぐらいに設定すると大分読みやすいと思います。 あとは適当に1行開けたりして読みやすくなるように工夫することが大切です。
◆本サイトは、外部スタイルシートを用いてすべてテーブルのスタイルシート設定を line-height:150%; としています。但し、個別に変える場合は、[web技]で記載しているようにクラス属性を設定します。
◆操作MENUの[Window Resize]を選択するとウィンドウサイズが変更可能です。インラインフレームの幅もウィンドウ幅に追従します。
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----