HTMLとCSSレイアウトの基本

htmlとcssでレイアウト

投稿日 更新日

by Chiharu Morita

HTMLとCSSを使いこなすには実際にホームページを作ってみるのが一番です。このページにWEBサイトのレイアウトの方法の概略を掲載していますので、参考にしてください。

idとclassの使い方

実際にレイアウトを学ぶ前に「idとclass」について、理解しておきましょう。
共通属性といい、どんな要素にも指定できる属性のことをいいます。「p」「h1」などにも指定することができます。これを使いCSSをHTMLに反映します。

ほとんど同じ使い方をします。



文字を赤にします。


文字を赤にします。



#aka{color:red;}
.aka{color:red;}

文字を赤にします。

文字を赤にします。

idとclassの違い

一つだけ違う点があります。上記の”aka”は任意の名前を指定することができます。

  1. 「id」はHTML内に1回だけ使うことができます。
  2. 「class」はHTML内に複数使うことができます。
間違い（”aka”は一回しか使えません。）
<p id=”aka”>文字を赤にします。</p>
<p id=”aka”>文字を赤にします。</p>
正解（”aka”「class」を使用すれば、何度も使うことができます。）
<p class=”aka”>文字を赤にします。</p>
<p class=”aka”>文字を赤にします。</p>

HTMLレイアウトの基本

上記では「idとclass」の説明をしましたが、実際にホームページを作る際に、どこにCSSで装飾を施すのか、HTMLをどのように書いていけばいいのか、よくわからないかもしれませんね。

そこで、下記に大まかな例を掲載しましたので、基本的な要素を使う場所の参考にしてください。
※HTML4やXHTMLの場合です。HTML5は少し異なります。

h1 ロゴやページの見出しに設定する
p サイトの説明（キャッチコピー）
ul グローバルナビゲーションに設定する
h2 コンテンツの見出しに設定する
h3 コンテンツ内の見出し（h2の次）に設定する
p コンテンツ内の文書の段落に設定する
h4 ローカルナビゲーション(サイトの左や右にあるリストのこと)の見出しに設定する
ul サイドバーのローカルナビゲーションに設定する
h5 フッターなど

site-layout

divタグでボックスを作る

HTML内にdivタグで、範囲を指定し、グループ化したものをボックスといいます。このボックスを任意の場所に配置することでレイアウトを作ることができます。
「id」を大枠のボックスに使うのが基本です。下のコードを参考にしてください。

HTMLの記述例（文章の構造、divタグの使い方）
下のコードが基本になりますので、まずは自分で書いてみましょう。そして、これに肉付けして行く形でご自分のホームページを作ってみてください。
body内のみの記述例、他は省略しています。
インデントをつけることで、divの終了タグがわかりやすくなります。
div id＝”ここは任意の名前”を書きます。









私の愛犬


犬が好きです。






きれいな海


海が好きです。

解説
１．warrp（任意の名前）
全体を囲む指定を必ずすること。
２．head（任意の名前）
ホームページのタイトル部分を指します。一般的にはホームページの名前やグローバルナビゲーションなどを入れます。
３．leftcontents（任意の名前）
左のコンテンツ部分を指します。
４．rightcontents（任意の名前）
右のコンテンツ部分を指します。
divで範囲を指定した個所をCSSで配置していくことで段組みが実現します。

CSSレイアウトの基本

文書構造とデザインの分離

かつてHTMLはCSSの機能の一部を属性として持っていました。しかし2000年代に入るとWeb環境の多様化により、文章構造はHTML、装飾はCSSという流れが主流となりました。 HTMLでの装飾はW3Cによって非推奨または廃止とされていますので、デザインはCSSと考えたほうがよいでしょう。

レイアウトは3次元

ホームページのレイアウトは3次元だということをご存知でしょうか。一見すると、縦と横の2次元に見えるかもしれませんが、実際は３次元です。
たとえば、バックグラウンドに画像や色を指定し、前面にテキストを表示させることができます。縦と横に加えて、奥行きもあると覚えておいてください。

では、先ほどのHTMLにCSSを反映させてみよう！

body内のみの記述例、他は省略しています。
インデントをつけることで、divの終了タグがわかりやすくなります。
div id＝”ここは任意の名前”を書きます。









私の愛犬


犬が好きです。






きれいな海


海が好きです。

解説
１．warrp（任意の名前）
全体を囲む指定を必ずすること。
２．head（任意の名前）
ホームページのタイトル部分を指します。一般的にはホームページの名前やグローバルナビゲーションなどを入れます。
３．leftcontents（任意の名前）
左のコンテンツ部分を指します。
４．rightcontents（任意の名前）
右のコンテンツ部分を指します。

CSSの記述

#warrp{  
    width: 800px;		/*全体の幅を指定する*/  
}  
#head{  
    height: 60px;   		/*高さを指定する*/  
    background-color: #FFFFD5;  /*わかりやすいように色を指定します*/
}  
#leftcontents{  
    float: left;		/*leftcontentsを左に回り込み*/
    width: 400px;		/*幅を指定する*/
    background-color: #D5FFDF;   
}  
#rightcontents{  
    float: right;  		/*rightcontentsを右に回り込み*/
    width: 400px;		/*幅を指定する*/
    background-color: #FFEAEA;  
}

解説
１．#warrp（任意の名前）
全体を囲む指定を800px（ピクセル）に指定した。800px～1000px位が一般的です。
２．#head（任意の名前）
幅の指定は要りません。#warrp の指定になります。高さを指定する必要があります。
３．#leftcontents（任意の名前）
float:leftを指定することで左揃えになり、以降に続くボックスを右側に配置します。
幅は#warrpを800pxとしたのでその半分の400pxに指定。
４．#rightcontents（任意の名前）
float:rightを指定することで右揃えになり、以降に続くボックスを左側に配置します。

ブラウザでの表示例

少々汚くて申し訳ありません。上記コードを実際にブラウザで表示するとこのようになります。
レイアウトの例

floatを使ったレイアウト方法

floatの優れているところ

フロートレイアウトの良いところはコンテンツを更新しても、下に伸びていくのでデザインが崩れないことが特徴です。 記事を更新していくホームページやブログに適しています。
最も一般的なレイアウト方法です。必ずマスターしましょう。

3カラムを作ってみよう

3カラムとは3段組みレイアウトのことです。（中央がメインコンテンツで、左右にナビゲーションやサブコンテンツ、広告などを配置します。）
フッターも付けてみます。









左


左側のコンテンツ






中央


メインコンテンツ

CSSの記述
フロートを使うときには
1. width の指定も必ずしましょう。
2. サイズを計算して指定しましょう。warrpのサイズをオーバーするとデザインが崩れます。
3. clear の指定、回り込みの解除をお忘れなく。
/**/はコメントです。

#warrp{  
    width: 800px;		/*全体の幅を指定する*/  
}  
#head{  
    height: 60px;   		/*高さを指定する*/  
    background-color: #FFFFD5;  /*わかりやすいように色を指定します*/
}  
#left{  
    float: left;		/*leftを左に回り込み*/
    width: 200px;		/*幅を指定する*/
    background-color: #D5FFDF;   
}  
#main{  
    float: left;  		/*mainを左に回り込み*/
    width: 400px;		/*幅を指定する*/
    background-color: #FFEAEA; 
}
#right{  
    float: right;		/*rightを右に回り込み*/
    width: 200px;		/*幅を指定する*/
    background-color: #D5FFDF;   
}
#foot{
    clear: both;		/*floatの回り込みを解除する*/
    height: 70px;		/*高さを指定する*/
    background-color:#E9E9E9;
    text-align:center;
}

ブラウザの表示例
３カラム表示例

※注意することは全体を囲うボックス（上の例では#warrp）の幅より、各コンテンツのボックス幅が大きくなってしまうと、デザインが崩れることです。さらに、marginやpaddingを指定した場合、コンテンツの幅に加算されますので、計算して幅を決めることが崩れないデザインを作る上で大切なことです。

positionレイアウト

positionの優れているところ

フロートでは右や左に回り込ませるためHTMLの記述順に配置がされますが、ポジションの良いところは どこにでも配置できることです。その特性上、崩れにくいレイアウトができることです。初心者の方はabsoluteでボックスを配置する方が作りやすいかもしれません。しかし、更新するたびに下にのびていくサイトの場合はfloatを使いましょう。

relative
相対的配置をおこなう際に使用する
absolute
絶対的配置をおこなう際に使用する











中央


メインコンテンツ

CSSの記述
/**/はコメントです。/**/で囲った部分は無視されます。

#warrp{  
    width: 100%;		/*全体の幅を指定する*/  
}
#head{  
    height: 80px;   		/*高さを指定する*/  
    background-color: #FFFFD5;  /*わかりやすいように色を指定します*/
}
#contents{
    position: relative;
    width: 100%;		/*幅を指定する、100%は画面横幅いっぱい*/
}
#main{
    width: 100%;		/*幅を指定する、100%は画面横幅いっぱい*/
    background-color: #FFEAEA; 
}
#right{  
    position: absolute;		/*絶対値で指定する*/
    right: 0px;			/*右からの配置位置を決める*/
    top: 0px;			/*上からの配置位置を決める、親ボックスの#contentsを基準となる*/
    width: 200px;		/*幅を指定する*/
    background-color: #D5FFDF;   
}
#foot{
    height: 70px;		/*高さを指定する*/
    background-color:#E9E9E9;
    text-align:center;
}

右のコンテンツはabsoluteを使用しているのでホームページの横サイズを変えてもこの位置に配置されます。
見る人の環境（画面のサイズ）によって、表示が変わります。
positionレイアウト

position:absoluteレイアウト

上の例ではサイドバーにposition:absoluteを使っていますので、固定されます。mainエリアの内容が少ない場合、サイドバーがフッターにかぶさってしまいます。メインエリアがサイドより常に長くなる場合、absoluteが役に立ちます。

float と position はどんなホームページを作りたいか。または、コンテンツの内容に適しているかで使い分けましょう。

以上、基本的なレイアウトの方法でした。もっと応用を利かせた方法もあります。たとえば、３カラムを作る場合、「left」サイドバーが「main」より先に記述していますが、SEOを考えた場合メインコンテンツ（ここでは「main」）をサイドバーより先にくるようにしたいものです。

その場合はサイドバーのどちらかにposition:absoluteを使い、mainにmargin-leftかmargin-rightを使う事で実現出来ます。

今回は基本編のため、詳しい解説は別の機会にしたいと思います。

カテゴリー ホームページ作成の基本知識

タグ ,