footer(フッター） html css

footer(フッター）
web研究会　2014.04.12 footer no１
フッタ-とは、ページの下端に設けら、そこには　ページに関する情報、著作権データ、
関連のドキュメントへのリンク、それらの類等を記入します
sampley2のフッターを見てみましょう
いつも使われるhtmlとcssを色分けしてみました
ソースコードに慣れていきましょう　css
footer {
clear:both;
width:100%;
height:auto;
フッターの背景色
min-height:100px;
background-color:#4c80b3;
padding-bottom:20px;
html
color:#dcdcdc;
}
<footer>
<h1>フッターの第1見出しです</h1>
<div class="footerwrap clearfix">
<div class="footerinfo">
<h2>Web4学習テキスト教材</h2>
<p>Expression　Web4学習テキストの教材、サンプル2です。
使い方などはテキストにしたがってください。</p>
</div>
</div>
<div
<div class="footerinfo">
class="footerinfo">
<h2>教材の内容</h2>
<ul>
<li>サンプル1　htmlとCSSと画像</li>
<li>サンプル2　htmlとCSSと画像</li>
<li>サンプル3　htmlとCSSとJSと画像</li>
</ul>
</div>
</div>
</div>
</footer>
フッターの文字色
footer h1 {
width:50%;
font-size:1.5em;
margin-top:1em;
margin-left:1.5em;
}
文字のサイズ
marginは
h1見出しの位置
footer h2 {
font-size:1.2em;
padding-bottom:5px;
}
.footerinfo {
左揃え
float:left;
.footerinfo:first-child
{
width:42%;
幅は全体の42%
margin-right:20px;
}
footer p,footer li {
line-height:120%;
padding:0 10px;
}
<ul><li>は
箇条書きや項目を
並べる時に使います
リストです
サンプルを元に作成した溝井さんのページのフッターです
htmlでは　h1（見出し）とh2（中見出し）とp（文章のひと段落）li (箇条書き）を変えています
cssでは
footerのbackground-colorを #264d49　に変えています
web研究会

Download Report