第四回 [CSSで文字レイアウト編] | FireWorksとDreamWeaverでオーサリング

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

誰も聞けない聞いてはいけない
HTMLオーサリング技法

~ファイアワークスとドリームウィーバーでオーサリング~

CSSで文字レイアウト編(1)

CSSを使って細かいレイアウトをする方法をご紹介します。
例によってどう書けばいいのか迷ってますのでデイリー更新かもしれません。



1

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

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

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

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

です。

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


2

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

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

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


3

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

ドリームウィーバーのメニューより「CSSスタイル」ウィンドウを表示させて割り当てます。
#4J(WIN)の場合、SHIFT+F11です。


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


4

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


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



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

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


5



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

参考までにサンプルを。


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

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

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


6

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

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

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


Written by Takayuki [email protected] 2003/02/05Updated.


作成日
2008.05.04 (日)
最終更新日
2008.05.04 (日)
作成者
Takayuki Hirosawa
  • speed_fish 引っ越ししてからつなげていなかったとても古いnetgearのnas。今日つなげようとしたらlan経由で全くつながらず。windows10が勝手にsmb1を切り捨ててたと判明するまでに3時間。httpでもpingでもつながるのにos… https://t.co/Ejd7om16t0 2018-04-24 11:41:09
  • speed_fish modxからevoが切り離しかー。まあrevoとはもう別物感溢れてたし良いんじゃないでしょうか。やりやすくなるといいなー。 2017-04-28 20:33:09
  • speed_fish Chromeの57から頻発している、ERR_BLOCKED_BY_XSS_AUDITOR。試してみたけど、hidden含め入力項目にJavaScriptが入っても発生。HTTPS化していないフォームはまあ当然発生かな。 2017-04-10 18:00:57
  • speed_fish modxサイトをcloudflare化でeFormで引っかかる。中身みたらsite_urlでリファラーチェックしてました。ssl flexibleを使おうとしてたので、eFormを改造。パラメータにsiteurlを追加しましたとさ。#modx #cloudflare #eform 2017-03-04 00:44:09
  • speed_fish メモメモ。MODxでAMP対応するスニペット。 GETのURLが気に食わないのでリライトかな。 https://t.co/Oa9qzQ5dOr 2017-02-03 01:10:54