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

 

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

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

CSSでwebページのテキストをスタイル設定する

始める前に

プロジェクトファイルをダウンロードして保存します。Dreamweaverでstyle-text.htmlを開き、分割ビューでstyles.css を表示します。ライブビューペインをサイズ変更して、webデザイン上のテキストがすべて土星画像の右に表示されるようにします。

コードビューペインでは、/* Start here */までスクロールします。

style-text.htmlを開く

テキストのサイズを変更する

h1を大きくするには、h1セレクターの下にfont-sizeプロパティを追加します。<h1>要素は、このページの主見出しです。

CSS

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

テキストのサイズを変更する

書体を変更する

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

CSS

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

書体を変更する

テキストの整列方法を変更する

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

CSS

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

テキストの整列方法を変更する

テキストカラーを変更する

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

CSS

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

テキストカラーを変更する
テキストカラーを変更する

テキストを斜体にする

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

CSS

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

テキストを斜体にする

フォントの太さを変更する

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

CSS

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

フォントの太さを変更する

その他の便利なテキストプロパティを追加する

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

CSS

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

その他の便利なテキストプロパティを追加する

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

line-heightプロパティ

ブラウザーでのプレビュー」をクリックしてブラウザーを選択し、スタイル設定されたテキストを確認します。

変更後の設定を表示するには、ファイルを保存してください。

ブラウザーでのプレビュー
04/24/2018
このページは役に立ちましたか。