Dreamweaverで、CSSを使用してwebページ内のテキストにカラーや行揃えなど、スタイルのプロパティを適用します。

ページデザイン上の文字をさらに見栄え良く仕上げる方法については、タイポグラフィとweb をご覧ください。

HTMLでテキストの構造を設定するとき、テキストにはデフォルトのスタイルが設定されています。CSSによるテキストスタイル設定を加えることで、ページデザインの階層、読みやすさ、全体の見栄えが飛躍的に向上します。

h1 を大きくするには、h1 セレクターの下にfont-size プロパティを追加します。

要素は、このページの主見出しです。

h1 {
margin: 0;
font-size: 48px;
}

HTMLページのデフォルトの欧文フォントは通常Times New Romanです。このフォントを変更するには、font-family プロパティを追加します。複数のフォントリストをコンマ区切りで指定できます。複数のフォントを指定すると、Webブラウザーではユーザーのコンピューター上にあるリストの最初のフォントを使って表示されます。利用可能なフォントから最適なものを選べるようにするとともに、sans-serifまたはserifも含めて、必ずなんらかのフォントで表示できるようにしておきましょう。

h1 {
...
font-size: 48px;
font-family: Gotham, Tahoma, sans-serif;
}

テキストは常に左揃えがデフォルトですが、text-align プロパティを追加すれば変更できます。テキストは左揃え、右揃え、中央揃え、両端揃えに設定できます。h1 セレクターとh2 セレクターにtext-align: center; プロパティを追加します。

要素は、このページの副見出しです。

h1 {
...
font-family: Gotham, Tahoma, sans-serif;
text-align: center;
h2 {
...
color: #282828;
text-align: center;
}

h1 はテキストのデフォルト色である黒のままですが、別の色に変更するには、color プロパティを16進数値などで設定します。「color:」と入力すると、コンテキストメニューが表示されます。カラーピッカーをクリックし、カラーメニューのスポイトツールをクリックします。土星画像の濃い橙色の部分をクリックしてカラーを選択し、Enterキーを押します。これで、濃い橙色の16進数値が自動的に追加されます。16進数値は直接入力することもできます。プロパティを締めくくるセミコロンを忘れずに入力してください。

h1 {
...
text-align: center;
color: #F47A53;
}

テキストを斜体にするには、font-style プロパティを使用します。h2 にこのプロパティと値italic を追加して、斜体に変更します。

h2 {
…
text-align: center;
font-style: italic;
}

font-weight プロパティで、テキストの太さを変更できます。テキストは100の倍数で太さを指定します。100が極細で、900が極太です。このプロパティを使ってh2 のフォントを細くします。

h2 {
…
font-style: italic;
font-weight: 300;
}

Text-transform を使用すると、テキストの大文字と小文字を簡単に入れ替えることができます。Letter-spacing では、セレクターの対象文字全体について、水平方向の間隔を指定できます。h1 でこれらの設定を試してみます。

h1 {
...
color: #F67A53;
text-transform: uppercase;
letter-spacing: .08em;
}

セレクターを見ると、line-height プロパティがあるのがわかります。これは縦方向の行間隔を設定するプロパティです。試しにline-height プロパティを削除して、このプロパティがないとどのような見栄えになるか確認してください。Ctrl（Command）キーを押しながらZキーを押して、変更を取り消します。