【第7回】実践編-フッター

2016.10.26
Webコラム

画面下部(フッダー)に会社名、サイトマップ、Copyrightを表示させます。

footer1

フッダーに会社名を表示します。
会社名の英語表記と日本語表記の文字の大きさを pタグと h2タグとを使うことで大きさを変えています。CSSの 26, 33行目、HTMLの4,5行目がそれに当たります。
CSSの 9行目で文字の背景の画像をbackground-repeatプロパティで指定しています。
background-repeatプロパティは、背景画像の繰り返しを指定する事ができます。横方向・縦方向に限って繰り返す、繰り返さないを制御したいときに使用します。
background-repeatに与えられる値は下記の通りです。

background-repeat: repeat; 縦横ともに、背景画像を繰り返して表示します。初期値です。
background-repeat: repeat-x; 横方向のみ繰り返して表示します。
background-repeat: repeat-y; 縦方向のみ繰り返して表示します。
background-repeat: no-repeat; 背景画像を一回だけ表示してリピートはしません。

CSSの 8行目の画像 footer_bg.jpg は部分的な縦長画像でそのまま表示させると横幅が足りません。ここでは「repeat-x: 横方向にのみ背景画像を繰り返して表示」を指定し、横長で社名の文字に合わせて表示されるようにします。

フッダーにサイトマップを表示します。
CSS 67行目の min-height プロパティは要素の最小の高さを設定するのに使われます。
最小の高さを指定する事でボックス内の内容が少ない時にレイアウトが崩れず、逆に多くなった場合は高さが広がってくれます。

CSS 78行目の float: left; と高さ min-height: 250px の指定をしない場合は縦に長く1列で表示されます。
これを指定することで、左側からサイトマップの列とコラムの列と2列に表示されます。

Copyright（コピーライト）著作権を表示します。
Copyright（コピーライト）の文字の大きさを「id=”copyright”」を指定して変えています。CSSの 192行目、HTMLの54行目がそれに当たります。
CSSの 184行目の画像 footer_bg.jpg は部分的な縦長画像で、フッダー会社名と同様に repeat-x を指定し横長でCopyrightの文字に合わせて表示されるようにします。コピーライトマークは、文字参照で「©」をHTMLに記述します(HTMLの54行目)。

HTML

<div id="footer-wrapper">
  <div id="footer" class="clearfix">
    <div id="footer_description">
      <p>The Universal Network Service Japan</p>
      <h2>株式会社UNS</h2>
    </div>
    <ul class="social_link clearfix" id="footer_social_link">
      <li class="rss"><a class="target_blank blendy" href="http://www.sample.com/feed.html">rss</a></li>
    </ul>
  </div>
  <div id="footer_widget_wrap">
    <div id="footer_widget" class="clearfix">
      <div class="footer_widget clearfix widget_pages" id="pages-2">
        <h3 class="footer_headline">サイトマップ</h3>
        <ul>
          <li class="page_item page-item-397 current_page_item"><a href="http://www.sample.com/">トップページ</a></li>
          <li class="page_item page-item-399"><a href="http://www.sample.com/column.html">コラム</a></li>
          <li class="page_item page-item-401 page_item_has_children"><a href="http://www.sample.com/company.html">会社概要</a>
            <ul class='children'>
              <li class="page_item page-item-403"><a href="http://www.sample.com/recruit.html">採用情報</a></li>
              <li class="page_item page-item-430"><a href="http://www.sample.com/corporate_vision.html">企業理念</a></li>
              <li class="page_item page-item-550"><a href="http://www.sample.com/president">代表挨拶</a></li>
            </ul>
          </li>
          <li class="page_item page-item-434"><a href="http://www.sample.com/service_navigate.html">事業内容</a></li>
          <li class="page_item page-item-503"><a href="http://www.sample.com/contact.html">お問い合わせ</a></li>
        </ul>
      </div>
      <div class="footer_widget clearfix widget_categories" id="categories-2">
        <h3 class="footer_headline">コラム</h3>
        <ul>
          <li class="cat-item cat-item-10"><a href="http://www.sample.com/web-column.html" title="ＷＥＢにまつわる、マークアップ、コーディング、デザインなどのコラム">Webコラム</a> </li>
          <li class="cat-item cat-item-9"><a href="http://www.sample.com/zabbix.html">Zabbix</a> </li>
          <li class="cat-item cat-item-8"><a href="http://www.sample.com/oss.html">オープンソース</a> </li>
          <li class="cat-item cat-item-4"><a href="http://www.sample.com/column.html" title="コラム">コラム</a> </li>
          <li class="cat-item cat-item-5"><a href="http://www.sample.com/system.html" title="システムの話">システム</a> </li>
          <li class="cat-item cat-item-7"><a href="http://www.sample.com/network.html">ネットワーク</a> </li>
          <li class="cat-item cat-item-6"><a href="http://www.sample.com/hitorigoto.html">社長の独り言</a> </li>
        </ul>
      </div>
    </div>
    <!-- END #footer_widget --> 
  </div>
  <!-- END #footer_widget_wrap -->
  
  <div id="footer_copr">
    <p id="copyright">Copyright &copy;&nbsp; <a href="http://www.sample.com/">株式会社UNS</a> All rights reserved.</p>
  </div>
  <div id="return_wrapper"> <a id="return_top" class="blendy">ページ上部へ戻る</a> </div>
</div>

CSS

/* footer */
#footer-wrapper {
	clear: both;
	width: 100%;
	/*height: 390px;*/
	padding-top: 1px;
	min-width: 1100px;
	background-image: url(images/footer_bg.jpg);
	background-repeat: repeat-x;
	background-position: left top;
}
#footer {
	width:1100px;
	height:45px;
	margin:0 auto;
	position:relative;
	font-size:12px;
}
#footer a {
	text-decoration:none;
}
#footer a:hover {
	color:#8dd0d9;
}
/* footer_description */
#footer_description {
	width: 958px;
	height: 45px;
	float: left;
}
#footer_description p {
	display: inline;
	margin: 0 15px 0 0;
	line-height: 45px;
	font-size: 14px;
	font-weight: bold;
}
#footer_description h2 {
	display: inline;
	margin: 0;
	line-height: 45px;
	font-size: 20px;
	font-weight: bold;
}
/* footer_sociallink */
#footer_social_link {
	width: 141px;
	height: 45px;
	display: block;
	float: right;
	padding-right: 1px;
	background-image: url(images/dot_01.png);
	background-repeat: repeat-y;
	background-position: right top;
}
.social_link {
	margin:0;
}
.social_link li {
	float:right;
	margin:0;
}
.social_link li a {
	display:block;
	width:47px;
	height:45px;
	text-decoration:none;
	text-indent:-9999px;
}
.social_link li.rss a {
	background:url(images/rss.jpg) no-repeat left top;
}
.social_link li.twitter a {
	background:url(images/twitter.jpg) no-repeat left top;
}
.social_link li.facebook a {
	background:url(images/fb.jpg) no-repeat left top;
}
.social_link li a:hover, .social_link li a.hover {
	background-position:left bottom;
}
/* footer widget */
#footer_widget_wrap {
	width:100%;
	min-width:1100px;
	min-height: 250px;
	background: #EBEBEB;
	padding-bottom: 20px;
	margin-top: 25px;
}
#footer_widget {
	width: 1100px;
	margin: 0 auto;
}
#footer_widget_banner {
	width: 347px;
	float: left;
	margin-bottom: 20px;
	background-image: url(images/footer_line.jpg);
	background-repeat: repeat-y;
	background-position: right top;
}
#footer_widget_banner div {
	width: 300px;
	background: #000;
}
#footer_widget_banner div a img {
	-webkit-transition-property:opacity;
	-webkit-transition-duration:0.4s;
	-webkit-transition-timing-function:ease;
	-moz-transition-property:opacity;
	-moz-transition-duration:0.4s;
	-moz-transition-timing-function:ease;
	-o-transition-property:opacity;
	-o-transition-duration:0.4s;
	-o-transition-timing-function:ease;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-o-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
}
#footer_widget_banner div a:hover img {
	opacity:0.5;
}
#footer_widget_banner img {
	width: auto;
	height: auto;
}
.footer_widget {
	width:191px;
	min-height: 250px;
	float:left;
	padding: 0 32px 0 28px;
	margin-bottom: 20px;
	font-size:11px;
	background-image: url(images/footer_line.jpg);
	background-repeat: repeat-y;
	background-position: right top;
}
.footer_widget.right_widget {
}
.footer_headline {
	font-size:14px;
	font-weight: bold;
	color: #f00;
}
.footer_widget ul {
	margin:0;
}
.footer_widget li ul {
	margin:10px 0 0 0;
}
.footer_widget li {
	line-height:170%;
	margin:0 0 10px 0;
}
.footer_widget a {
	text-decoration: none;
}
.footer_widget a:hover {
	text-decoration: underline;
}
.footer_widget img {
	height:auto;
	max-width:100%;
	width:auto;
}
.footer_widget.widget_nav_menu .menu {
	border: none;
}
.footer_widget.widget_nav_menu .menu li {
	background: none;
	font-size: 11px;
	margin: 0 0 10px;
	line-height: 170%;
	height: auto;
}
.footer_widget.widget_nav_menu .menu li a {
	text-decoration: none;
	background: none;
	line-height: 170%;
	padding: 0;
	height: auto;
}
.footer_widget.widget_nav_menu .menu li a:hover {
	text-decoration: underline;
}
.footer_widget.widget_nav_menu .menu .sub-menu {
	margin-left: 10px;
}
.footer_widget a.news_widget_list_link {
	display: none;
}
.footer_widget.widget_search #s {
	width: 113px;
}
.footer_widget.widget_search #searchsubmit {
	width: 50px;
}
/* copyright */
#footer_copr {
	width: 100%;
	height: 48px;
	background-image: url(images/footer_bg.jpg);
	background-repeat: repeat-x;
	background-position: left bottom;
}
#copyright {
	min-width:1100px;
	text-align:center;
	color:#333;
	font-size: 12px;
	margin:0;
	padding:0;
	height: 48px;
	line-height: 48px;
}
#copyright a {
	text-decoration:none;
	color:#333;
}
#copyright a:hover {
	text-decoration:underline;
}

【第7回】実践編-フッター

関連記事

コメント

最近の記事

カテゴリー

株式会社UNS

サイトマップ

コラム