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

Webデザインの勉強 | フェリカテクニカルアカデミーWebサイト制作科サポートブログ

ヘッダーとフッターをデザインする

WordPress基礎

Webフォントを利用する

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Acme">
サイト名をWebフォントで表示する
/* ヘッダー */
.siteinfo h1 {
  float: left;
  margin: 0;
  font-family: 'Acme', sans-serif;
  font-size: 20px;
}


《プレビュー》

f:id:webmaster-web:20160710122445p:plain

ヘッダーの設定

/* ヘッダー */
header {
  margin-bottom: 40px;
  background-color: #4A5F7E;
  color: #FFF;
}
header a {
  color: #FFF;
  text-decoration: none;
}
.siteinfo {
  overflow: hidden;
  padding-top: 14px;
  padding-bottom: 14px;
}
.siteinfo h1 {
  float: left;
  margin: 0;
  font-family: 'Acme', sans-serif;
  font-size: 20px;
}
.siteinfo p {
  float: right;
  margin: 0;
  margin-top: 5px;
  font-size: 12px;
}

フッターの設定

/* フッター */
footer {
  margin-top: 40px;
  padding-top: 14px;
  padding-bottom: 14px;
  background-color: #4A5F7E;
  color: #FFF;
}

ヘッダーとフッターの中身を記事に揃えて表示する

<header>
<div class="siteinfo">

<div class="container">
  … headerの中身 …
</div><!-- /.container -->

</div><!-- /.siteinfo -->
</header><!-- /header -->

  … 略 …

<footer>
<div class="container">
  … footerの中身 …
</div><!-- /.container -->
</footer>

レイアウトの微調整

body {
  margin: 0;
  font-size: 16px;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  color: #333;
}

/* 余白のレイアウト */
.container {
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}