Home » 初級ホームページ作成講座 » floatレイアウトホームページ作成講座｜基本設定

基本設定｜floatレイアウトホームページ作成講座

はじめに

CSSデザインサンプルでは、もっと簡単にCSSホームページが作成できるように、またCSS指定に早く慣れてもらえるように考慮した結果、CSSホームページ作成講座を2008.12よりCSS指定の方をメインとしたコピー&ペースト方式に変更いたしました。

解説の中心はCSS側がベースとなります。また、CSSファイルは外部からリンクする形式です。

Page Top

作成の流れ

以下がおおまかなホームページ作成手順です。

  1. HTMLの基本ベースをはじめにコピーしてもらいます。

    CSSホームページを作成する際の一番基本的で、一番シンプルなHTMLソースをすべてコピーしてもらいます。

    DTDは<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">となります。

  2. 各ブロック毎にCSSソースをコピーしてもらいます。

    #wrapper部分、#header部分と各ブロック毎にCSSソースをコピーしてもらい、各ブロック毎に意味の解説をします。

    この段階でサンプルを参考にご自身でお好きなようにCSS指定を変更してみて下さい。[何処を] [どのように] 変えると [どうなるか] がよく分かり、CSSの段組みが早く習得できます。

Page Top

HTMLファイルのコピー

下記コードをコピーして下さい。

Page Top

CSSのコピー

下記ソースをコピーして下さい。フォントサイズなどの基本指定部分です。

Page Top

CSSの解説

/*-------------------------フォントサイズ等の指定*/ 
body{
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 90%;
  text-align: center;
  margin: 0;
  padding: 0;
}
font-family: "ヒラギノ角ゴ Pro W3",

フォントスタイルの指定です。閲覧しているユーザーのPC環境により左から順に読み込まれます。

font-size: 90%;

ページ全体のフォントサイズをここで指定します。

指定にはなるべく相対値( % em small )を指定しましょう。絶対値を指定するとIEではブラウザ側でフォントの変更が出来ません。状況に応じて使い分けるのが一番です。

text-align: center;

コンテンツを中央に配置する為の指定で、古いブラウザ対応です。

Page Top

page top ボタン