1. ホーム > 
  2. Webサイト制作 > 
  3. KompoZerの使い方 > 
  4. KompoZerのCSSエディタでテキストの装飾をする方法

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で設定する事をお薦めします。
フォントスタイル
文字を斜体にする設定をします。
大文字小文字
英文をすべて小文字、すべて大文字、先頭だけ大文字といった設定をします。
行揃え
文字を揃える位置を右揃え、左揃え、中央揃え、均等割付から選択します。
テキスト装飾
上記以外の文字の装飾を指定します。
「上線付き」「打ち消し線」「下線付き」「点滅」から指定してチェックボックスのチェックを入れます。

Webデザイン・プログラムスキルを身につけたい方におすすめしたいスクール

私もWebスキルを身につけるためにスクールに通いましたが、正直言って「趣味の講座レベルのスクール」が多く、実践的なスキルを身につける事ができるスクールは多くありません。

ただ全くの未経験ではWebを仕事にする事が難しいのも事実。そこでWebの実践的なスキルを身につけられるスクールをご紹介します。

スクールの価格は安くありませんので、まずは無料体験レッスンや無料カウンセリングで体験してみて、良さそうだなと思ったら本格的に取り組む方法をおすすめします。

Webスク(6か月のガッチリ型)

半年間、オンラインとオフラインのカリキュラムで「即戦力」と呼ばれるような人材になるためのスクール。業界の企業を見学するオフィスツアーやIT企業の人事担当との交流会など、現実的なキャリア形成のイメージを作れる機会があるのが良いです。

無料体験レッスンでは、キャリア形成の相談もできます。

WebCamp(1か月の集中型)

こちらは1ヶ月の短期集中型。と言っても、最初のカウンセリングを通してカリキュラムは個人ごとのオーダーメイドなので、自分の都合で学べるのが良いです。

このご時世、直接Web制作に携わらない部署の人もWebに関する知識は必要なので、社会人の方の受講も多いです。

CodeCamp(2〜6か月のカスタマイズ型)

現役エンジニア・デザイナーからマンツーマン指導が受けられるスクールです。内容的には他のスクールにひけはとらないにもかかわらず、オンラインのみなので価格が安いのが良いです。

新卒などの社内研修でも利用されているので、社員のスキルギャップに悩んでいる方にも良いかもしれません。

「役にたった」と思ったらシェアお願いします