[ CSS ] フッターのサンプル

だるかぶ

サンダルでスーパーカブ乗りの『だるかぶ』です！
ご訪問ありがとうございます。ゆっくりしていってね。（本ページは広告を含みます。）

よく使う感じのフッターのサンプルを書いてみた。

実際の動作サンプル

https://codepen.io/darucub/pen/pvyvmWw

サンプルコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>フッターのサンプル</title>
<style type="text/css">
<!--
* {
  margin: 0;
  padding: 0;
}
body {
  margin: 20px;
  font-size: 12px;
}
#footer {
  position: relative;
  background-color: #eeeeee;
  width: 720px;
}
#footer li {
  display: inline;
  background-image: url(list-mark.gif);
  background-repeat: no-repeat;
  padding: 0 0.75em 0 0.75em;
  background-position: 0 0.25em;
}
#footer li a {
  text-decoration: none;
}
#footer address {
  font-style: normal;
}
#footer address p {
  padding-top: 0.25em;
}
#footer .banner {
  height: 25px;
  width: 160px;
  position: absolute;
  left: 560px;
  top: 0px;
  background-color: #dddddd;
}
-->
</style>
</head>
<body>
<div>
  <ul>
    <li><a href="#">会社概要</a></li>
    <li><a href="#">求人情報</a></li>
    <li><a href="#">個人情報の取扱について</a></li>
  </ul>
  <address>
    <p>Copyright &copy; 2007 Hogehoge Co.,Ltd. All rights reserved.</p>
  </address>
  <div class="banner">banner</div>
</div>
</body>
</html>

現場からは以上です。それでは、またッ！！！

だるかぶ

最後までお読みいただきありがとうございます！ スキ・コメント・シェア・フォローなどで応援いただけると『だるかぶ』のやる気がアップします！

記事内容の修正について 記載している内容は記事執筆時の情報です。 できるだけ最新情報を掲載するようにしていますが、情報が間違っている場合は「コメント」でご指摘いただけるとありがたいです。