007

今回はここまで作っていきます!

大きなパーツとしては、
①見出し
②テキスト
③写真

の3つです。

前回の続きからはじめていきましょう!



スポンサードリンク


①見出しを作る

ホームページを作る時に見出しといえば<h1>~</h1> とか<h2>~</h2>ですよね?
ではさっそく、css.cssに<h1>用のコードを書いてみましょう。

h1{
font-size: larger ;
color: darkgreen;
border-style: none ;
}


いきなり、コードを入れてみました。入れる場所はcss.cssの一番下に入れておきましょう。(まぁ、どこでも良いんですが(;・∀・))

では、意味の説明をします。
font-size: larger ; ←文字の大きさです。
color: darkgreen; ←文字の色です。#005500のような表記の他に、色の名前でも指定できるんです。
border-style: none ; ←下線はいらないよ!の宣言です。


 ②テキストエリアと写真エリアをつくる
今回のホームページは画像の大きさやテキストが入るスペースが可変するようにしたいので、それぞれのエリアを作ります。(下のイメージを参照)
011
枠の種類は<td>でも良いんですが、今後なにか良いことがあるきがするので<div>でつくってみました。

書く場所は、css.cssの table.contents_table{ 省略 }の下が分かりやすくて良いと思います。


テキストエリア
#text_aria{
width: 70%;
float: left ;
text-align: left ;
}
まずはテキストエリアのコードです。

width: 70%; ←幅はテーブルの70%
float: left ; ←枠は左側
text-align: left ; ←中のテキストは左寄せ

それほど難しい部分はありませんね。 

写真エリア
#image_aria{
width: 30%;
float: right ;
text-align: center ;
}

#image_aria img{
width: 80%;
続いて写真エリアのコードです。

まずは上の部分の説明から・・・

#image_aria{
width: 30%; ←幅はテーブルの30%
float: right ; ←枠は左寄せ
text-align: center ; ←中のテキストは中央に
}

つづいて下の部分・・・
 
 #image_aria img{
width: 80%; ←画像の大きさは写真エリアの80%の幅

ここでは画像のサイズを指定しています。こがないと、写真のサイズによっては枠からはみ出てしまうんですねぇ。。

③index.htmlにコンテンツを入れていく

では続いて、コンテンツの中身を流し込んでいきます。
まずは、外を枠を設置しましょう!

前回作った・・・

<div id="page_content">
<table class="contents_table"><tr><td>
トップ
</td></tr></table>
         (以下省略)

の ”トップ”を消してから
<div id="text_aria" >
</div>
<div id="image_aria" > 
  </div>
を入力します。これで、テキストエリアと写真エリアの枠が作られました。

続いて、テキストと写真を入れます。
<div id="text_aria" >
<h1>見出し</h1>
テキストを入れます~
</div>
<div id="image_aria" >
<img alt="ねぎって?" src="img/1ページ目の画像.png"/>
</div>
画像については、imgフォルダに"1ページ目の画像.png"という画像を入れています。
1ページ目の画像

この状態で、デザイン画面に切り替えると、テキストと画像が表示されると思うので、そこで改めて、ガッツリコンテンツを作ることができます。(ExpressionWebの便利機能)

完成したら保存してブラウザで見てみましょう!!
007

 
 こういう感じにできていると思います。