index.html
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>フルスクリーンレイアウト</title> <style> html,body,h1,p { margin:0; padding:0; } body { width:100%; height:100vh;/*1画面分の高さ*/ background:url(img/main.jpg) no-repeat center center/cover; background-attachment:fixed;/*背景画像を固定にする*/ } header { width:100%; height:100vh; background:rgba(255,255,255,0.4); } h1 { width:260px; height:260px; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; } .box { width:100%; padding:40px 0; background:#FFF; margin-bottom:60vh; } p { width:700px; padding:20px 0; margin:0 auto; line-height:1.8; } .top img { float:left; margin-right:30px; } .bottom img { float:right; margin-left:30px; } footer { width:100%; height:30vh; background:#BBBBBB; } </style> </head> <body> <header> <h1><img src="img/logo.svg" alt=""></h1> </header> <div class="box"> <p class="top"><img src="https://placehold.jp/400x200.png" alt="">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰</p> </div> <div class="box"> <p class="bottom"><img src="https://placehold.jp/400x200.png" alt="">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰</p> </div> <footer></footer> </body> </html>
