読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

1カラムレイアウトの演習

HTML+CSS

f:id:yachin29:20160203184948p:plain

使用するテキスト

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
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>低価格&amp;高機能な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;
}