第四回 [CSSで文字レイアウト編]

CSSとは、「HTMLだけじゃできない、細かいレイアウトやデザインの設定をする為の仕組み」と考えれば大体あってます。

＃余談ですが、本来のCSSの目的は情報とデザインを切り離すことにあったみたいなのですが、
＃現状はそうもいってない模様ですね。

文字レイアウトだけで考えるとCSSを使うメリットは、

1.ブラウザに関係なく、文字サイズを指定できる。
2.文字のサイズやフォント、カラーが修正入った際にもCSSを直すだけで関連する文字情報を替えれる。

です。

なので、とりあえず文字設定だけでも全てCSS定義しておくのが当然になりますです。

CSSはHTMLの中に入れ込む方法と外部ファイルにする方法があります。
基本的には外部ファイルにしますので、空の内容でいいので、適当に作っておきましょう。

僕の場合は、サイトルートの直下にcssってディレクトリを作ってその中に置きます。
そうすれば、htmlからの参照はどこからでも、/css/***.cssで見れますし。

さらに詰めるとデザインが変るディレクトリ単位でもCSSを別けます。
例えば、http://****/contents-a/とhttp://****/contents-b/で内容もデザインも違う場合は当然CSSファイルはそのディレクトリ単位で別けます。

次に作ったCSSをHTMLに割り当てます。

ドリームウィーバーのメニューより「CSSスタイル」ウィンドウを表示させて割り当てます。
＃４J（WIN）の場合、SHIFT+F１１です。


ここで、右下の４つのボタンの左端の「スタイルシートを添付」を押します。
そうするとファイルが選べますので、２で作った空のCSSファイルを選択しましょう。

いよいよ、文字用のスタイル定義です。


このウィンドウの右下の４つのボタンの左から２番目の新規スタイルを押します。



するとこんなウィンドウが出てきますね。
名前はとりあえずtest_titleとでもしてみましょう。
タイプはカスタムスタイルの作成。定義場所は先ほど作成したファイル名になっていればOKです。
＃ちなみに、定義場所ってのがわかりにくいですね。保存場所とでも書けばいいのにｗ

準備できたらOKを押してください。

5

そうするとこんなウィンドウが表示されます。
今回は文字だけ定義しますので、この「タイプ」（ホントはタイポじゃないのかｗ）の定義を行います。

参考までにサンプルを。


ポイントはサイズとライン高です。ピクセル指定することにより、
ブラウザの違いや初期設定によるフォントの大きさの違いを回避できます。
また、ライン高は一行の高さを設定できるので、行間の設定ができ、
読みやすいレイアウトを行う事ができます。

＃この辺はCSSを使わないと出来ないですよね＾＾。

ちなみにこのフォントに出ているフォントリストは僕が良く使うリストです。
＃UIゴシック好きなので。ｗ

6

ためしに、５で定義したCSSだけを使ってまとめを書いてみます。
CSSを使うと、HTMLだけでは出来ない細かい文字レイアウトが行えます。
今回紹介しなかった他の設定を使うと更にいろいろな表現ができますし、スタイルを作成してから文字レイアウトを行うことにより、後で読みやすくレイアウトを行う事も簡単になります。

ただし、CSSにもブラウザによっては使えない設定が存在しますので、ご注意ください。

今回の内容は主要ブラウザでは全て使えるはずですが。（笑）