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)作成方法

見出しとリンクの設定

このエントリーをはてなブックマークに追加
見出しとはそのページのサブタイトル的なものやその項のタイトルなどで使うまさしく
見出しのことになります。
ホームページ作成ではこれをH1タグ~H3タグで使用しています。
XHTMLの作成方法はこちらです。
このページで言えば、上記の「見出しとリンクの設定」のメニューバーの部分が見出しにあたります。
見出しには H1~H6タグまでありますが、一般的に使うのはH1~H3までとなります。
非常に検索エンジン対策で重要な部分になりますので、必ずページ内に見出しタグをいくつかは
使うようにしましょう。
デザインにいかに溶け込む形で見出しタグを使うかがポイントになります。
                                    検索エンジン対策で重要なタグについてはこちらをご覧ください>>

見出しタグとリンクの文字の設定

見出し文字の設定とリンク文字の設定

/*ヘッダー部分の文字の設定*/
/*最上部の小さな文字の部分の設定*/
/*検索エンジンで重要な見出しタグです*/
h1{
font-size:70%;/*全体の文字より小さく設定*/
letter-spacing: 2px;/*文字と文字の間隔*/
padding-left:10px;/*左に少し間隔をあける指定*/
margin: 0px;
}

/*見出しタグにリンクを付けた場合の設定*/
h1 a{
color:#FFFFFF;/*リンク文字の色の指定*/
font-weight:normal;
}

/*ヘッダー部分のタイトルやサイトの説明の文字の設定*/
/*ヘッダーに素材としてタイトルが入っている場合はサイトの説明を記入しフォントは小さめに*/
#header p {
font-size: 25px;/*今回はタイトルにしているので大きめに設定*/
color:#ffffff;
padding-top: 5px;
padding-left: 10px;
}

/*画像の横に文字が来るように設定するので画像と同じテーブル内にある文字は*/
/*この指定が必要になる*/
p{
font-size:90%;/*全体の文字サイズ*/
line-height:150%;/*全体で使う、文字と文字の行間*/
}

/*メニューなどの見出しタイトルの設定*/
/*今回はメニューのページでのみ使用している*/
h2{
font-size:120%;
border: solid 2px #cccccc;/*見出しをグレーの枠で囲む設定*/
color:#ffffff;/*見出しの文字の色*/
background-image:url(img/h2.gif);/*見出しの背景の指定自分の好みで変更する*/
line-height: 35px;/*見出しの背景の高さ*/
padding-left:10px;
margin-top: 10px;
margin-bottom: 1px;
}


/*リンク文字の設定*/
a{
text-decoration:none;/*リンクの文字の下線を消す設定*/
}

a:hover {
color: #FF0000;/*リンクの文字の上にマウスが来た時この色に変わる*/
text-decoration: none;/*リンクの文字の下線を消す設定*/
}

画像の設定

p img{
float:left;/*画像の右側へ回り込む設定*/
margin-left:5px; /*画像の左にスペースを空ける*/
margin-right:15px; /:画像の右側へ間隔をあける設定*/
}

フッターの設定

address{
font-size:80%;
font-style:normal;
text-align:center;/*フッターの文字をセンター合わせに指定*/
padding-top:5px;
}

address a{
color:#ff9999;/*フッター部分のリンク文字の色の指定*/
}

完成したスタイルシートのサンプルを見る

Next Page
 XHTMLの作成方法
1、初期設定を行う >>
             ロリポップ!レンタルサーバー

 【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.