おやじ

おやじ

2016年02月08日

ヘッダー(div id=”header”)部分の作成

ヘッダー(div id=”header”)部分に背景、h1タグを使ってホームページタイトル、pタグを使って簡単な説明を追加します。

index.htmlの記述

3行目の<title>~</title>間にホームページのタイトル「おやじのブログ」を入力します。ここに記載されたタイトル名は下図のようになります。

header_01

10行目で大見出し(ホームページタイトル)、11行目で簡単な説明を記述しています。

header_02_01

 

style.cssの記述

7行目の background-image でimagesフォルダ内にある header_01.jpg 画像をheaderボックスの背景に設定しています。

header_01.jpg画像のサイズは横:1040px、縦:200px、headerボックスと同じサイズです。

h1タグ(大見出し)は1ページに1回しか使いませんので、h1に直接スタイルを設定していますが、pタグはいろいろな場所で使いますからid属性(pstyle-header)でスタイルを設定しています。

11行目の padding-top:20px; ですが、最初は margin-top:20px; と記述したのですがうまく行きませんでした。いろいろな条件が有るのでしょうが、marginは時々思い通りの動作を行わない場合があります。

margin がうまく機能しない場合は psdding を使ってみてください。

 

作成部分の動作確認

① XAMPPを立ち上げて Apache、MySQL、FileZille を起動します。

header_03_01

 

次に FileZilla を立ち上げます。

ローカルサーバー(XAMPP)のインストールと設定FTPツール(FileZilla Client)のインストールと設定で作成した「test-site」にcssフォルダ、imagesフォルダ、index.html、style.cssをアップロードします。

① サイトマネージャーの「test-site」をクリック

② index.html などを保存したフォルダを選択

③ cssフォルダ、imagesフォルダ、index.html、style.cssをリモートサイトへコピーする。

header_04_02

 

インターネットエクスプローラなどのブラウザで「http://127.0.0.1/test-site/ 」にアクセスして、下記のような画像になればOKです。

header_05_01

 

 

コメントを残す