ホムつく式 Webデザイン講座

人気ホームページが作れる簡単作成講座
ホームページレイアウトは、CSSでシンプル構築

ホームページレイアウトは、CSSでシンプル構築

ホームページレイアウトは2種類あります

ホームページのデザインの基盤となるレイアウトの構築法には、
大きく分けてテーブルレイアウトCSSレイアウトの2つがあります。

複雑なテーブルレイアウト

テーブルレイアウトというのは<table>を使ってレイアウトを構築するのですが、そもそも<table>は、レイアウトを構築するためのタグではない上、複雑になりやすく、編集も管理も難しいので、私は好きじゃないです。ホームページ制作会社の中にはテーブルレイアウトで作るところがあるようですが、あれは複雑に作って、更新料を取るためのホームページ制作会社の策略じゃないかと思ってます(笑)

シンプルなCSSレイアウト

ほむつく講座がおすすめしているのは、<div>とCSS(スタイルシート)でシンプルに作るCSSレイアウトです。はじめは少しとっつきにくいですが、慣れると断然こっちの方が扱いやすく、管理も簡単です。

CSSレイアウトの構築方法

CSSレイアウトはXHTML/HTMLで空箱のような意味を持つ<div>タグをCSSで大きさや配置を指定して、レイアウトを構築します。

それでは最も基本的なホームページのレイアウトである、ヘッダー(header)、左コンテンツ(content)、右メニュー(side)、フッター(footer)のレイアウトの解説をしたいと思います。(→詳しい解説は初心者講座をご覧ください

基本のレイアウト図

XHTML/HTMLの記述

全体を囲む<div>タグの中に、4つの<div>タグを記述して、各<div>タグにid要素を指定してください。(id要素というのは、タグへ名前を付けることができます)

XHTML
<div id="site-box">

<div id="header"></div>

<div id="content"></div>

<div id="menu"></div>

<div id="footer"></div>

</div>

CSS(スタイルシート)の記述

次に、CSSファイルには、各id要素に対しての記述範囲を記述し、それぞれの<div>タグへ大きさや配置を指定していきます。

基本的には、

  1. 「width」で<div>の横幅を指定
  2. 「float」を使って上下の<div>を左右に配置
  3. 「clear: both」で「float」を解除

これだけです。

CSS(スタイルシート)
#site-box {
          width : 750px;
}

#header {    }

#content {
          float: left;
          width: 500px;
}

#menu {
          float: right;
          width: 250px;
}

#footer {
          clear: both;
          width: 750px;
}

レイアウトの崩れを防ぐCSSレイアウト構築のポイント

CSSレイアウトはちょっとしたミスやホームページを見る人の環境(ブラウザ)によって「レイアウトが崩れる」といった問題が起きやすいです。そのため、CSSレイアウトは難しいと思う方がいるようですが、決してそんなことはありません。

レイアウトが崩れた場合、次の4つのポイントをチェックしてみてください。

  1. 横に並ぶ<div>タグの横幅の合計が全体の横幅以下の長さに設定する。
  2. 「float」の回り込み指定を、次の<div>へ「clear: both」を記述し解除する。
  3. 「clear: both」を指定した<div>には、横幅を指定する
  4. 「width」で横幅を指定した<div>には、「padding」は指定しない。
このページをブックマークする→ Yahoo!ブックマークに登録 Yahoo!ブックマークに登録

Webデザイン

Webデザイン力を磨いて、自分らしいホームページを作ろう
分かりやすいがアップさせるWebデザイン
  • 見るメディアではなく、使うメディア
  • ホームページ全体のデザインに統一性を持たせる
  • レイアウトにルールを持たせる
  • ナビゲーションに統一性を持たせる
  • 現在地を示す
  • リンクをはっきりと示す
色を味方に付けるWebデザイン
  • 色の基本を学ぶ
  • 色の持つイメージからテーマカラーを決める
  • 配色のポイント(減らす、無彩色)
  • 読みやすさを損なわない配色
XHTMLとCSS(スタイルシート)の理解を深める
  • XHTMLとCSSを理解することがデザイン性を高める
  • ホームページ作成ソフトがダメにした

▼すぐに役立つXHTML/HTML

▼すぐに役立つCSS(スタイルシート)

このページのトップへ戻る
ホムつく講座の講師は
こんなヤツ!

ホムつく講座の講師はこんなヤツ!ホームページを作っていたら、この楽しさを、あなたに伝えてくなりました。ホムつく式のホームページの作り方を体験してみてください。

→メッセージ

ホームページ作成に
必要なものは?

ホムつく講座がおすすめするソフトやレンタルサーバーを紹介しています。初心者の方や、悩んでいる方は是非参考にしてみてください。

→スタートガイド

ホームページを初めて作るのですが・・

ホームページはXHTMLとCSSで作ります。ほむつく講座では初心者の方にわかりやすいと評判の初心者講座があります。

→初心者講座

もっとデザインを
良くしたい

ホムつく講座では見た目だけが良いデザインではなく、ユーザー(利用者)の方が安心して、ホームページを閲覧できるデザインを学べます。

→Webデザイン

ホームページにアクセスが集まりません

ホームページは作れば沢山のアクセスが集まるわけではありません。そして、アクセスが多いだけのホームページでも意味がありません。あなたのファンができる人気ホームページを作り方を学びましょう。

→人気ホームページ