HTML その10

<h1>全体のレイアウト</h1>

webサイトのレイアウトはだいたい


タイトルなどが表示されるページ上部、
メインとなる大きな部分、
企業のサイトなら会社概要や採用情報などが表示される、ページ下部

で構成されています。

画像1

赤い部分が <header>
緑が <main>
そして青い所が <footer> となります。

この出力結果は以下のように打ちました。

(HTML)
<body>
  <div class="header">

  </div>
  <div class="main">

  </div>
  <div class="footer">

  </div>

(CSS)
.header{
background-color: #f00 ;
height: 90px;
}

.main{
background-color: #0f0 ;
height: 600px;
}

.footer{
background-color: #00f ;
height: 270px;
}

HTMLでは色々と略していますが、このようにコードを打ちました。

レイアウトは<div>要素で構成されます。(divisionの略)
そこからheader main footer とclassで分けていきます。

今回はここまでにします。

私はプログラミング初体験ですので、表記自体間違えているかもしれません、その時は指摘していただけると助かります。

また、知識のある方、コメントなどでアドバイスをお待ちしております!

この記事が気に入ったらサポートをしてみませんか?