フッターのナビゲーションを修正
- li の幅を揃えないで、文字の両サイドの空きを揃えるように修正。li a にdisplay: block;しない。文字の左右にpadding を指定。
- 要素検証して、ul に必要な幅を計算する。各々の、li の幅を合計する。それから、ul にmargin: 0 auto; する。
リンク先の表示、左側の矢印を修正
- 画像を背景扱いにすると、マウスを持って行っても反応しない。
- 画像をp のインライン要素にした。
- img のリセットを追加。vertical-align: bottom;
- 画像とテキストの間にスペースを入れたら、表示の上でも半角スペースができた。なぜだ？
- 適当な間隔を空けたい場合は、フロートさせるのか…
<div id="content1">
<h4 class="first">スタイルシートによるレイアウトで、表現力と機能性が共存したサイトを構築。</h4>
<p> サンプルスタイルシートカンパニーでは、</p>
<p><a href="#"><img src="img/arrow.png" width="17" height="16" alt="arrow"> ソリューションへ</a></p>
</div><!--content1--><div id="content2">
<h4 class="second">ウェブサイトを成功に導く、構造設計とインターフェース構築を武器に。</h4>
<p>100件あまりのウェブサイト構築経験から培った企画・開発力をバックボーンにもつ、</p>
<p><a href="#"><img src="img/arrow.png" width="17" height="16" alt="arrrow"> 実績紹介へ</a></p>
</div><!--content2-->
</div><!--about-->
#footer{
background: url(img/h2bg.png) 0 0;
height: 120px;
padding-top: 16px;
}
#footer p{
text-align: center;
color: #FFFFEF;
margin-bottom: 32px;
}
#footer ul{
width: 738px;/*要素検証からliの幅をすべて合計*/
margin: 0 auto;
overflow: hidden;
}
#footer li{
float: left;
}
#footer li a{
color: #FFFFEE;
border-left: 1px solid #FFFFEE;
text-align: center;
padding: 0 10px 0 10px;
}
#footer li:first-child a{
border-left: none;
}
#footer li a:hover{
color: #E20613;
}
