<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>1カラムレイアウトの作成</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1>Net Smart</h1> <p class="tag-line">よりスマートなインターネットライフを。</p> </header> <div class="container"> <div class="main-visual"> <img src="img/main.jpg" alt=""> </div> <div class="concept"> <h2>Concept</h2> <img class="photo" src="img/01.jpg" alt=""> <p class="text">すべてのインターネットユーザーに快適でよりスマートさを。<br> ネットスマートはデジタルのチカラを持って、皆様とそんな未来を創造していきます。</p> </div> <div class="service"> <h2>Service</h2> <img class="photo" src="img/02.jpg" alt=""> <p class="text">低価格&高機能なCMS導入。<br> 充実の管理画面でサイト運用を効率的に。</p> </div> </div> <footer> <p><small>© 2023 Net Smart</small></p> </footer> </body> </html>
style.css
@charset "utf-8"; *{ margin: 0; padding: 0; box-sizing: border-box; } header{ background-color: #b8dbd0; text-align: center; padding: 10px 0; margin-bottom: 80px; } h1{ font-size: 44px; margin-bottom: 10px; } .tag-line{ font-size: 20px; } .container{ width: 960px; margin: 0 auto 80px; } .main-visual{ margin-bottom: 80px; } .concept{ background-color: #edeec7; padding: 40px; } .concept>h2{ font-size: 28px; margin-bottom: 20px; border-left: 20px solid #222; padding-left: 20px; } .service{ background-color: #294950; color: #FFFFFF; padding: 40px; } .service>h2{ font-size: 28px; margin-bottom: 20px; border-left: 20px solid #ffffff; padding-left: 20px; } footer{ background-color: #b8dbd0; text-align: center; padding: 20px 0; } .photo{ margin-bottom: 20px; }