HTML『ホームページを作ろう!』メインサイト編 | ーーーーーー

続きです。

 

文書の中心部分の中を見ていきます。

(下図参照)

 

 

 

HTML『ホームページを作ろう!』メイン部分完成まで

 

① <article>で全てをくくります。のちほど、CSSでfloatします!

② その中に<section>の枠を作ります。3つあります。

 

 

③  タイトル部分を<h2>とし、photoshopの画像をペーストします。(今回は画像で作成。下の画像

 

 

④  それぞれid名をつけます。


①~④を踏まえて、作成したコーディングはこのようになります。


<article id="main">
<section class="section">
    <div class="titlearea">
    <h2 class="maintitle"><img src="images/section1.gif" alt="セクション1"></h2>
    </div>
    <section class="textarea">
        <p>セクション内容 テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト</p>
</section>
</section>
<section class="section">
    <div class="titlearea">
        <h2 class="maintitle"><img src="images/section2.gif" alt="セクション2"></h2>
    </div>
    <section class="textarea">
        <p><img src="./images/dreamtheater1.jpg" class="dreamtheater1">セクション内容 テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト </p>
      </section>
</section>
<section class="section">
    <div class="titlearea">
        <h2 class="main-title"><img src="images/section3.gif" alt="セクション3"></h2>
    </div>
    <section class="textarea">
        <p><img src="images/dreamtheater2.jpg" class="dreamtheater2">セクション内容 テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テ
キスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト  </p>
      </section>
</section>
</article>

 

 

見出しとテキストと画像だけだったので、さくさくっと出来ました!

 

 

 

メイン完!

 

次はラスト。

フッター部分をコーディングしましょう!