テーブルを使わずに段組みスタイルを作成するには
Section 4 レイヤーとDIVの操作
最終更新日時:
2020/07/20 13:38:19
コンテンツエリア内に段組みのスタイルを作成する方法について説明します。
はじめに
従来では、テーブルをレイアウト代わりに利用していた人も少なくないと思います。しかし、テーブルはあくまでデータをリストするための表であり、レイアウト代わりに使うのは文法上間違っているとされています。また、テーブルをレイアウト代わりに利用することによって、場合によって横幅が大きくなってしまう問題も発生してしまいます。
そこで、DIVを使ってコンテンツエリア内に段組みのスタイルを作成する方法について説明します。
手順
段組みの後に段組みを解除する
段組みの後に段組みを解除するためには、いくつかの方法があります。
- 段組みの次の要素に clear: both のスタイルを適用する
- clearfixを使用する
段組みの後の要素に clear:both のスタイルを適用する
wanichan.com
サイトの場合、段組みのあとの段落やブロック要素にインラインスタイルで適用するか、すべての見出しに clear: both
を追加しています。
段組みを解除して表示させるブロックにインラインで clear: both を入れるには、［タグプロパティ］パネルの style 欄に直接 clear:both と入力するとOKです。
clearfixを使用する
clearfixを使って、段組みセクションスタイルを作成します。クラススタイルなので何度使ってもOKです。
CSSファイルに以下のコードを記述します。
/* clearfix */
.clearfix: after {
content:"."; /* 新しい要素を作る */
display: block; /* ブロックレベル要素に */
clear: both;
visibility: hidden;
}
.clearfix{
min-height: 1px;
}
* html .clearfix {
height: 1px; /* IE6対応 */
/*¥*//*/
height: auto;
overflow: hidden;
/**/
}
2段組みブロックスタイルを作成する
段組みとの間に隙間をもたせて見やすいようにしましょう。それぞれのブロック幅を45%しておくのもよいでしょう。
左段のスタイル～ class:"leftbox"
- ［書式設定］メニューの［新規スタイル］をクリックします。
- ［新しいスタイル］ダイアログボックスの［セレクター］ボックスには「.leftbox」と入力します。
- ［定義先］ボックスの▼をクリックして、一覧から定義先を選択します。スタイルシートが適用されたWebページに設定する場合は、［既存のスタイルシート］を選択し、［URL］ボックスの▼をクリックして、一覧から適用されたCSSファイルを選択します。
- ［カテゴリ］ボックスの一覧から［レイアウト］を選択します。
- ［float］プロパティの▼をクリックして、一覧から［left］を選択します。
- ［カテゴリ］ボックスの一覧から［配置］を選択します。
- ［width］ボックスに 49% と指定して、［OK］ボタンをクリックします。
.leftbox {
float: left;
width: 49%;
}
右段のスタイル～ class:"rightbox"
- ［書式設定］メニューの［新規スタイル］をクリックします。
- ［新しいスタイル］ダイアログボックスの［セレクター］ボックスには「.rightbox」と入力します。
- ［定義先］ボックスの▼をクリックして、一覧から定義先を選択します。スタイルシートが適用されたWebページに設定する場合は、［既存のスタイルシート］を選択し、［URL］ボックスの▼をクリックして、一覧から適用されたCSSファイルを選択します。
- ［カテゴリ］ボックスの一覧から［レイアウト］を選択します。
- ［float］プロパティの▼をクリックして、一覧から［right］を選択します。
- ［カテゴリ］ボックスの一覧から［配置］を選択します。
- ［width］ボックスに 49% と指定して、［OK］ボタンをクリックします。
.rightbox {
float: right;
width: 49%;
}
段組みを作成する
ダイナミックWebテンプレートが適用されたWebページでの編集可能な領域内に段組みを挿入する場合、デザインビューですでに「段落」スタイルになっているとうまく挿入できないので、まず段落を挿入し（Enterキーで空の行を作成）、空の段落部分でタグを変更するとOKです。
- Enterキーを数回押します。
- クイックタグセレクターバーからdivに変更したい［<p>］の▼をクリックして、［タグの編集］をクリックします。
- ［クイックタグエディター］が起動するので、p を div に書き換えて レ ボタンをクリックします。
- 変更したdiv内にカーソルを移動して、［挿入］メニューの［HTML］をポイントして［div］をクリックします。
- 外側の div を選択して、［スタイルの適用］パネルから .clearfix を適用します。
- 内側のdivを選択して、 .leftbox を適用します。
- .leftbox
スタイルが適用されたdivを選択し、方向キーの→キーを押すと、その上にカーソルが移動するので、そこに別のdivを挿入します。ツールボックスパネルからは<div>をダブルクリックすると挿入できます。
- 挿入したdiv に .rightbox スタイルを適用します。
