フッターについて

質問

質問番号：7547437で質問させていただいたものです。
日にちが空いてしまったことと、補足があったため改めて投稿させていただきました。

現在、物販用WEBサイトを作成中なのですが、フッターのデザインを変更したいと思っております。

ただ、ほとんど知識がない上に、テンプレート配布サイトからDLしたhtmlファイルとcssを見よう見まねで編集する程度でして、ビルダーなどのソフトは使っておりません。

作成中のフッターは
｜HOME｜サイトナビ｜よくある質問｜お問合せ｜
という横並びのみになっているのですが、

http://footer-design.com/2011/80.html
の様な並びにしたいと思っております。

以下、質問番号：7547437でいただいたご回答の一部抜粋。

＞コピーライトなどの表記がある部分の上に、いくつかのリンク先が
＞箇条書きになっているリストがあり、そのリストが横にいくつか並んでいる、
＞そういうレイアウトにしたいという事でしょうか？

はい。おっしゃるとおりです。
参考URLはリストが5つ並んでいますが、どうしても5つにしたいわけではないので、
横に並んでいるリストがあるレイアウトであれば、4つでもかまいません。

参考URLでソースは確認したのですが、html、cssをどのようにしたらよろしいでしょうか？

つたない内容で申し訳ありません。どなたかお力をお貸し下さい。
よろしくお願いいたします。

回答No.1

rossi46mail · ベストアンサー

html

<div id="piyo">

<div class="hoge">
<ul>
<li>メニュータイトル1</li>
<li><a href="">メニュー1</a></li>
<li><a href="">メニュー2</a></li>
<li><a href="">メニュー3</a></li>
</ul>
<!-- /hoge --></div>

<div class="hoge">
<ul>
<li>メニュータイトル2</li>
<li><a href="">メニュー1</a></li>
<li><a href="">メニュー2</a></li>
<li><a href="">メニュー3</a></li>
</ul>
<!-- /hoge --></div>

<div class="hoge">
<ul>
<li>メニュータイトル3</li>
<li><a href="">メニュー1</a></li>
<li><a href="">メニュー2</a></li>
<li><a href="">メニュー3</a></li>
</ul>
<!-- /hoge --></div>

<div class="hoge">
<ul>
<li>メニュータイトル4</li>
<li><a href="">メニュー1</a></li>
<li><a href="">メニュー2</a></li>
<li><a href="">メニュー3</a></li>
</ul>
<!-- /hoge --></div>

<!-- /piyo --></div>

htmlここまで
以下、CSS

#piyo {
width:●●;
margin:●●;
padding:●●;
border:solid #ccc 1px;
}

div.hoge {
float:left;
width:●●;/*4分割した横幅margin等計算して下さい*/
margin:●●;
padding:●●;
}

４つの場合です。
作り方の説明で、フォントの種類やmargin、paddingはお好みで調整して下さい。
やり方はたくさんあるので参考になればと。

＃piyoは添付画像の中で言うと、フッタの周囲にあるグレーの枠線です。

div.hogeは中のメニューです。
左から順番にリストタグで縦に並んでいます。
また、float:left;がかかっているので左にマージンを付けずに、＃piyoのpaddingで調整した方が後々いいかもしれません。
＊IEだと2倍になってしまうので。

最後にfloatのクリアをお忘れなく。

お礼

遅くなりました。
なんとか形にすることができました。

＞最後にfloatのクリアをお忘れなく。

これの意味がよくわからなくて、色々調べているうちになんとか出来たのですが、
自分があまりにも初心者すぎてもっと知識つけなくちゃ…と思いました。

ありがとうございました。

回答No.2

ORUKA1951

これは、と言うデザインがあったらそのデザインをしっかり頭に入れます。
次にHTMLソースを確認します。
　firefoxでしたら、Html Validator ( https://addons.mozilla.jp/firefox/details/249 )というアドオンが楽です。
　ネット上にたくさんあるAnother HTML-lint gatewayでも良いでしょう。ただし、このサイトはHTML5ですから、それに対応したものが良い。
　WCにも簡単なものがあります。( The W3C Markup Validation Service ( http://validator.w3.org/ ) )

　これをパスしないと、参考にはなりません。

　次に、firefoxでしたら、Firebug ( https://addons.mozilla.jp/firefox/details/1843 )が便利です。これをつかって、+をクリックして、該当する要素がどこかを画面と、HTMLソースで見つけます。そしたら、その部分に適用されているスタイルシートも同時にわかります。

　本題です。示されたサイトはHTML5ですから、IE8以前のIEは対応していませんから、javscriptが必要です。他のブラウザは、よほど古いものでない限り対応しています。

[HTML5]
<footer>
　<nav>
　　<ul>
　　　<li><a href="./index.html">なんたらかんたら</a></li>
　　　<li><a href="./index.html">なんたらかんたら</a></li>
　　　<li><a href="./index.html">なんたらかんたら</a></li>
　　</ul>
　</nav>
だとすると、スタイルシートで
footer nav ol,footer nav ol li{display:block;list-style:none;margin:0;padding:0;}
/* と一旦、ブロックにしてブラウザ間の差を取り除くためにmarginやpaddingを0にしておきます。*/
/*　ついで */
footer nav ol li{float:left;} /* floatで並べる */
footer nav ol li+li{margin-left:2em;}/* 二つ目以降は左にマージンをとる */
footer nav ol li+li:before{content:"| ";}/* 二つ目以降に内容を追加する */
/* 以上 */

が基本です。
なお、HTM4.01strictの場合--こちらがお勧め ---でしたら
[HTML4.01strict]
<div class="footer">
　<div class="nav">
　　<ul>
　　　<li><a href="./index.html">なんたらかんたら</a></li>
　　　<li><a href="./index.html">なんたらかんたら</a></li>
　　　<li><a href="./index.html">なんたらかんたら</a></li>
　　</ul>
　</div>

div.footer div.nav ol,div.footer div.nav ol li{display:block;list-style:none;margin:0;padding:0;}
div.footer div.nav ol li{float:left;}
div.footer div.nav ol li+li{margin-left:2em;}
div.footer div.nav ol li+li:before{content:"| ";}

お礼

遅くなりました。
なんとか形にすることができました。
ありがとうございました。