使用するテキスト
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
Net Smart
よりスマートなインターネットライフを。
Concept
すべてのインターネットユーザーに快適でよりスマートさを。ネットスマートはデジタルのチカラを持って、皆様とそんな未来を創造していきます。
Service
低価格&高機能なCMS導入。充実の管理画面でサイト運用を効率的に。
Copyright 2016 Net Smart All Rights Reserved.
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>1カラムレイアウト</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div id="header"> <h1>Net Smart</h1> <p>よりスマートなインターネットライフを。</p> </div> <div id="content"> <div id="top"> <h2>Concept</h2> <p>すべてのインターネットユーザーに快適でよりスマートさを。ネットスマートはデジタルのチカラを持って、皆様とそんな未来を創造していきます。</p> </div> <div id="bottom"> <h2>Service</h2> <p>低価格&高機能なCMS導入。充実の管理画面でサイト運用を効率的に。</p> </div> </div> <div id="footer"><p><small>Copyright 2016 Net Smart All Rights Reserved.</small></p></div> </div> </body> </html>
style.css
@charset "utf-8"; /* CSS Document */ /* reset */ html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } table { border-collapse: collapse; border-spacing: 0; } ul, ol { list-style: none; /* マーカーを消す */ } a { text-decoration: none; /* 下線を消す */ } img { border: 0; } img, input { vertical-align: bottom; } /*ページレイアウト*/ body { background: #CCC; } #container { width: 800px; margin: 0 auto; } header { background: url(img/header.png) no-repeat left top; width: 800px; height: 300px; } h1 { color: #FFF; padding: 20px 0 0 20px; width: 300px; white-space: nowrap; text-indent: 100%; overflow: hidden; } header p { color: #FFF; padding: 20px 0 0 20px; width: 300px; white-space: nowrap; text-indent: 100%; overflow: hidden; } #content { text-align: center; } h2 { font-size: 32px; padding: 40px 0 10px; width: 200px; margin: 0 auto; } #content p { padding: 30px 100px 0; line-height: 2; } #top { background: #FFF; width: 800px; height: 300px; } #top h2 { color: #09F; border-bottom: 5px solid #09F; } #bottom { background: #09F; width: 800px; height: 300px; } #bottom h2 { color: #FFF; border-bottom: 5px solid #FFF; } #bottom p{ color: #FFF; } footer { background: #333; } footer p { text-align: center; color: #FFF; padding: 20px 0; }