HTML その10
<h1>全体のレイアウト</h1>
webサイトのレイアウトはだいたい
タイトルなどが表示されるページ上部、
メインとなる大きな部分、
企業のサイトなら会社概要や採用情報などが表示される、ページ下部
で構成されています。
赤い部分が <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で分けていきます。
今回はここまでにします。
私はプログラミング初体験ですので、表記自体間違えているかもしれません、その時は指摘していただけると助かります。
また、知識のある方、コメントなどでアドバイスをお待ちしております!
この記事が気に入ったらサポートをしてみませんか?