HOME | フォントフリー | ホームページ無料素材 | 無料壁紙 | ホームページ無料テンプレート | 無料ホームページ作成 | Javascriptサンプル | 検索エンジン上位表示 | 
無料Wordpressテーマ     無料レンタルサーバー
広告掲載のお問い合わせ

ホームページ作成の手順

ホームページ作成前の下準備
1、作成に必要なソフトについて
2、ホームページを作成する目的
3、データを用意しましょう
4、本サイトで使用する素材の紹介
ホームページのタイトルを決める
1、適切なタイトルの決め方
2、ドメインについて
レイアウトを決めよう
1、イメージを形にしてみましょう
2、サイトマップの作成方法
3、一般的なレイアウトパターン
4、モニターの表示サイズに注意しよう
5、ブラウザの表示に注意しよう
6、作成するページのレイアウトの解説
スタイルシート(CSS)の作成方法
1、全体の枠組みの作成
2、メインメニュー、サイドメニューの設定
3、見出しとリンクの設定
XHTMLの作成方法
1、初期設定を行う
2、ヘッダー、メインメニューの作成
3、メイン、サイドメニュー、フッターの作成
4、メニューページの作成
自分のデザインに変えてみよう
1、画像素材の変更方法
2、無料でロゴやヘッダーを作成する方法
Javascriptを設置してみよう
1、画像を半透明にする方法
2、イメージ写真をフェードで切り替える方法
最後にチェックすべきこと
1、動作確認をしましょう
2、表示の確認を行いましょう
ホームページを公開しよう
1、ホームページを公開する方法
2、検索エンジン対策を行いましょう
ホームページをパワーアップしよう
1、ダウンロードサイトの作成方法
2、便利なタグの紹介
HOME > スタイルシート(CSS)の作成方法 > 全体の枠組みの作成

スタイルシート(CSS)の作成方法

全体の枠組みの作成

このエントリーをはてなブックマークに追加

それではこの項から具体的にスタイルシート(CSS)を作成してきます。

ホームページの枠組みから順番に作成していきます。

                      XHTMLの作成方法はこちらです。


スタイルシート作成方法

これからまず左の枠組みをスタイルシートで
作成していきます。

①~⑦までの指定をまず行い。

こまかなロールオーバーやH1,H2,H3の指定
を行っていく手順で解説していきます。
    ①ホームページ全体              bodyで指定
    ②実際のホームページのコンテンツ部分  contentsで指定
    ③ヘッダー(タイトルやH1タグも含む)     headerで指定
    ④メインメニュー                 navbarで指定
    ⑤メインのコンテンツ部分           mainで指定
    ⑥サイドメニューの部分            sideで指定
    ⑦フッター部分                addressで指定

スタイルシートで全体の枠組みを作成する。

メモ帳を開き下記を書き写して下さい。
コピーして貼り付けてもよいのですが、練習のために書き写す方がよいでしょう。
そして保存するとき、拡張子をTXTからCSSに変更して下さい。
保存後に名前の変更で、変更してもかまいません。

/*ページ全体の設定*/
body{
background-image:url(img/st4.png); /*壁紙設定自分が使う壁紙に変更する*/
background-repeat:repeat;/*繰り返さない場合はno-repeatに変更*/
font:"メイリオ", "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";/*フォントの指定*/
color: #333333;/*全体で使う文字の色*/
margin:0px;
padding:0px;/*隙間を空けないように指定します*/
}

/*コンテンツ 実際に使うページの設定*/
#contents{
width:852px;/*横幅を852pxで指定*/
margin:0 auto;
background-image:url(img/main.gif);/*コンテンツ内の背景(サイズをぴったりにすること)*/
background-repeat:repeat-y; /*縦に繰り返し*/
position:relative;/*相対的な位置へ配置*/
font-size:80%;/*文字は見やすいように少し小さめに設定*/
}


/*ヘッダー部分の設定*/
#header{
background-image:url(img/st4.png); /*ヘーダー自分の作成したヘッダーに変更*/
background-position:top right;/*ヘッダーの位置を右上に設定*/
background-repeat:repeat;/*背景画像が小さいので繰り返しの指定*/
height:145px; /*ヘーダーの高さメニュー部分まで合わせたサイズを指定*/
}


/*上部メニューボタンの設定*/
#navbar{
width: 100%;
height:45px;/*メニューボタンの高さの指定*/
position:absolute;
top:100px;/*上からの位置指定*/
}


/*サイドメニューの設定*/
#side{
width:205px;/*サイドの幅(変更するときはコンテンツ背景も変更すること)*/
position:absolute;
top:440px;/*上からの位置指定メニューページは変更すること*/
left:640px;/*左からの位置指定*/
}


/*メイン部分の設定*/
#main{
width:630px;/*メイン部分の横幅の指定*/
margin-top:15px;/*イメージ画像から間隔をあける指定*/
margin-left:15px;/*左から少し間隔をあける指定*/
}


/*下部のフッター部分の設定*/
address{
background-color:#666666;/*フッターの背景色の設定*/
color:#ffffff;/*文字の色がグレーだと見えないので白に変更*/
width:852px;/*フッターの幅をコンテンツピッタリに指定*/
padding-bottom:10px;/*フッターの下に隙間を空ける設定*/
border:none;
}

これで全体の枠組みだけはできましたが、このままではまったく味気ないページになってしまう
のでメニューボタンやサイドメニュー、リンク文字のロールオーバー(マウスが上に来た時に
色や画像が変わる)の設定と検索エンジンに重要なH1・H2・H3の指定などを加えて全体を
整えていきます。

Next Page
 スタイルシート(CSS)の作成方法
2、メインメニュー、サイドメニューの設定 >>
             月額125円のレンタルサーバ

 【PR】
月額1,050円で本格的なお店のホームページ!
簡単!無料!自分のサイトでダウンロード販売!
無料検索エンジン上位表示補助ツール!LINKopty
ページランク3~5SEOに大変役立つオールドドメイン
無料SEOツール ZERO TOOLSでアクセスアップ!
月額無料のネットショップ機能付きレンタルサーバー
営業・委託販売・SOHO専門!お仕事探し完全無料!

Web作成に便利なサイト

SEO無料ツールの紹介
CGI無料配布サイトの紹介
無料でショッピングサイトを開設
素材が無料で作成できるソフト
無料で使える写真を配布しているサイト
テンプレート無料配布
Flash素材を無料配布しているサイト

PRサイト

SEO対策 アクセスアップ100の技
実践で覚えるスタイルシート作成方法
格安レンタルサーバー比較ランキング
Wordpressテーマ無料ダウンロード
ホームページ作成無料ツールのまとめ
ホームページ作成費用無料!
美少女発見!毎日写真更新dear Girls
美少女写真のdear Girls
Copy Right(C)2011 プロ並みのホームページを作る方法 All rights reserved.