• 締切済み

サイドバーの高さを本文部分と揃えるCSS

イメージ画像のようなレイアウトを制作していますが、うまくいきません。 参考になるサイト（サンプル付きがあれば望ましい）とテンプレートとかがありましたら教えてください。 宜しくお願いします。

画像を拡大する
  • nkmyr
  • お礼率67% (403/600)
  • CSS
  • 回答数4
  • ありがとう数2

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.4

＞サイドと本文部分がフッターとくっついていませんでした。 　いえ、あなたの補足では「フッターはボトムに固定したいです。 」となっていましたよ。 　本文にくっつけたいなら、もっと楽です。 <!-- html,body{margin:0;padding:0;} h1,h2,h3,p{margin:0;line-height:1.8em;} p{text-indent:1em;} div.header,div.section,div.footer{ width:80%;min-width:470px;max-width:890px; margin:0 auto; padding:5px; } div.section{ position:relative;/* ★ */ min-height:200px;/* ★ナビゲーションに最低限必要な高さ */ } div.section h2,div.section div.section{ margin-left:20%;/* ★ナビの置き場 */ } div.section div.section{ width:auto;min-width:0; min-height:0; } div.section div.nav{ position:absolute; top:0;left:-2px; height:100%;/* ★ */ width:20%; } /* 色づけ */ div.header{background-color:red;} div.section{background-color:green;} div.section div.section{background-color:silver;} div.section div.nav{background-color:orange;} div.footer{background-color:navy;} -->

全文を見る
すると、全ての回答が全文表示されます。
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

＞フッターはボトムに固定したいです。 ＞サイドや本文部分はフッターに密着するようにしたいです。 　そんなことしたら、スマホのような小さな画面や、スマホを縦や横にしたり、視覚弱者がフォントを大きくしたら不都合は起きませんか？？ 　HTMLを使用してウェブドキュメント(ページ)を書くのは 『どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )』 　通常はそのような場合は、先に示したように最低限の高さを確保しておくのが順当です。フッターなんて利用者にとって重要な情報ではありませんので・・。 　どうしてもなら、footerの高さを固定して html,body{position:relative;height:100%;} div.section,div.section div.nav{padding-botom:120px;min-height:100%;} div.section div.section{padding-bottom:0;} div.footer{position:fixed;bottom:0;left:0;height:100px;width:100%;background-color:transparent;max-width:2000px;} div.footer>*{ width:80%;min-width:470px; margin:0 auto;padding:0px 5px; background-color:navy; } を最後に付け加えればよい。 　いずれにしてもHTMLさえ文書構造が正しく示されていれば、その文書構造にしたがってセレクタを指定すればよいだけです。 1) HTMLをデザインのために書かれているように感じました。 　　それは誤りです。文書構造しか書かないようにするととってもシンプルで分かりやすいものになります。 2) カスケーディング・・その文書構造に基づいてセレクタを書くことを身につけてください。 　CSS(カスケーディングスタイルシート)では、プロパティなどより大事です。 　⇒5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html ) 　⇒6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html )

nkmyr
質問者

お礼

サイドと本文部分がフッターとくっついていませんでした。 下記を参考にしましたら出来ました。 http://www.climarks.com/ 色々とアドバイスをありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

そんなの全く難しくはないですよ。 HTMLは文書構造しか書きませんから、サイドに来る要素が本文要素に含まれる物だから、本文の区域に入れてデザインできるはずですよね。 HTML5だと、文書構造を示す要素が追加された( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )ので <body> 　<header></header> 　<section> 　　・・本文・・ 　　<nav>ナビゲーション</nav> 　</section> 　<footer></footer> </body> HTML4.01だと、DIVを使って文書構造を示してきました。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 よって <body> 　<div class="header"></div> 　<div class="section"> 　　・・本文・・ 　　<div class="nav">ナビゲーション</div> 　</div> 　<div class="footer"></div> </body> のように、書かれているはずです。 　ここまで読めば分かるように、スタイルシートは div.section{position:relative;} div.section div.nav{position:absolute;height:100%;width:20%;} だけでよいですよね。 ★floatは画像の周囲にテキストを回りこませるための物で本来の用途と違う ★ブロックはサイズや位置を指定されたら直近のstaticでない親要素を参照する。 よって、下記のようになる。 ★HTMLには文書構造しか書かない。 ★タブは＿に置換してあるので戻す。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,p{margin:0;line-height:1.8em;} p{text-indent:1em;} div.header,div.section,div.footer{ width:80%;min-width:470px;max-width:890px; margin:0 auto; padding:5px; } div.section{ position:relative;/* ★ */ min-height:200px;/* ★ナビゲーションに最低限必要な高さ */ } div.section h2,div.section div.section{ margin-left:20%;/* ★ナビの置き場 */ } div.section div.section{ width:auto;min-width:0; min-height:0; } div.section div.nav{ position:absolute; top:0;left:-2px; height:100%;/* ★ */ width:20%; } /* 色づけ */ div.header{background-color:red;} div.section{background-color:green;} div.section div.section{background-color:silver;} div.section div.nav{background-color:orange;} div.footer{background-color:navy;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<div class="section"> ＿＿＿<h3>見出し</h3> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h3>見出し</h3> ＿＿＿<p>たったこれだけで、横幅にも関わらずスマホから幅広ディスプレイまでウィンドウサイズに依存しない。</p> ＿＿＿<p>内容が増えようが減ろうが本文サイズにぴったりと合う。</p> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li>あいうえお</li> ＿＿＿＿<li>あいうえお</li> ＿＿＿＿<li>あいうえお</li> ＿＿＿＿<li>あいうえお</li> ＿＿＿＿<li>あいうえお</li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

nkmyr
質問者

補足

すみません、説明不足でした。 フッターはボトムに固定したいです。 サイドや本文部分はフッターに密着するようにしたいです。 宜しくお願いします。

全文を見る
すると、全ての回答が全文表示されます。
  • web2525
  • ベストアンサー率42% (1219/2850)
回答No.1

CSSはよく分からんので、検索結果のリンクだけ http://www.shoshinsha.com/hp/template/layout/index.html

nkmyr
質問者

補足

すみません、説明不足でした。 フッターはボトムに固定したいです。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • （ＤＷ）CSSテンプレートを使用してＣＳＳでの編集可能流域を作れますか？

    宜しくお願いします。 ＤＷ　ＭＸで制作しています。 ＣＳＳを研究中です。 完全にＣＳＳでレイアウトしたテンプレートを使用して、 編集可能領域を作り、 ＨＴＭＬファイルにそのテンプレートを適用して、 さらにその編集可能領域にＣＳＳでレイアウトしていくのは、 無理があるのでしょうか？ といいますか、 ＣＳＳで完全にレイアウトしたら、 テンプレート化せずに普通にページを増やせばいいんですよね？ まだ、基本がわかっていないのでよろしくお願いします。

    • 締切済み
    • CSS
  • CSSでテーブルのように画像を均等表示させるには？

    お世話になります。CSS初心者です。 もしかしたらweb制作者様にとっては簡単なことかもしれませんが、いろいろ調べてもよく理解できなかったので、どうか教えてください。 添付画像のようなレイアウトでサイト制作しています。 このように#rightbox内に10の画像を均等に表示させたいと思っています。 かつてテーブルタグといったものが使われていましたが、現在テーブルは推奨できないということで、外部CSSファイルでレイアウト表示させたいと考えています。 このようなレイアウトで表示させる場合、どのようなCSSの記述が好ましいでしょうか。 参考書などで調べたところ<ul>と<li>要素を使用するのが一般的だということでしたが、正直よく分かりませんでした。どうかご教授お願いします。 ちなみにこの画像のリストはクリックするとThickboxで大きな画像が表示されるようにしたいです。

    • ベストアンサー
    • HTML
  • CSSをいじらず、HTMLのテキストひとつ変えただけで崩れる

    宜しくお願いします。 ホームページビルダーで、cssのサイトを開き、 テキスト文章の文字ひとつ削除するだけでレイアウトが崩れてしまいます。 cssのサイトは[Webレイアウト]という参考書の付録CDから入れた サンプルサイトです。 自由に書き換えできるサンプルなので、テキストの「あ」を「か」に変えるだけでも、プレビューで崩れてしまう理由が不思議でなりません。cssはまったくいじっていません。

  • CSSの作成について

    図のようなレイアウトでホームページを作りたいのですが 恥ずかしながら、私html位しか書けなくて、 CSSの作り方があまり良くわからないのです。 googleで検索したところ、 このようなサンプルテンプレートがありませんでした。 あと、htmlとCSSを分けて書く、という意味がいまいち ピンときません。 どなたか、初心者に寛容な方、教えていただけないでしょうか？

  • ホームページビルダーでcssのサイトが崩れる

    宜しくお願いします。 ホームページビルダーで、cssのサイトを開き、 テキスト文章の文字ひとつ削除するだけでレイアウトが崩れてしまいます。 cssのサイトは[Webレイアウト]という参考書の付録CDから入れた サンプルサイトです。 自由に書き換えできるサンプルなので、 テキストの「あ」を「か」に変えるだけでも、プレビューで崩れてしまう理由が不思議でなりません。cssはまったくいじっていません。 理由

  • css定義でこんなものを…

    Dreamweaver2004MX 添付画像のようなレイアウトをcssで定義してみたいのですが、 可能でしょうか？ css関連のサイトを色々と検索し、やってみましたが、 css初心者としては、難しくて満足のいくものが出来ませんでした。 宜しくお願いします…。 ※添付画像の「画像」とその下にある「ＳＡＭＰＬＥ」が途中で 切れてしまってますが作成したいものは、つながっています。 わかりずらくて申し訳御座いません。

    • ベストアンサー
    • HTML
  • CSSで作ったテンプレートがのレイアウトが崩れます

    はじめまして。 今、初心ながらにdreamweaverでサイトを作っています。 CSSスタイルを使用し、テンプレートを作成して作ってるのですが、サイトはよくある左にサイドのバーがあって、上にタイトルがあるようなレイアウトなんです。 そこでサイドに画像スペースはheightをautoにしているんですが、ある一定以上高さを大きくすると、画像よりしたのスペースが画像の右側に引っかかるように回り込んでしまいます。 しかし、実際にテンプーレートを適用したファイルを見てみると、レイアウトは崩れていません。 原因はおそらくですが、メインの右部分のコンテンツがテンプレートだとCSSスタイルを指定しているだけで、高さがないためだと思うのですが、これはこのままでも問題ないのでしょうか？ 初心な質問かとは思いますがどうかよろしくお願いします。

    • ベストアンサー
    • HTML
  • ホームページテンプレートのことで？

    ホームページビルダー11を使って以下ようなのページを作りたいのですが参考になるサイトやテンプレートなどありましたら教えてください。 http://sample.lolipoblog.jp/?tid=124 どうしても角ばっていて浮き上がっているようなレイアウトができません。よろしくお願いします。

  • Galleriffic のレイアウトについて

    Galleriffic を利用してサムネイルのクリックでギャラリー表示できるWebサイトの制作をしようと思っています。 そこで、galleriffic-2.0　をダウンロードして、これに収められているサンプルの中から example-2.html　が一番イメージに合うと思ったのですが、 このレイアウトは左側にサムネイルで、右側に画像が大きく表示される仕様です。 私の中では、このサンプルの逆レイアウトがイメージにぴったりなのですが、 素人すぎて、どこを書き換えればよいのかわからず困っております。 諸先輩方の御指導をよろしく御願いします。 Galleriffic にこだわっている訳ではありませんが、設置後の更新の手軽さを考えると よいのではと・・・ 他にお勧めもございましたら御紹介を御願い申し上げます。

  • このようなレイアウトでcssを組みたい

    画像を制作したので下記に画像をのせました。 画質が悪い場合がありますのでツイッターの方にもあげておきましたので、ご確認していただければと思います。 下記のようなレイアウトを組もうとしているのですが、どうもうまく行かずに格闘しています。どなたかcssで表現していただければ大変ありがたいです。よろしくお願いいたします！

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する