ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >CSS一覧 >テキスト

文字、単語の間隔を空ける

{letter-spacing:値;} で文字と文字の間を空けることができます。 間隔の値はpxなどで指定します。間隔の値をnormalとすると デフォルトの間隔になります。

【ブラウザ表示】

文字と文字の間が15px空いています。
文字と文字の間が2em空いています。

ソース

<div class="space1">文字と文字の間が15px空いています。</div>
<div class="space2">文字と文字の間が2em空いています。</div>

外部ファイル

div.space1{letter-spacing:15px;}
div.space2{letter-spacing:2em;}


<body>〜</body>に直接記入する場合

<div style="letter-spacing:15px;">
文字と文字の間が15px空いています。
</div>
<div style="letter-spacing:2em;">
文字と文字の間が2em空いています。
</div>

■単語と単語の間を空ける

{word-spacing:値;}で単語と単語の間を空けることができます。
上記と同様に間隔の値はpxなどで指定します。 間隔の値をnormalとすると デフォルトの間隔になります。

【ブラウザ表示】

HTML CSS スタイルシート WEB
HP FTP アップロード ブラウザ

ソース

<div class="space3">HTML CSS スタイルシート WEB</div>
<div class="space4">HP FTP アップロード ブラウザ</div>

外部ファイル

div.space3{word-spacing:20px;}
div.space4{word-spacing:4em;}


<body>〜</body>に直接記入する場合

<div style="word-spacing:20px;">
HTML CSS スタイルシート WEB
</div>
<div style="word-spacing:4em;">
HP FTP アップロード ブラウザ
</div>

■ その他の項目

文字の大きさを変える
文字の色を変える
文字の太さを指定する
文字の書体を指定する
文字を斜めにする
小文字英字を大文字で表示
文字の表示位置を指定する
字下げをする
行間を指定する
文字に線を引く
小文字と大文字を入れ換える
上付き文字と下付き文字

スタイルシート一覧のページに戻る

CSS一覧
テキスト
イメージ
テーブル
ボックス
リンク
リスト
水平線
フォーム
フレーム
ページ全体

HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.