positionレイアウトホームページ作成講座

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

スポンサードリンク

はじめに

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

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

作成の流れ

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

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

DTDは<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">となります。
各ブロック毎にCSSソースをコピーしてもらいます。
#wrapper部分、#header部分と各ブロック毎にCSSソースをコピーしてもらい、各ブロック毎に意味の解説をします。

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

HTMLファイルのコピー

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="ROBOTS" content="ALL"> <meta name="description" content="ホームページの説明文"> <meta name="keywords" content="キーワード,キーワード,キーワード"> <title>ホームページ作成</title> <link rel="stylesheet" href="css/hp.css" type="text/css"> </head> <body> <div id="wrapper">  <div id="header"> *** ヘッダー部分 *** </div>   <div id="container">  <div id="contents"> *** コンテンツ部分 *** </div>   <div id="sidebar"> *** サイドバー部分 *** </div>  </div>   <div id="footer"> *** フッター部分 *** </div>  </div> </body> </html>

CSSのコピー

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

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;

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

#wrapper部分

スポンサードリンク