ハンデプログラマー

障害者の方のためのプログラミング教室です。目指せ自立!!

トップ > HTML/CSS入門 > 実際にサイトを作ってみよう(フッター)

実際にサイトを作ってみよう(フッター)

1、テラパッドを開きstyle13.cssファイルを開きます。

2、下記のようにプログラムを追加します。

footer{
box-sizing:border-box;
width:980px;
margin:0 auto;
}

.footmenu{
width:100%;
padding:20px 0;
overflow:hidden;
}
.footmenu ul{
position:relative;
float:left;
left:50%;
margin:0;
padding:0;
}
.footmenu li{
position:relative;
float:left;
left:-50%;
list-style:none;
margin:0;
padding:0 15px;
font-size:12px;
text-align:center;
}
.footmenu a{
color:#333;
text-decoration:none;
}
.footmenu a:hover{
color:#333;
text-decoration:underline;
}

.copyright{
padding:20px 0;
font-size:11px;
text-align:center;
color:#efede9;
background:#2e2e2e;
}

3、HTMLと同じフォルダに「style14.css」というファイル名で保存します。

4、テラパッドを開きtest13.htmlファイルを開きます。

2、下記のようにプログラムを追加します。

<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="style13.css">
</head>
<body>

<div class="space">
    <a href="../homepage.html"><img src="images/logo.jpg" alt="ロゴ"></a>
	<p class="guide">
	    サイト説明文を表示します。
    </p>
</div>

<hdmenu>
    <div class="space">
	<ul class="menu">
	    <li><a href="../index.html">ホーム</a></li>
	    <li><a href="../programing.html">プログラミング講座</a></li>
	    <li><a href="../question.html">質問受付</a></li>
	    <li><a href="../company.html">会社概要</a></li>
	    <li><a href="../inquiry.html">お問い合わせ</a></li>
	    <li><a href="../infomation.html">個人情報保護方針</a></li>
	</ul>
    </div>
</hdmenu>

<div class="topimg">
<img src="images/top.jpg" alt="トップ画像">
</div>

<div id="contents">
    <div id="main">

        <h1>文章タイトル</h1>
        <p>
            文章を書き込む。
        </p>
    </div>

    <div id="sub">
        <ul class="bnr">
            <li><a href="../index.html"><img src="images/bnr.jpg" alt=""></a></li>
	    <li><a href="../index.html"><img src="images/bnr.jpg" alt=""></a></li>
	</ul>
    </div>
</div>

<footer>
    <div class="footmenu">
	<ul>
	    <li><a href="../index.html">HOME</a></li>
	    <li><a href="../programing.html">プログラミング講座</a></li>
	    <li><a href="../question.html">質問受付</a></li>
	    <li><a href="../company.html">会社概要</a></li>
	    <li><a href="../inquiry.html">お問い合わせ</a></li>
	    <li><a href="../infomation.html">個人情報保護方針</a></li>
	</ul>
    </div>
    <div class="copyright">Copyright © ハンデプログラマー All Rights Reserved.</div>
</footer>

</body>
</html>

3、このファイルをtest14.htmlのファイル名で保存します。

4、HTMLファイルをダブルクリックして開きます。
テスト14表示

CSSとHTMLで記述したフッターが表示されます。ここではメニューは違うパターンで表示しています。

●フッターメニューの設定を追加します。

.footmenu{
width:100%;
padding:20px 0;
overflow:hidden;
}
.footmenu ul{
position:relative;
float:left;
left:50%;
margin:0;
padding:0;
}
.footmenu li{
position:relative;
float:left;
left:-50%;
list-style:none;
margin:0;
padding:0 15px;
font-size:12px;
text-align:center;
}
.footmenu a{
color:#333;
text-decoration:none;
}
.footmenu a:hover{
color:#333;
text-decoration:underline;
}
ヘッダーメニューと同じように設定します。テキストの色、サイズ、位置について設定します。

●コピーライトの設定を追加します。

.copyright{
padding:20px 0;
font-size:11px;
text-align:center;
color:#efede9;
background:#2e2e2e;
}
ホームページの下部には必須の表示になります。これを付けることでコピーサイトができないように宣言します。

HTMLの方ではフッターの表示を行ないます。

<footer>
    <div class="footmenu">
	<ul>
	    <li><a href="../index.html">HOME</a></li>
	    <li><a href="../programing.html">プログラミング講座</a></li>
	    <li><a href="../question.html">質問受付</a></li>
	    <li><a href="../company.html">会社概要</a></li>
	    <li><a href="../inquiry.html">お問い合わせ</a></li>
	    <li><a href="../infomation.html">個人情報保護方針</a></li>
	</ul>
    </div>
    <div class="copyright">Copyright © ハンデプログラマー All Rights Reserved.</div>
</footer>
CSSで設定したようにフッターメニューを表示します。メニューをクリックするとリンク先のページに移動します。

これで一つのページができました。これを必要な分作成することでホームページができます。

プログラミング言語

こちらのサイトで扱うプログラミング言語一覧です。

ページのトップへ戻る