今回はここまで作っていきます!
大きなパーツとしては、
①見出し
②テキスト
③写真
の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 ; ←下線はいらないよ!の宣言です。
②テキストエリアと写真エリアをつくる
今回のホームページは画像の大きさやテキストが入るスペースが可変するようにしたいので、それぞれのエリアを作ります。(下のイメージを参照)
枠の種類は<td>でも良いんですが、今後なにか良いことがあるきがするので<div>でつくってみました。
書く場所は、css.cssの table.contents_table{ 省略 }の下が分かりやすくて良いと思います。
②テキストエリアと写真エリアをつくる
今回のホームページは画像の大きさやテキストが入るスペースが可変するようにしたいので、それぞれのエリアを作ります。(下のイメージを参照)
枠の種類は<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 img{
まずは上の部分の説明から・・・
#image_aria{
width: 30%; ←幅はテーブルの30%
float: right ; ←枠は左寄せ
text-align: center ; ←中のテキストは中央に
}
つづいて下の部分・・・
#image_aria img{
width: 80%; ←画像の大きさは写真エリアの80%の幅
}
ここでは画像のサイズを指定しています。こがないと、写真のサイズによっては枠からはみ出てしまうんですねぇ。。
③index.htmlにコンテンツを入れていく
では続いて、コンテンツの中身を流し込んでいきます。
まずは、外を枠を設置しましょう!
前回作った・・・
の ”トップ”を消してから
ここでは画像のサイズを指定しています。こがないと、写真のサイズによっては枠からはみ出てしまうんですねぇ。。
③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>