KompoZerのCSSエディタでテキストの装飾をする方法
選択したCSSのセレクタに含まれるテキストの装飾を指定します。 CSSエディタを開いて、設定をするセレクタを選択した画面のテキストタブでいろいろな設定をする事が […]
- 2012/7/18
- 2012/1/2
選択したCSSのセレクタに含まれるテキストの装飾を指定します。
CSSエディタを開いて、設定をするセレクタを選択した画面のテキストタブでいろいろな設定をする事ができます。
以下、テキストタブで指定できるテキスト装飾のプロパティは以下の通りです。順に見ていきましょう。
- フォントファミリ（font-family）
- 文字のフォントを指定します。ただしホームページを見るユーザー側の環境にフォントがインストールされていない場合は、ブラウザで設定されたフォントで表示される時もあります。
最近ではユーザーの環境に依存しないWebフォントという技術も広まりつつありますが、日本語フォントについてはまだまだ整備が足りていないようです。- 未設定
- フォントを指定しませんので、ブラウザの環境設定で指定されたフォントでページを表示します。
- 規定値
- Kompozerに規定値としてセットされているフォントを指定します。
ただ元々英語圏のソフトですので、日本語フォントの指定は規定値に含まれていません。プルダウンの内容は書き換えることはできません。 - 独自のフォントファミリ
- ページを制作しているコンピュータにインストールされているフォントから、指定するフォントを選択する事ができます。ただし、二つ以上のフォントをプルダウンで選択することはできません。もし二つ以上のフォントを選択したい場合は、プルダウンの内容を直接書き換える必要があります。
フォントの指定は、それぞれのフォントごとに半角カンマで区切って設定します。
- フォントサイズ
- pxやemといった単位を指定して文字の大きさを設定することができます。pxやptなどの単位はブラウザの設定によって、見ているユーザー側での文字の大きさ変更ができない場合がありますので、%やemといった文字サイズをブラウザ側で制御できる単位で指定したほうが、ユーザビリティ上も好ましいと思います。
ちなみに1emは1文字分の大きさを意味します。 - 行間隔
- 1行ごとの間隔を指定します。フォントサイズと同様pxやem等の単位を選んで指定します。
ある程度行間は空いていたほうが文章は読みやすくなりますので、文字サイズとのバランスでやや広めの指定をしたほうが良いと思います。 - 前景色
- 文字の色を設定します。右側のボタンをクリックすると文字色の選択パネルが表示されます。
カラーパレットから選んでも良いですし、16進数の色コード、色名（redやblueとか）を指定して設定することもできます。 - フォントウェイト
- 文字の太さを指定します。HTMLの<b>や<strong>でも太字を表現することができますが、<b>はHTML5以降のサポートが無く、<strong>は論理的強調の意味が付与されますので、ページ中に多用することはあまりお勧めできません。
文字の太さを太くしたい場合は、このセクションの設定を使ってCSSで設定する事をお薦めします。 - フォントスタイル
- 文字を斜体にする設定をします。
- 大文字小文字
- 英文をすべて小文字、すべて大文字、先頭だけ大文字といった設定をします。
- 行揃え
- 文字を揃える位置を右揃え、左揃え、中央揃え、均等割付から選択します。
- テキスト装飾
- 上記以外の文字の装飾を指定します。
「上線付き」「打ち消し線」「下線付き」「点滅」から指定してチェックボックスのチェックを入れます。
