*

ウェッブ制作

Width =px

ホーム > 変化を付ける小技 >
テキストの折り返し行頭にスペース MENU 

箇条書き等でテキストを記述した場合、2行目以降が連番と同じ先頭位置から表示される。連番がテキストと同じ位置なので、区切れが分かり難くなり見づらい、これをCSSで解消する方法。

適用前

1.あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわ

2.アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワ


適用後

1.あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわ

2.アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワ


HTML記述

CSS記述

CSS補足:空けるスペースには、pxも使える。この例では、プロポーションフォントなので、連番の後の「.」で狭くなっているため。