文字色を変える方法 | Dreamweaver入門

■HTMLで変える方法
入力例
<font color=”#ff00ff”>文字色を変えたい文字列</font>

・直接入力
タグをコードビューで打ち込むのがツールの使い方を覚えるより楽な気もしますが、簡単な入力ツールの使い方も後で書きますのでお待ちを。
これは簡単に説明するとこれは#を先頭にカラーコードを””の間に入力し文字色を変えたい文字列に着色した状態です。これは紫色になります。

・クイックタグ編集とカラーピッカーを使う方法
①分割ビューにする
②デザインビューの方で文字色を変えたい文字列を範囲選択する。
③「CTRL」キーと「T」キーを同時に押し、クイックタグ編集を起動。
④fontと入力し「ENTER」キーで確定する
⑤スペースキーを押した後、colorと入力し「ENTER」キーで確定する
⑥もう一回「ENTER」キーを押してクイックタグ編集を閉じる。
⑦コードビューで””の間をクリックし「CTRL」キーと「スペース」キーを押す。
⑧カラーピッカーで色を選択する。
⑨画面の関係ない所をクリックすると文字に色が付いている。

■CSSで変える方法
自由度の広い事とSEOの観点からできれば外部CSSで変えた方がよいでしょう。
・HTMLファイルの入力例

<span>フォントカラー指定文字列</span>

・CSSファイルの入力例（メイリオで表示）

@charset “utf-8”;
.mojicolor {
color: #F0F;
}

手順の例
・CSSの設定
①画面右中段CSSスタイルパネルで「新規CSSルール」をクリック
②「新規CSSルールダイアログ」で「セレクタータイプ」をクラス、「セレクター名」をmojicolor、ルール定義を新規スタイルシートファイルにし（既存のスタイルシートファイルに追加したい時は既存のファイルを指定）、「OK」ボタンを押す
③「スタイルシートファイルの別名で保存」ダイアログでCSSファイルに新しく名前を付けて作成・保存する。
④カテゴリ「タイプ」で「Color」を指定
⑤フォントの色を指定したらOKを押す。
・HTMLの設定
⑥デザインビューでフォントを変えたい文字列を範囲選択
⑦プロパティインスペクタのクラスでmojicolorというCSSで設定したクラス名を選択
⑧フォントが反映される。

関連記事