TOP ブログの基本 アフィリエイト アクセスアップ カスタマイズ ブログ・HTML ブログ・CSS




ハイサイ(ようこそ)利爺のブログへ


●ブログの基本、アフィリエイト、HTML・CSSまで
初めての方にも分かり易いように下記のシリーズで纏めています。

・・・・・・・・・・・・・・・・ 各章の項目(目次) ・・・・・・・・・・・・・・・
= 現在、シリーズ記事を書いているブロックです。

エントリー順に確認できるように【目次】を作ってありますので
上段のコンテンツバー(menu)または上記の項目から各ブロックに入れます。


●本文中に表示しているアイコンは
= 参照記事  = 頁中の章  = 注釈  = 記事ブロック
を表します。

2009年04月27日

行間・行送りについて

■ 4-12 行の高さの定義


●HTML・CSSで用いる「行」の考え方。

行の設定には
行送り」「行間
の考え方があります。

HTML・CSSでは「高さ」と表現し
プロパティ「line-height」で定義します。

【画像1】
test005.jpg

参照画像のように

行送りとは
前の行の文字の中心から、
次の行の文字の中心までの距離(サイズ)をいいます。

    注
   行の中心からの考え方は、写真植字(写植)の概念です。
   行の上辺から、次の行の上辺までと表現しても同じ意味です。

行間は
その行の下辺から、次の行の上辺までのサイズを言います。
行と行の間の空きサイズのことです。

行間と行送りの関係は
●「行と行」の間の空きを「行間」
●「行間」に「文字の大きさ」を足したのが「行送り」になります。

行送り・行間とも、グラフィックデザインや印刷の世界では
常に意識している文字入力の基本です。

行に「送り」や「空き」があるように

入力する個々の文字にも
 ●文字送り =(字送り)
 ●文字間 =(字間)
同じような仕組みがあります。

「文字と文字の間を広げる・詰める」などとよく耳にしますね。

文字の送り・間の考え方は、行の仕組みと同じです。
プロパティの 「letter-spacing:」 を用いて定義しますが一般的ではありません。

前述したように
HTML・CSSでは行間の考え方はなく
行送りを「行の高さ」として、プロパティline-height
で定義するのが一般的です。


ときどきHTMLやCSSを解説をしている「ブログ」の中にも
「行の高さ」を「行間」として表現している例も見られます。

●行の高さ(行送り) と
●行間 は

参照画像や例で確認したとおり、明確に異なりますね。

このブログでは「行送り」を
行の高さ
として表現を統一しておきます。


行の高さは

●絶対サイズ
●相対サイズ

での定義の方法があります。

【絶対サイズ】

in
cm
mm
pt
pc
px


【相対サイズ】
em
ex
%



インチ( 1inchi = 25.4 mm )
センチメートル
ミリメートル
ポイント( 1pt = 1/72 inchi)
パイカ( 1pc = 12pt )
ピクセル



指定文字のサイズに対する比率
指定文字の文字 x の高さ
指定文字のサイズに対する%



日本語のフォントは
文字の上下(縦)」と左右(横)のサイズが同じになっています。

行の高さは
そのブログで定義されている文字の大きさを基準として考えますので

行の高さを使用文字の大きさと、同じサイズで定義すると、
行と行の間には隙間がなく、くっついて表示されます。

参照 
●タグで指定するWebで使用できる書体
●「Web上の書体」について
http://tosiji-dreamafi.seesaa.net/article/137856488.html


定義は
絶対、相対サイズのどの方法でも構いません。

ブログやホームページのレイアウトは
個人的な好みが反映され、使用している文字の種類や大きさも
その人なりの感覚で定義しているのが一般的です。

文字の種類や大きさ、行の高さなどは
ブログの特質、全体的なレイアウトの見やすさなどを考えて
定義するのが基本ですね。


●このサンプルぶろぐ(利爺のゆったり…)の

「CSS」で定義している記事セレクタ
「.text」を確認してみます。

【CSS】

.text{
font-size: 12px;
line-height:18px;
padding:0px 15px 5px 10px;
margin-top:0px;
}


文字の大きさ =  12px
行の高さ   =  18px

「絶対サイズ」での定義です。

「line-height:18px;」は
●文字の大きさを12px、行間は6pxにして次の行を作りなさい。
と言うのと同じことですね。


サンプルCSSのように
「px」単位のような絶対サイズでの定義は、文字の大きさを定義(修正)したとき、同時に行の高さも定義し直さないと
最初に定義した値での表示になりますね。


記事を書き込んでいるとき
段落あるいは文章の一部や文字を大きくして、強調したい時があります。

    注
   ●絶対・相対指定はCSSの定義でも頻繁に使用します。

   ●記事の文章や文字の一部を大きく、または小さく表示する時には

   ●CSSを書き換えるのではなく
    入力時に「HTMLタグ」で、その変更したい文章や文字の範囲だけの
    定義にします。


   ●CSSはブログ全体のバランスを考えた基本的な設計図です。
    CSSの定義はブログ全体へ反映されますので、
    記事の一部の変更は「HTML」タグでの指定が基本です。

   ●CSSより「HTML」タグの方が優先されます。


【例1 このブログのCSS定義】
定義どおりの表示

【CSS】

font-size: 12px;
line-height:18px;
  ↓
【表示】(青色文字) 
利爺です。
よろしくお願いします。


CSSの定義どおり
文字の大きさは「12px」(このブログの基本文字サイズです)
行は「18px」の高さで表示されています。


CSSの定義で

@文字と行の高さを同じサイズにすると

font-size: 12px;
line-height:12px;
  ↓
【表示】(青色文字)

利爺です。
よろしくお願いします。


行と行の間には「空き」がないですね。

A line-height:24px;

として行の高さを文字の2倍サイズの「24px」に変更。
  ↓
【表示】(青色文字)

利爺です。
よろしくお願いします。


行と行の間が広がりますね。

行間の考え方でしたら、
line-height:24px;は
「文字12px + 行間12px = 行の高さ24px」ですね。

●line-height は
ブログの文字のサイズ(12px)より大きく指定するのが基本になります。

出版物の「あたりまえの定理」です。



【例2 絶対サイズでの定義】
文字を26pxの大きさに変更。行の高さ変更なし。

【CSS】

font-size: 26px;
line-height:18px; ← 定義は変更していません

【HTML】
「入力タグの形式」
<span style="font-size:26px;line-height:18px;">文章</span>


  ↓

【表示】

利爺です。
よろしくお願いします。


文字を大きくした結果、行と行が重なって表示されています。

セレクタ「.text」の
プロパティ「line-height:18px;」の絶対サイズでの指定が反映されている結果ですね。

文字の大きさは「26px」もあるのに、行の高さは「18px」のままなので、高さのサイズより
文字の方が大きく、行と行が重なって表示されるということです。

この形で表示されているブログ記事をよく見うけます。


文字の大きさに準じて、行の高さを調整(再定義)

【CSS】
font-size: 26px;  ← 文字サイズを変更
line-height:32px;  ← 行の高さも変更

【HTML】
「入力タグの形式」
<span style="font-size:26px;line-height:32px;">文章</span>


  ↓

【表示】
利爺です。
よろしくお願いします。


記事入力の時、HTMLタグで
文字の大きさと、行送りの指定を同時にしました。

行の高さを文字のサイズより大きく「32px」に変更したので
行と行が離れて表示されていますね。



この例のように
「px」や「in」で文字の大きさ、行の高さなどを指定する方法を
「絶対サイズ」
での定義といいますね。


【例3 相対サイズでの定義】
「相対サイズ」は
文字サイズを「●px」で使用したとき、高さ(行送り)は、使用フォントサイズに対して相対的に判断される表示の方法です。

プロパティは

line-height:1.2em; (1emは等倍)
line-height:120%; (100%は等倍)


のどれを使っても同じ意味になります。

【CSS】
@ フォントサイズを26pxの例
font-size: 26px;
line-height:1.2em; (pxで考えると26pxの1.2倍=32px)

【HTML】
「入力タグの形式」
<span style="font-size:26px;line-height:1.2em;">文章</span>


  ↓

【表示】
利爺です。
よろしくお願いします。


文字の大きさに対して、自動的(相対的)に行の高さが計算されます。

pxで考えると26px の 1.2em(倍)= 32px の行の高さで表示されています。



A フォントサイズを30px の例

【CSS】
font-size: 30px;
line-height:120%; (30pxの120%=36px)

【HTML】
「入力タグの形式」
<Span style="font-size:30px;line-height:120%;">文章</span>


  ↓

【表示】
利爺です。
よろしくお願いします。


文字を大きくしても

「1.2em」や「120%

と「行の高さ」が相対的に定義されていますので、
文字サイズに相対(em・%)して
広がって表示されていますね。



使用文字サイズが大きくなれば
それに伴って「行」も相対的に変更される定義方法が
「相対サイズ」ですね。

この「絶対」「相対」は
文字の大きさや、行の高さだけに使用する考え方ではなく、画像表示のurlの絶対番地、相対番地、あるいはtableでの絶対・相対幅など、頻繁に使われている定義の方法です。

CSSやHTMLへの定義は、基本的には「相対」の方が管理は楽で理想的です。


……

出版界では、文字を大きくしても

ページ内に窮屈にならない程度の行送りを実現する「平体」。
一行に入力する文字数を増やす「長体」。

など、変則的な「入力の方法」があります。

    注
   平体や長体の仕組みは、文字詰めとは異なります。

   文字詰めは書体には関係なく送りを調整して表示しますが、
   平や長体は、書体そのもの「高さや幅」を調整します。

   先のように、日本語書体は高さ(上下)と幅(左右)が同じサイズに
   なっています。
   
   書体の
   ● 「上下(縦)サイズを小さくして、左右(幅)はそのままの形を平体」
   ● 逆に「上下はそのままで、左右を小さくするのが長体」

    【例】 20px の書体に
     1) 10%(2px)の「平」をかけると、縦の高さは「18px」
        左右幅はそのままの「20px」

     2)「長 」10% は、縦の高さはそのまま「20px」
        左右幅が「18px」になります。

     3)掛け率の「%」は任意の比率で使用します。

    ※書体そのものの形を変えて
     ページや段落の行の数や一行に入る文字数を調整する方法です。

    ※同じように書体を右または左に傾ける斜体もあります。

Webでは使用する書体の概念が違いますので、一般的でないですね。


変則文字を使用している代表的な例が、毎日見ている

「新聞書体」です。

新聞の縦組みと、webでの横組みの違いはありますが
比較して、どこが異なるか確認して見ましょう。


定義の方法の絶対・相対のメリット、デメリットも
使用しているうちに理解できてきます。




▲カスタマイズの関連記事 【別窓での表示です】
   holder01.gif ブログのカスタマイズ-目次ー
    http://tosiji-dreamafi.seesaa.net/article/115424617.html

▲HTMLの関連記事 【別窓での表示です】
   holder01.gif ブログで使うHTML-目次ー
    http://tosiji-dreamafi.seesaa.net/article/133635358.html

★ご協力お願いいたします★   
      kame.jpg
    banner_01.gif
……人気ブログランキング……



この記事へのコメント
う〜ん、
利さんの、このシリーズ、
本当にすごいですね。

もう知識の豊富さに、唖然としています。

敬意をこめて、

応援、ポチっ!
Posted by 倭人 at 2009年04月29日 01:38
こんばんは。はじめまして!
しょうちゃんtoゆーこです!!
ブログランキング経由でやって来ました!

夫婦でアフィリエイトをはじめて
3ヶ月がたちました!
まだまだ初心者ですが 
これからも、がんばっていこうと思っています!

色々と参考にさせていただきました。
また遊びに来ます !

応援ぽち!
Posted by しょうちゃんtoゆーこ at 2009年05月13日 00:08
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。