こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

フッターについて

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


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

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

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

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

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

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

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

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

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

投稿日時 - 2012-06-26 13:38:50

QNo.7556055

困ってます

質問者が選んだベストアンサー

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:●●;
}


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

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

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

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

投稿日時 - 2012-06-26 16:09:04

お礼

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

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

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

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

投稿日時 - 2012-06-28 23:09:29

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

これは、と言うデザインがあったらそのデザインをしっかり頭に入れます。
次に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:"| ";}

投稿日時 - 2012-06-26 16:34:33

お礼

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

投稿日時 - 2012-06-28 23:06:52

あなたにオススメの質問