今回のねらい いよいよ登場した、Adobe Creative Suite 3。Dreamweaverのバージョンも、Dreamweaver CS3 となりました。
今回は、Dreamweaver CS3 バージョンアップされた機能を紹介します。 第四回目は、CSSのコードフォーマットと文字コードについて見てみましょう。
CSSのコードフォーマットCSSのコードをどのように記述するのかは、環境設定で設定を行うことができます。 環境設定 ― CSSスタイルシート[編集]−[環境設定]メニューのカテゴリ[CSSスタイルシート]にて、以下の項目を設定することができます。 ※これはバージョンアップではなく前バージョンからあった機能です。 
- ショートバンドの利用について
- CSSパネルの各セレクタ名をダブルクリックした時の機能
- ショートバンドとは・・・
- CSSのコードを省略して記述することができるものです。例えば、「フォント」に対してショートバンドを使った場合、以下のように省略されます。
環境設定 ― CSSソースフォーマットオプション[編集]−[環境設定]メニューのカテゴリ[コードフォーマット]の高度フォーマット[CSS]ボタンにて、以下の項目を設定することができます。 
- プロパティの前でのインデント（タブやスペースを使って字さげする）について
[プロパティをインデント]の項目 - プロパティの改行方法について
[行ごとにプロパティ]の項目 - 複数セレクタの場合の改行方法について
[同じ行にルールすべてのセレクタ]の項目 - ルールごとの間隔について
[ルール間に空白行]の項目
例えば、できるだけ行数を少なく記述するには、以下のように設定をします。 
- ■既存のソースコードにCSSソースフォーマットオプションを反映させる
- CSSソースフォーマットオプションの変更を後からソースコードに反映させるには、環境設定を終えてから、[コマンド]−[ソースコードの適応]を実行します。
[補足] 文字コードの問題Dreamweaver CS3では、文字コードの初期設定がSHIFT-JISから「UTF-8」に変更されました。 どちらを使ったとしてもWebサイトの制作に大きく影響の出るものではありません。しかし、「旧バージョンのDreamweaverで制作をしたサイトをCS3に引き継いだ」場合には、「環境設定が初期設定のままでは、UTF-8の新規ページが作成される」ことに注意しましょう。 環境設定 ― エンコーディング初期設定[編集]−[環境設定]メニューのカテゴリ[新規ドキュメント]の[エンコーディング初期設定]にて変更することができます。 
ちなみに、新規ページを作成した場合の文字コード原則は以下の通りです。 | 環境設定 | テンプレート使用 | 文字コード |
|---|
| SHIFT-JIS | しない | SHIFT-JIS | | UTF-8 | しない | UTF-8 | | SHIFT-JIS | する | テンプレートに依存 | | UTF-8 | する | テンプレートに依存 |
文字コードの変換方法Dreamweaverは、毎回の保存時に「<meta>のキャラクターセット指定にある文字コード」で保存します。つまり、文字コードを変換したい場合は、<meta>のキャラクターセット指定のソースコードを書き換えて保存しなおせばOKです。 <meta>のキャラクターセット指定とは、以下のようなソースコードです。 - SHIFT-JISの場合
- <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
- UTF-8の場合
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- ■文字コードについて…
- 現在、日本のコンピューター処理で使われている文字コードはSHIFT-JISですが、今後はUTF-8に移行することになると予想されます。UTF-8は、多国語処理に向いている文字コードのため、Webサイト制作に限らずコンピューターのスタンダードな文字コードとなりつつあるからです。また、Webプログラムと連携した制作の現場では、UTF-8が使われていることが多くなっています。
r360studioからのお知らせ
|
職種からお仕事を探す
Webディレクター│
Webデザイナー│
コーダー
│
ネットショップ運営│モバイルサイト│
事務
│
その他
今週の特集
