Dreamweaver Technique｜JAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 riference | DynamicHTML｜XHTML | XML sample | XSLT sample | RIKO's ASP Trial

Annual Report 2003

テキストの段組で文章を読みやすくする Dreamweaverの機能を使って、レイアウトテーブルを作り、テキストを段組して文章を読みやすくしています。 テーブルの背景色やセルごとの背景色を変えることができます。 人間が生理的に読みやすい1行の文字数は、横書きの場合20〜30文字前後のようです。長い文章で、あまりに1行の文字数が多いと、大変読みにくくなります。そこでレイアウトテーブルを使った段組を作成するとぐんと読みやすくなります。 レイアウトテーブルを描く レイアウトビューで 適当なサイズのレイアウトテーブルを描画します。続いてプロパティインスペクタで描画したレイアウトの【幅】を「600」（固定）に設定します。 レイアウトセルの描画 レイアウトテーブル上にレイアウトセルを描画します。セル幅は1行に20字前後の文字が入るくらいだと、読みやすくなります。そこで予めピクセルでフォントサイズを定義したCSSスタイルを作成しておき、フォントサイズ×文字数を目安にセル幅を設定します。また、セル同士の間には読みにくくならない程度の隙間を流し込みます。

素材を流し込む まず対象となるセルにカーソルを置き、トップバーイメージを挿入します。続いてテキスト用のセルに、テキストエディタなどで開いておいたテキストをペーストします。 まず左の1段目にペーストし、CSSスタイルを適用します。この際丁度文章が改行で切れるひとまとまりをペーストするようにしましょう。改行位置に関係なくテキストを挿入してしまうと、ブラウザ表示時、変なところで文章が途切れてしまう危険性があるからです。 一般的に、等幅フォントを指定していないと、1行あたりの文字数がずれてしまう現象がおきます。 1段目にテキストを流し込んだら続きを2段目にペーストしますが、1段目と2段目の行数バランスが一番良いのは同一行数です。それが難しいようであれば、2段目の行数を少なくすると見栄えが良くなります。 最後にスペーサーイメージの追加も行い、レイアウトが崩れるのを防止しておきます。 段の隙間に罫線を引く 全体のレイアウトにもよりますが、段（セル）の間に縦の罫線を引くと文章がより読みやすくなる場合もあります。 プレビュー レイアウトテーブルでの作業が終了したら、スタンダードビューモードに切り替え、レイアウトセル以外の調整／修正を行います。その後、ブラウザによるプレビューを行って問題がなければ作業は終了です。

Home	PREVIOUS ~ NEXT

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box