要素の配置を決める|divとfloatで簡単作成【CSS】

HTML&CSS

ホームページのデザインを作成する場合、まず、大まかなデザインを決めます。

例えば、

  • 上にタイトルを書く場所
  • 下にサイトマップを作りたい
  • 左右に画像と記事を分けて表示したい

などなど、数多い要望があると思います。

これから紹介するのは、ホームページを作成する上での要素の配置方法。

初心者の方でも扱いやすい《div》と《float》の2つを使った基本的な配置方法を紹介します。

ブロックレベル要素「div」で3つのブロックを作成

始めに、大まかなデザインを決めましょう。

ここでは、例として「上・左・右」のそれぞれにレイアウトを配置します。

レイアウトを配置する時に利用する要素としては「div」要素を利用します。

div要素は汎用性のある要素の1つで、この要素の中に新たなdiv要素を作成することもできます。

コンテンツを区分する際には「div」を駆使してレイアウトを設計していきましょう。

レイアウトを作成(A)

早速、div要素を使って1つのレイアウトを作成していきます。

使い方としては、

<div class="sample_a">A</div>

HTMLでは、たったこれだけを記載するだけ。

この時、《クラス属性》を使い、下記のCSSを指定しています。

装飾を担当するCSSでは、

.sample_a {
     width: 100%; /* 横幅を指定 */
     height: 200px; /* 縦幅を指定 */
     background-color: blue; /*背景色*/
}

お好みの横幅、縦幅を指定することで1つのレイアウトが完成します。

これで、Aのレイアウトを作成できました。

後は、同じように1つのレイアウトを3つ作成していきます。

レイアウトを2つ作成(B・C)

左右にレイアウトを配置する時は《div》要素と《flort》プロパティと《clear》プロパティの3つを利用します。

まず、先程と同じようにdiv要素を使ってレイアウトを作成します。

今回は、レイアウトが2つあるので、BとCの2つのレイアウトを作成しましょう。

HTMLでは、

<div class="sample_b">B</div>
<div class="sample_c">C</div>

div要素を利用して「B」と「C」のそれぞれを作成しました。

これを横に配置するためにCSSを編集していきます。

まずは、それぞれを横に配置するので大きさを指定する必要があります。

横幅は100%なので、AとBのそれぞれを半分(50%)以下にすることで横に配置することができます。

CSSでの大きさを指定すると、

.sample_b {
     width: 50%; /* 横幅を指定 */
     height: 500px; /* 縦幅を指定 */
     background-color:#DCDCDC; /*背景色*/
}
.sample_c {
     width: 50%; /* 横幅を指定 */
     height: 500px; /* 縦幅を指定 */
     background-color:green; /*背景色*/
}

それぞれのレイアウトの横幅が合わせて100%以内に収まるように設計します。

後は、レイアウト「B」と「C」を横並びにするだけです。

プロパティ《float》と《clear》で横並びにする

レイアウトを横並びにする方法は《float》プロパティと《clear》プロパティを利用します。

このプロパティはレイアウトを行う上での基本なので、是非、身に付けておきましょう。

使い方としては、

.sample_b {
     width: 50%; /* 横幅を指定 */
     height: 500px; /* 縦幅を指定 */
     background-color:#DCDCDC; /*背景色*/
     float: left;
}
.sample_c {
     width: 50%; /* 横幅を指定 */
     height: 500px; /* 縦幅を指定 */
     background-color:green; /*背景色*/
     float: left;
}

上記のソースコードのように【float: left】と記載するだけで要素を左寄せにすることができます。

通常は下に配置されるはずの要素が《float》を利用することで配置が変化します。

ただ、これだけでは十分ではありません。

プロパティ《float》は3つのレイアウトの配置を変化させるわけではなく、これ以降のレイアウトの配置も変化させてしまいます。

つまり、以降のレイアウトを崩さないためにプロパティ《float》を解除する必要があるのです。

左寄せ、右寄せの解除は《clear》プロパティ

プロパティ《float》を利用した際には《clear》プロパティで以降の位置を元に戻します。

HTMLでは、

<div class="sample_clear"></div>

CSSでは、

.sample_clear {
     clear: both;
}

たった、これだけの追加で位置を元に戻すことができます。

A・B・Cのレイアウトを作成

今回、作成した「A」「B」「C」のレイアウトを作成したソースコード(HTML)は、

<div class="sample_a">A</div>
<div class="sample_b">B</div>
<div class="sample_c">C</div>
<div class="sample_clear"></div>

CSSは、

.sample_a {
     width: 100%; /* 横幅を指定 */
     height: 200px; /* 縦幅を指定 */
     background-color: blue; /*背景色*/
}
.sample_b {
     width: 50%; /* 横幅を指定 */
     height: 500px; /* 縦幅を指定 */
     background-color:#DCDCDC; /*背景色*/
     float: left;
}
.sample_c {
     width: 50%; /* 横幅を指定 */
     height: 500px; /* 縦幅を指定 */
     background-color:green; /*背景色*/
     float: left;
}
.sample_clear {
     clear: both;
}

以上のソースコードで「A」「B」「C」のレイアウトを完成させることができます。

要素の配置|問題

レイアウトの配置に関する問題

【float:left】を利用してレイアウトの配置を決定した。

下の図の配置にしたい場合に【clear:both】を入れる正しい箇所はどこか?

以下の画像における「sample_a」に指定された属性は何か?

以下の画像はプロパティ、値、セレクタを示す図である。

横のサイズを指定するプロパティは何か?

以下の画像はプロパティ、値、セレクタを示す図である。

高さを指定するプロパティは何か?

《float》プロパティを利用した時に《clear》プロパティを使う必要性があるのは何故か?

Your score is

レイアウトは《div》《float》《clear》の3つで完成!

要素同士を横並びにするには《float》と《clear》プロパティのそれぞれが役に立ちます。

これらのプロパティは要素の配置を決めるのに必要不可欠で使用する機会も多いと思います。

基本的には、div要素で1つのボックスを作り、そのボックスを《float》と《clear》で位置を調整します。また、必ず《float》と《clear》はセットで利用しなければいけないということではありませんが、多くの場合はセットで利用されています。

もしも、要素同士の配置の仕方に悩まれている方は、これらの要素とプロパティを利用してレイアウトを作成してみてはいかがでしょうか。

HTML&CSS
国内シェアNo.1「エックスサーバー
Word Press初心者向けのサーバーでホームページ・ブログが初めての方でも簡単に始めることができます。また、毎日、自動でバックアップをサーバーに保存してくれる他、昔からあるサーバーなので情報量が多く、トラブルになっても検索して自分で解決することができます。

1. WordPress簡単インストール
2. 毎日、自動バックアップ
3. 手動バックアップ可
4. 無料で復旧可能(14日)
5. 複数のドメイン運用可
6. 基本プランでも大容量
7. 手厚いサポート

迷ったらエックスサーバーにすれば大丈夫。
低コストから成長「カラフルボックス
低コストからホームページ・ブログを始められるサーバーです。サイトの成長に合わせてプランを変更することで高性能なサーバーへ徐々に切り替えることもできます。ホームページとサーバーが一緒に成長でき、低コストながら初心者の方向けの機能も豊富です。かんたん操作のコンパネによって初めての方でも簡単に始めることができます。

1. 低コストから始められる
2. かんたん操作のコンパネ
3. 自動バックアップ(14日)
4. マルウェア・改ざんを防止
5. サーバーは超高速
6. 充実したサポート

お試し運用ならカラフルボックス。
ぜろぶろぐ

コメント

タイトルとURLをコピーしました