https://hmaster.net/


HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。

CSSファイルの編集

前のページでTOPページは2カラムレイアウトでしたが サブページはメインコンテンツ内の文章を1行にたくさん書けるようにするために、1段組の1カラムレイアウトに します。 TOPページ用の外部ファイルはサブページ用の外部ファイルに なるように削除、編集していきます。

■ TOPページ用の外部ファイルを編集する

下の外部ファイルで削除する部分は赤色にしています。
まずサブページではTOPページのようなライトメニューが無くなり1段組の1カラムレイアウトになるので メインコンテンツのボックスの幅の数値(width)の指定 とfloat:left;とmargin-right:5px; を削除します。
次に赤文字のライトメニューのCSS も全て削除します。

次に サブページのヘッダーとメインコンテンツの間に5pxの間隔を、フッターとメインコンテンツの間にも 5pxの間隔を 空けるためメインコンテンツのCSSにmargin:5px 0px;の指定を 追記します。

後は、外部ファイル内に記述してあるコメントを メモ帳の置換機能を使って一変にサブページ用の コメントに置換します。 (TOPの文字をサブの文字に置換)

TOPページの外部ファイル
/∗ TOPページのレイアウト全体を中央寄せ、行間1.4 ∗/
body{
text-align:center;
line-height:1.4;
}

/∗ TOPページのレイアウト全体を囲む枠線無しのdivタグのボックス ∗/
div#body{
width:710px;
margin:auto;
text-align:left;
}

/∗ TOPページのヘッダー ∗/
div#header{
padding:10px;
border:1px solid silver;
}

/∗ TOPページのヘッダー2 ∗/
div#header2{
padding:10px;
margin-bottom:5px;
border-right:1px solid silver;
border-left:1px solid silver;
border-bottom:1px solid silver;
}

/∗ TOPページのメインコンテンツ ∗/
div#middle{
border:1px solid silver;
line-height:1.2;
width:540px;
height:400px;
font-size:95%;
margin-right:5px;
text-align:left;
float:left;
}

/∗ TOPページのライトメニュー ∗/
div#rightmenu{
width:160px;
padding:0px;
height:400px;
font-size:95%;
border:1px solid silver;
float:right;
margin-bottom:5px;
}

/∗ TOPページのライトメニューのリストの余白 ∗/
ul{
margin-left:22px;
padding:0px;
}

/∗ TOPページのフッター ∗/
div#footer{
padding:10px;
border:1px solid silver;
text-align:center;
}

編集後の外部ファイル↓

サブページの外部ファイル
/∗ サブページのレイアウト全体を中央寄せ、行間1.4 ∗/
body{
text-align:center;
line-height:1.4;
}

/∗ サブページのレイアウト全体を囲む枠線無しのdivタグのボックス ∗/
div#body{
width:710px;
margin:auto;
text-align:left;
}

/∗ サブページのヘッダー ∗/
div#header{
padding:10px;
border:1px solid silver;
}

/∗ サブページのヘッダー2 ∗/
div#header2{
padding:10px;
margin-bottom:5px;
border-right:1px solid silver;
border-left:1px solid silver;
border-bottom:1px solid silver;
}

/∗ サブページのメインコンテンツ ∗/
div#middle{
border:1px solid silver;
line-height:1.2;
height:400px;
font-size:95%;
text-align:left;
margin:5px 0px;
}

/∗ サブページのフッター ∗/
div#footer{
padding:10px;
border:1px solid silver;
text-align:center;
}

下記リンクから解説その3(ヘッダーを追加するのページ)に移動して下さい。

HTMLソースの編集
ヘッダーを追加する
サブページのサンプル


HTMLタグ一覧
スタイルシート一覧

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