今回からはレイアウトを整えていく方法について勉強した内容をまとめていきます。
reset.cssとnormalize.css
WEBの勉強を始めた当初、htmlとcssを用意してブラウザに反映させてみると
自分の想定していたレイアウトと違う動きをしている！ということがありました。
これはChromeやFirefoxなどそれぞれのブラウザごとに既にCSSが組み込まれていることが原因で、
ブラウザごとのCSSが自分の組んだhtml、CSSに影響を与えていました。
その後、reset.cssを使うことでブラウザごとに組み込まれているCSSのフォントサイズや余白など全ての項目をリセットできるということがわかりreset.cssを使っていたのですが、normalize.cssというものもあり、normalize.cssでは全てをリセットしてしまうreset.cssと違って有用なCSSを維持することができるようです。
自分が作りたいレイアウトによってそれぞれを使い分けていければいいと思います。
ワンカラムレイアウト
ワンカラムのレイアウトを作って背景は画面いっぱいに広げたいけど、
コンテンツは幅を持たせて中央に配置する方法について書いていきます。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <header> <div class="container">header</div> </header> <main> <div class="container">main</div> </main> <footer> <div class="container">footer</div> </footer> </body> </html>
.container {
width: 300px;
margin: 0 auto;
}
このようにそれぞれのコンテンツをdivで囲いクラスをつけて
そのクラスに対してwidthとmargin:0 auto;をつけることで
背景は画面いっぱい＆コンテンツ幅が300pxで中央にコンテンツ
というレイアウトが可能になります。
また、background-colorが指定されているフッターを
画面の一番下まで伸びているように見せたいというときには、
フッターの高さを指定すると複雑になるので、bodyにfooterのbackground-colorと同じ色を指定します。
するとフッターが画面の一番下まであるように見せることができます。
背景の幅いっぱいに画像を配置する
背景の幅いっぱいに画像を配置するときは以前紹介したbackground-sizeをつかいます。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <header> <div class="container">header</div> </header> <div class="image"> <div class="container">image</div> </div> <main> <div class="container">main</div> </main> <footer> <div class="container">footer</div> </footer> </body> </html>
このように今回はimageというクラスのついたdivを用意し、このdivの背景の幅いっぱい画像を表示したいときは
.image {
background: url('指定したい画像のパス');
background-size: cover;
height:表示したい高さ;
}
のように指定することで画像を背景幅いっぱいに配置することができます。
この場合、画像は左上を起点に表示されるので、画像の真ん中あたりを表示したい場合は
.image {
background: url('指定したい画像のパス');
background-size: cover;
height:表示したい高さ;
background-pozision: 50% 0;
}
のようにbackground-pozisionで位置を調整することが出来ます。
