2005.05.05
テーマ： アクセス向上(301)
カテゴリ： 【実験中】
次はline-height（行の高さです。※注意したいのは行間の幅では無いことです。）
スタイルシート>>フォント>>line-height
////////////////////////////////////////////////////////////////////////
【直接指定の記述方法】
ほとんどのタグの中でstyleは指定できます。（これは楽天広場でも使えます！）
<h1 style="宣言(指定内容を宣言と呼びます)" >アクセスアップのでめらら</h1>
【CSS本来の記述方法】
ソースのheadタグの中や外部ファイルを作って記述する場合（楽天ではできません;＞＜）
p {color: red;}
td {color: red;}
･･･etc
////////////////////////////////////////////////////////////////////////
■line-height（セレクタにマッチした対象のインラインボックスの最初の高さを指定･･･一行目の文字の最下部から次の行の文字の最下部までの距離｢行の高さ｣がベースであって一行目の文字の最下部からニ行目文字の最上部までの距離｢行間｣ではありません）
日本語には大文字や小文字といった区別がありませんよね。しかし、概ね西洋の文字は英語やフランス語など、ラテン語系の文字は大文字小文字の区別があるためこの行の高さ指定でビジュアルがまったく違って見えます。
英字などでテキストを記述したい場合などにはかなり重要な要素になると思います。
また日本語や中国語などでも読みやすい設定というものもあると思いますので場合にあわせて設定できるようにしておきたいですね。
□normal（numberの1.0～1.2と同じ）
□number（使用したフォントサイズに対する倍率（小数可）で指定します）
「相対値指定の単位、em: フォントの大きさ 'font-size' を 1 、ex: 小文字の高さ 'x-height' を 1、px: ピクセル。解像度に依存してサイズが決定」
「絶対値指定の単位 、in: インチ=2.54 cm、cm: センチメートル、mm: ミリメートル、pt: ポイント=1/72 インチ、pc: パイカ=12 ポイント」
□percentage（使用したフォントのサイズを 100% として計算します）
□auto（'margin', 'top'/'bottom' の値にあわせて自動的に設定します）
□inherit（ほとんど使いませんが、一応(;笑)、親要素の値を明示的に継承する指定の値です）
▲直接指定の記述方法
□normal
<p style="line-height: normal;" >
line-height: normalを指定した文字<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
abcdefghijklmnopqrstuvwxyz<br>
0123456789
</p>
↓こんな感じですね
□number
<p style="line-height: 1.5;" >
line-height: 1.5を指定した文字<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
abcdefghijklmnopqrstuvwxyz<br>
0123456789
</p>
↓こんな感じですね（＾＾）
□length
<p style="line-height: 1.5em;" >
line-height: 1.5emを指定した文字<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
abcdefghijklmnopqrstuvwxyz<br>
0123456789
</p>
↓こんな感じですね（＾＾）
<p style="line-height: 20px;" >
line-height: 20pxを指定した文字<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
abcdefghijklmnopqrstuvwxyz<br>
0123456789
</p>
↓こんな感じですね（＾＾）
□percentage
<p style="line-height: 200%;" >
line-height: 200%を指定した文字<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
abcdefghijklmnopqrstuvwxyz<br>
0123456789
</p>
↓こんな感じですね（＾＾）
▲CSS本来の記述方法
<style type="text/css">
<!--
P {
font-family: 'Times New Roman';
font-style: normal;
font-variant: small-caps;
font-weight: 900;
font-size: 80%;
line-height: 2em;
}
-->
</style>
*****************************************************
【庶事所感】
三浦友和「赤いシリーズ」に出る
『俳優・三浦友和（５３）が、夫人・山口百恵さんとの思い出の作品、ＴＢＳ系ドラマ「赤い疑惑」リメーク版に特別出演することが３日、発表された。７５年の放送では、三浦は百恵さんの恋人役として出演。今作ではトラックの運転手役を務める。』
当時は正直「なんだこの荒唐無稽のバカバカしいドラマは!?」と思って何度も見なかったシリーズドラマなのですが、中三トリオももう50前なんだなぁ･･･
リメイク版時間があったら見てみようかと思います（＾＾）
*****************************************************
なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ
リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
スタイルシート>>フォント>>line-height
////////////////////////////////////////////////////////////////////////
【直接指定の記述方法】
ほとんどのタグの中でstyleは指定できます。（これは楽天広場でも使えます！）
<h1 style="宣言(指定内容を宣言と呼びます)" >アクセスアップのでめらら</h1>
【CSS本来の記述方法】
ソースのheadタグの中や外部ファイルを作って記述する場合（楽天ではできません;＞＜）
p {color: red;}
td {color: red;}
･･･etc
////////////////////////////////////////////////////////////////////////
■line-height（セレクタにマッチした対象のインラインボックスの最初の高さを指定･･･一行目の文字の最下部から次の行の文字の最下部までの距離｢行の高さ｣がベースであって一行目の文字の最下部からニ行目文字の最上部までの距離｢行間｣ではありません）
日本語には大文字や小文字といった区別がありませんよね。しかし、概ね西洋の文字は英語やフランス語など、ラテン語系の文字は大文字小文字の区別があるためこの行の高さ指定でビジュアルがまったく違って見えます。
英字などでテキストを記述したい場合などにはかなり重要な要素になると思います。
また日本語や中国語などでも読みやすい設定というものもあると思いますので場合にあわせて設定できるようにしておきたいですね。
□normal（numberの1.0～1.2と同じ）
□number（使用したフォントサイズに対する倍率（小数可）で指定します）
「相対値指定の単位、em: フォントの大きさ 'font-size' を 1 、ex: 小文字の高さ 'x-height' を 1、px: ピクセル。解像度に依存してサイズが決定」
「絶対値指定の単位 、in: インチ=2.54 cm、cm: センチメートル、mm: ミリメートル、pt: ポイント=1/72 インチ、pc: パイカ=12 ポイント」
□percentage（使用したフォントのサイズを 100% として計算します）
□auto（'margin', 'top'/'bottom' の値にあわせて自動的に設定します）
□inherit（ほとんど使いませんが、一応(;笑)、親要素の値を明示的に継承する指定の値です）
▲直接指定の記述方法
□normal
<p style="line-height: normal;" >
line-height: normalを指定した文字<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
abcdefghijklmnopqrstuvwxyz<br>
0123456789
</p>
↓こんな感じですね
line-height: normalを指定した文字
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
0123456789
□number
<p style="line-height: 1.5;" >
line-height: 1.5を指定した文字<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
abcdefghijklmnopqrstuvwxyz<br>
0123456789
</p>
↓こんな感じですね（＾＾）
line-height: 1.5を指定した文字
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
0123456789
□length
<p style="line-height: 1.5em;" >
line-height: 1.5emを指定した文字<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
abcdefghijklmnopqrstuvwxyz<br>
0123456789
</p>
↓こんな感じですね（＾＾）
line-height: 1.5emを指定した文字
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
0123456789
<p style="line-height: 20px;" >
line-height: 20pxを指定した文字<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
abcdefghijklmnopqrstuvwxyz<br>
0123456789
</p>
↓こんな感じですね（＾＾）
line-height: 20pxを指定した文字
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
0123456789
□percentage
<p style="line-height: 200%;" >
line-height: 200%を指定した文字<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
abcdefghijklmnopqrstuvwxyz<br>
0123456789
</p>
↓こんな感じですね（＾＾）
line-height: 200%を指定した文字
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
0123456789
▲CSS本来の記述方法
<style type="text/css">
<!--
P {
font-family: 'Times New Roman';
font-style: normal;
font-variant: small-caps;
font-weight: 900;
font-size: 80%;
line-height: 2em;
}
-->
</style>
*****************************************************
【庶事所感】
三浦友和「赤いシリーズ」に出る
『俳優・三浦友和（５３）が、夫人・山口百恵さんとの思い出の作品、ＴＢＳ系ドラマ「赤い疑惑」リメーク版に特別出演することが３日、発表された。７５年の放送では、三浦は百恵さんの恋人役として出演。今作ではトラックの運転手役を務める。』
当時は正直「なんだこの荒唐無稽のバカバカしいドラマは!?」と思って何度も見なかったシリーズドラマなのですが、中三トリオももう50前なんだなぁ･･･
リメイク版時間があったら見てみようかと思います（＾＾）
*****************************************************
なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ
リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
お気に入りの記事を「いいね！」で応援しよう
[【実験中】] カテゴリの最新記事
-
fontバリエーション(2) 2005.08.26 コメント(11)
-
スタイル一覧（後編） 2005.06.19 コメント(165)
【毎日開催】
15記事にいいね！で1ポイント
PR
Keyword Search
▼キーワード検索
Category
カテゴリ未分類
(96)【blog基本とマナー】
(8)【サイト作りの基礎】
(87)【テンプレート】
(49)【検索エンジンの理解】
(18)【検索エンジンに登録】
(5)【楽天広場のサイト】
(11)【アフィリエイト】
(12)【便利ツール】
(10)【実験中】
(76)Comments
© Rakuten Group, Inc.
