間隔・表示位置 align_justify_height_indent_space

表示位置(横)

均等割付

行の高さ

１行目の字下げ

水平方向の表示位置を指定する(CSS)

text-align: center;

　text-align は、ブロックレベル要素（ひとつのまとまりを構成する要素）に適用できます。

　text-align は、水平方向の表示位置を指定するプロパティです。

　div { text-align: center; }

プロパティ名	値	説　　明
text-align	left	左寄せで表示
	center	中央寄せで表示
	right	右寄せで表示
	justify	両端揃えで表示

　【justifyの指定について】

複数行に渡る長い文章の場合に、各行（最終行を除く）の右端が綺麗に揃うように単語間隔が自動的に調整されます。英文などの場合に有効のようです。
文字間隔を調整する場合は、同時に「均等割付の形式」を指定して下さい。
ブラウザでの表示は、letter-spacing属性やword-spacing属性の影響を受ける場合があります。

　★ 使用例とブラウザでの表示 (c3-1)スタイルシートの書き方（基本）は、こちらです。


設定例： .c3-1le { text-align: left; border: 1px blue solid; } .c3-1ce { text-align: center; border: 1px blue solid; } .c3-1ri { text-align: right; border: 1px blue solid; } .c3-1ju { text-align: justify; }

使　用　例		ブラウザの表示

<div class=c3-1le>左寄せ</div>		左寄せ
<div class=c3-1ce>中央寄せ</div>		中央寄せ
<div class=c3-1ri>右寄せ</div>		右寄せ
<div class=c3-1ju>両端揃え： Show me the picture just a little bit. I am sorry to have kept you waiting so long.</div>		両端揃え： Show me the picture just a little bit. I am sorry to have kept you waiting so long.

※ justify は、１行目と２行目が両端揃えになります。最後の行は、普通の単語間隔です。

関連するページ

HTML タグページ

：段落の表示位置を指定する
HTML タグページ

：中央に配置する
HTML タグページ

：ひと纏めにする（ブロックタイプ）の表示位置を指定する
HTML タグページ

：見出し文字の表示位置を指定する

均等割付

均等割付の形式を指定する(CSS)

text-justify: auto;

　text-justify は、ブロックレベルのタグ（要素）に適用できます。

　text-justify は、均等割付の形式を指定するプロパティです。このプロパティを使用する場合は、text-alignプロパティで justify を指定しておく必要があります。

　div { text-align: justify; text-justify: distribute-all-lines }

プロパティ名	値	説　　明
text-justify	auto	自動
	distribute	単語間隔と文字間隔を調整
	distribute-all-lines	途中改行や最終行も調整（表意文字向け）
	inter-word	単語間隔を調整
	inter-cluster	単語間隔を持たない言語向け
	inter-ideograph	単語間隔と文字間隔を調整（表意文字向け）
	newspaper	単語間隔と文字間隔を調整（英文に最適）
	kashida	（アラビア語向け） Internet Exp.5.5 以降

このプロパティは、Internet Exp.の独自拡張機能です。※ CSS 2 では定義されていません。

※ 使用例とブラウザでの表示は、こちらです。

行の高さ

行の高さを指定する(CSS)

line-height: 130%;

　line-height は、全てのタグ（要素）に適用できます。

　line-height は、行の高さを指定するプロパティです。この指定をすると行間を適度に設定でき、文章を読みやすくできます。

　div { line-height: 130%; }

プロパティ名	値	説　　明
line-height	数値＋単位（em 等） or パーセント	行の高さを指定

＊初期値は normal（標準）です。

　【行の高さの指定方法】

　行の高さを指定する方法は、以下の３つのタイプがあります。

　■数値＋単位（em 等）で指定

line-height: 1.5em; … 文字サイズ×1.5倍の高さを指定（1em = 文字の高さ）
＊単位は、"pt"（ポイント数）や"px"（ピクセル数）も使用できますが、実用的ではありません。

　■数値で指定

line-height: 1.25; … 文字サイズ×1.25倍の高さを指定（1 = 文字の高さ）

　■パーセントで指定

line-height: 130%; … 文字サイズ×1.3倍の高さを指定（100% = 文字の高さ）

　★ 使用例とブラウザでの表示 (c3-3)スタイルシートの書き方（基本）は、こちらです。


設定例： .c3-3 p { padding: 1px 5px; margin: 8px 0px; width: 280px; } .c3-3h1em { line-height: 1em; border: 1px blue solid; } .c3-3h150 { line-height: 150%; border: 1px red solid; }

使　用　例		ブラウザの表示

<div class=c3-3> <p class=c3-3h1em>標準の行高さです。デフォルト（標準）は行間隔が狭いので読みにくくなります。</p> <p class=c3-3h150>１.５倍の行高さです。行間隔が「空きすぎ」かも知れません。</p></div>		標準の行高さです。デフォルト（標準）は行間隔が狭いので読みにくくなります。１.５倍の行高さです。行間隔が「空きすぎ」かも知れません。

※ 「使用例」の欄は、行高さが 130% に指定しています。

１行目の字下げ

１行目の字下げを指定する(CSS)

text-indent: 15pt;

　text-indent は、ブロックレベルのタグ（要素）に適用できます。

　text-indent は、１行目の字下げを指定するプロパティです。

　div { text-indent: 15pt; } p { text-indent: 1em; }

プロパティ名	値	説　　明
text-indent	数値＋単位（em 等） or パーセント	字下げ幅を指定

＊初期値は 0（字下げなし）です。字下げ幅は、使用している文字サイズに合わせて何文字分字下げするかを指定します。

＊文字サイズが 1em で全角１文字分を字下げする場合は 1em を指定し、文字サイズが 12px で全角２文字分を字下げする場合は 24px を指定します。

　★ 使用例とブラウザでの表示 (c3-4)スタイルシートの書き方（基本）は、こちらです。


設定例： .c3-4eng { text-indent: 1em; } .c3-4jap { margin-left: 15px; text-indent: -15px; }

使　用　例		ブラウザの表示

<div class=c3-4eng>This is an example of the display in English.</div>		This is an example of the display in English.
<div class=c3-4jap>※ この方法は、注釈行などでよく使われます。</div>		※ この方法は、注釈行などでよく使われます。

※ 1em：このページの文字サイズは１２ポイントに設定してるので、字下げ幅も１２ポイントになります。
英文の場合は、1.5emなど字下げ幅をもっと広く取る事が多いようです。

※ 日本語のページでも通常の字下げ幅は１文字分なので1emを指定します。

※ { margin-left: 15px; text-indent: -15px; }：ぶら下げインデントにする場合の方法です。margin-left で左の書き始めの位置を指定し、text-indent で１行目を左端から書き始める様に設定します。

文字間隔

文字の間隔を指定する(CSS)

letter-spacing: 5pt;

　letter-spacing は、全てのタグ（要素）に適用できます。

　letter-spacing は、文字と文字の間隔を指定するプロパティです。

　div { letter-spacing: 5pt; } p { letter-spacing: 0.5em; }

プロパティ名	値	説　　明
letter-spacing	数値＋単位（em 等）	文字と文字の間隔を指定

＊初期値は normal（標準）です。

　【Internet Exp.の不具合について】

＊このスタイルを設定した要素内で<br>タグ（br要素）を連続させると、２つ目（偶数個目）の br要素が無視されます。例えば、５つの br要素を連続させると、２番目と４番目の br要素が無視され、１、３、５個目の３個の改行のみが働きます。

＊ brタグ（要素）に対して letter-spacing: 0 または letter-spacing: normal を指定すると、この不具合を回避できます。

文字間隔を調整する際には、スペースを入れるのではなくこのプロパティを使用して下さい。
※ スペースで文字間隔を調整すると、音声ブラウザで正しく読み上げられません。

　★ 使用例とブラウザでの表示 (c3-5)スタイルシートの書き方（基本）は、こちらです。


設定例： .c3-5em02 { letter-spacing: 0.2em; } .c3-5em08 { letter-spacing: 0.8em; }

使　用　例		ブラウザの表示

標準の文字間隔です。<br>		標準の文字間隔です。
<span class=c3-5em02>文字間隔は0.2em。</span>		文字間隔は0.2em。
<div class=c3-5em08>文字間隔は0.8em。</div>		文字間隔は0.8em。

※ 文字間隔の指定は、タイトル行、見出し行、表の項目名などに使用します。

※ このページの文字サイズは１２ポイントなので、文字間隔は0.2em＝2.4pt、0.8em＝9.6ptになります。

単語間隔

単語の間隔を指定する(CSS)

word-spacing: 5pt;

　word-spacing は、全てのタグ（要素）に適用できます。

　word-spacing は、単語と単語の間隔を指定するプロパティです。

　div { word-spacing: 5pt; } p { word-spacing: 0.5em; }

プロパティ名	値	説　　明
word-spacing	数値＋単位（em 等）	単語と単語の間隔を指定

＊初期値は normal（標準）です。

一般的なブラウザでは、半角スペースを単語の区切りとして解釈します。

　★ 使用例とブラウザでの表示 (c3-6)スタイルシートの書き方（基本）は、こちらです。


設定例： .c3-6em02 { word-spacing: 0.2em; } .c3-6em08 { word-spacing: 0.8em; }

使　用　例		ブラウザの表示

standerd space of words.<br>		standerd space of words.
<span class=c3-6em02>word space is 0.2em.</span>		word space is 0.2em.
<div class=c3-6em08>word space is 0.8em.</div>		word space is 0.8em.

※ このページの単語サイズは１２ポイントなので、単語間隔は0.2em＝2.4pt、0.8em＝9.6ptになります。

和文･欧文間ｽﾍﾟｰｽ

日本語とアルファベットの間にスペースを入れる(CSS)

text-autospace: none;

　text-autospace は、全てのタグ（要素）に適用できます。

　text-autospace は、日本語等とアルファベット等（または数字や半角の括弧）の間にスペースを入れる時に使用するプロパティです。

　div { text-autospace: ideograph-alpha }

プロパティ名	値	説　　明
text-autospace	none	スペースを入れない（初期値）
	ideograph-alpha	日本語等とアルファベットの間にスペースを入れる
	ideograph-numeric	日本語等と数字の間にスペースを入れる
	ideograph-parenthesis	日本語等と半角括弧 ( ) の間にスペースを入れる
	ideograph-space	日本語等に挟まれた半角スペースの幅を広げる

※ 日本語等 … 日本語、中国語、朝鮮語などの表意文字。

※ このプロパティは、CSS 2 では定義されていません。

挿入されるスペースの幅は非常に小さいので、よく見ないと違いが分かりません。

　★ 使用例とブラウザでの表示 (c3-7)スタイルシートの書き方（基本）は、こちらです。


設定例： .c3-7none { text-autospace: none; font-size: 14pt; } .c3-7alp { text-autospace: ideograph-alpha; font-size: 14pt; } .c3-7num { text-autospace: ideograph-numeric; font-size: 14pt; } .c3-7par { text-autospace: ideograph-parenthesis; font-size: 14pt; } .c3-7spa { text-autospace: ideograph-space; font-size: 14pt; }

使　用　例		ブラウザの表示

<span class=c3-7none>sta:日本語english日本語		sta:日本語english日本語
<span class=c3-7alp>alp:日本語english日本語		alp:日本語english日本語

<span class=c3-7none>sta: 日本語1日本語2日本語3		sta: 日本語1日本語2日本語3
<span class=c3-7num>num:日本語1日本語2日本語3		num:日本語1日本語2日本語3

<span class=c3-7none>sta:日本語(括弧)日本語		sta:日本語(括弧)日本語
<span class=c3-7par>par:日本語(括弧)日本語		par:日本語(括弧)日本語

<span class=c3-7none>sta:日本語日本語日本語		sta:日本語日本語日本語
<span class=c3-7spa>spa:日本語日本語日本語		spa:日本語日本語日本語

☆ このプロパティは、CSS 2 では定義されていません。

※ 挿入されるスペースの幅は非常に小さいので、文字ポイントを大きくし、標準の指定（スペースなし）の行とセットで例示しています。

上付･下付文字

上付文字と下付文字を指定する(CSS)

vertical-align: super;

　vertical-align: super(sub); は、インライン要素に適用できます。

　vertical-align は、垂直方向の揃え方を指定するプロパティです。このプロパティの値に super または sub を指定すると、文字を「上付き」または「下付き」にできます。

　span { vertical-align: super; }

プロパティ名	値	説　　明
vertical-align	super	上付き文字にする
vertical-align	sub	下付き文字にする

＊初期値は baseline（ベースラインを揃える）です。

上付き文字と下付き文字は、supタグ（要素）とsubタグ（要素）で示すこともできます。

　★ 使用例とブラウザでの表示 (c3-8)スタイルシートの書き方（基本）は、こちらです。


設定例： .c3-8upp { vertical-align: super; } .c3-8low { vertical-align: sub; }

使　用　例		ブラウザの表示

面積は、１００ｍ<span class=c3-8upp>２</span>です。		面積は、１００ｍ２です。
CO<span class=c3-8low>２</span>の削減は緊急の課題です。		CO2の削減は緊急の課題です。

※ 上付文字と下付文字は、文字のポイントを 70％程度に小さくするとバランスが良くなります。