ウエブかねたけ丸

伝えたいことがあるから

かねたけ丸試作2

※右上のグローバルリンクはダミーです

右上のリンク1、リンク2はどこにもリンクしていません。

header全画面表示について

Homeでheaderが全画面に表示されるようにした。そのために
html,body{ width: 100%; height: 100%; }を指定した上で、headerにもwidth: 100%; height: 100%;を指定。

navについて

navが常に右上部に表示されるようにした。
position: fixed;で右上の位置を指定した。そして常に手前に表示するために、z-index: 10;も指定した。

header内の他の要素について

固定したい物はposition: fixed;で、スクロールさせたいものは、position: absolute;で位置を指定した。下からスクロールしてくる要素より奥に表示させたい(背景にしたい画像)についてはz-index: -10;

main内でのarticleとasideの配置について

mainにdisplay: flex;を記述し、articleとasideの幅を%指定して2カラムにした。

mainの背景として画像を表示

background-image: url(../images/bg_stone.png);で、背景をしていしようと思い、bodyの背景として指定したところheader内の他の要素との重なり関係(z-index)がややこしくなったので、div id="for-bg"でmainをつつみ、そのdivに背景を設定した。