×

[PR]この広告は3ヶ月以上更新がないため表示されています。
ホームページを更新後24時間以内に表示されなくなります。

ホームページの作り方 >> ホームページ作成編 >> トップページの完成

ホームページ作成編 12.トップページの完成!

メインコンテンツを載せるスペース(main_spc)が完成しました。
次は、目次やサブコンテンツを載せる「sub_spc」です。
お茶でも飲みながらゆっくり作業を進めていきましょう!

トップページを完成させよう!

メインディッシュは完成しました(ばんざ〜い!)後は、付け合せです。
でも、付け合せのよしあしで、メインディッシュの価値も決まってきます。
ホームページ作りもおんなじですね!あと少しがんばりましょう!

1.sub_spcの詳細について

サンプル012-01 というとことまで来ました。
最初のころの サンプル004-01 から比べていつの間にか進歩してきたんですね!
しかもその進歩が目に見えるからいいですね!ホームページ作りは!

・・・さて、画面左側の「sub_spc」を作って、「index.html」を完成させましょう!
その他のページは、基本的な構造は同じなので、「index.html」を完成させるとだいぶ楽になると思いますよ!
例によって、CSSファイルに

.midashi {
 width: 90%;
 background-color: #dd9900;
 padding: 5px;
 border: 2px solid #dd9900;
 text-align: center;
 color: #ffffff;
}

.column {
 width: 90%;
 margin-bottom: 20px;
 background-color: #ffffff;
 padding: 5px;
 border: 2px solid #dd9900;
 text-align: left;
 line-height: 120%;
 color: #333333;
}

a:link {
 text-decoration: underline;
 color: #0000ff;
}

a:visited {
 text-decoration: underline;
 color: #0000ff;
}

a:hover {
 text-decoration: underline;
 position: relative; top: 1px; left: 1px;
 color: #ff0000;
}

上の三つについては、もう大丈夫ですよね!
「a」が付いている三つについては、それぞれリンク(他のページを表示させる。)部分についての指定です。
○○の部分の標記の仕方が、他とは違っていますが「a:link」⇒「訪問前のリンク」、「a:visited」⇒「訪問後のリンク」、「a:hover」⇒「カーソルを乗せている時」と覚えておきましょう!
「text-decoration」の××で「none」を指定するとアンダーラインが消えます。
「position: relative; top: 1px; left: 1px;」の部分は、表示をずらす設定(この場合は、上から1px、左から1px)をしています。
○○が「a:hover」なので、「カーソルを乗せたときは、上から1px、左から1px表示をずらすんだよ」という意味になります。
下のHTMLソースを打ち込んだあと、あなたのホームページのリンクの部分(画面左側の「2.テーマ」「3.リンク」と青字で書いてある部分)にカーソルを持って行ってみましょう。
字が赤くなって少し動きますよね!
この部分もこのまま覚えておきましょう。

次に、HTMLファイルに

<body>
<div align="center">
<div id="field_spc">
<div id="top_waku">
<h1>Wellcome to my Homepage!!</h1>
<p>初めてホームページなるものを作ってみた。<br>
意外と簡単で面白そうである。</p>
</div>
<div id="main_spc">
<div class="ao_waku"><h2>話題その1</h2></div>
<p>
話題その1について、色々なことを書いて見ましょう。<br>
どのようなホームページになるのかは、結局その内容によるんですね!
</p>
<p>
どんなに配置や見た目のよさを追求しても内容がよくなければ読んでもらえません。<br>
あなた独自のすばらしいホームページを作ってください。
</p>
<p>
目立たせたい部分は、<span class="hutomoji">字を太くしたり</span>、<span class="red">色を変えたり</span>しましょう。<br>
<span class="big">字を太く大きくすることも</span>効果的ですね!
</p>
<p>
大事な言葉や文章は、&lt;strong&gt;タグで囲みましょう。<br>
視覚的効果以外に<strong>検索エンジン対策</strong>にも有効です。
</p>
<p>&nbsp;</p>
<div class="ao_waku"><h2>話題その2</h2></div>
<img src="./img/photo01.jpg" style="float:left;margin-right:10px;border:3px ridge teal;" alt="美味しそう!">
<p>
楽しい写真を貼るとホームページもにぎやかになりますね!
</p>
<p>
枠線で飾ってみてもいいかもね!
</p>
</div>
<div id="sub_spc">
<div class="midashi">
<span class="big">目 次</span>
</div>
<div class="column">
<span class="hutomoji">1.トップページ</span><br>
<a href="./page2.html">2.テーマ</a><br>
<a href="./link.html">3.リンク</a>
</div>
<div class="midashi">
<span class="big">サブコンテンツ</span>
</div>
<div class="column">
<p>
「話題その1」「話題その2」から波及した話や、ちょっと一息つける話や勿論小さな画像を入れてもいいし・・・
</p>
<p>
スタイルシートでクラスを増やせば、いろんなことができます。
</p>
<p>
ホームページのレイアウトも無限に考えられますね!<br>
あなただけのすばらしいホームページが出来ますように!!
</p>
</div>
</div>
<br class="fe"><br>
<hr>
</div>
</div>
</body>

ここでも、「midashi」というボックスを作りサブコンテンツの見出し(製作中のホームページの例では、「目次」「サブコンテンツ」)を表示させています。
ただし、「目次」「サブコンテンツ」という言葉自体は、重要な言葉ではないので、<h2>は使わずに<span class="big">としています。
字の大きさや太さは、<h2>を使った場合と変わりませんが、論理的な重要度は、<span class="big">にはありません。

更に「column」というボックスを作り「midashi」の下に置いています。ここは、「background-color」を白に設定しています。「midashi」のmarginを設定していない(marginはゼロ)ので、「midashi」と「column」がくっついて見えますが、実はボックスを二つ縦に並べているのです。

同じ構造で、「サブコンテンツ」部分も成り立っています。「column」にはmargin:20px;を設定しているので「目次」の部分と「サブコンテンツ」の部分はその分離れて表示されていますね。

<a href="./page2.html">2.テーマ</a>の部分は、囲まれた部分(この例では「2.テーマ」)をクリックすると指定してあるページ(「./page2.html」)を表示させるタグです。ページの指定は、相対パス で表示してありますが、他のホームページへリンクする場合は、絶対パスを使うことになります。
(ちなみに「page2.html」「link.html」はこれから作っていくページです。)

これで、「index.html」は完成ですね!やりましたっ!
意外と簡単だったんじゃないですか!

HTMLファイルとCSSファイルの関係をしっかり理解していれば大丈夫です。
さて、勢いに乗って、2ページ目、3ページ目も作っちゃいましょう!

マグカップM ■トリさん■  ホワイト/ライトグレー

サイズ:約
 口径78o×高さ90o
重 量:約260g
全容量:約300t
材 質:陶器


<送料>
ゆうパック 一律500円
沖縄県1000円

ホームページを表示させるソフトは、IE(Internet Explorer)や Fire Fox、Netscape、Safari、Opera、Sleipnir等いろいろあるのですが、これらはブラウザと呼ばれています。これらのソフトはブラウザの種類によって、同じHTMLソースでもホームページの表示のされ方が変わってくることがあります。私はIE7というブラウザを使っていますが、Fire Foxで見ると自分の意図したようにホームページが表示されていない場合があるのです。世の中全ての人が自分と同じ環境でホームページを見ていればいいのですが、どうもそう都合が良くはないようで・・・ホームページを作る時はなるべくいろんなブラウザで自分が作ったホームページがちゃんと表示されるか確かめた方がいいみたいですね。


 
別窓で開く便利な検索窓です。どうぞご利用下さい!
カスタム検索