ナビとコラムをくっつけたい

前へ 次へ
このQ&Aのポイント
  • HTML/CSSのタグ打ちでHPを作っているが、ナビとコラムの幅を揃えることができない
  • 暗めの素材を使用したいため、幅を揃えたいがコラムがなくなってしまう
  • ページ両サイドの領域に背景や色を入れたいが、方法が分からない
回答を見る
  • ベストアンサー

ナビとコラムをくっつけたい

カテゴリ迷いましたが、こちらに投稿させていただきます。 現在HTML/CSSのタグ打ちでHPを作っています。 画像を参照していただけると幸いです。 今の状態は、ナビ・カラムのどちらかのピクセルを増やさないとヘッダーと同じ幅にならない状態なのですが、ヘッダーと同じ横幅にしようとピクセルを増やすとコラム（左側の広い幅の方）がなくなってしまうんです。 （意味がわからなかったらすみません） 素材を白系のものを使えばごまかせますが、今回は題材的にも画像のような暗めの素材を使いたく、どうにか直したいと思っています。 付け足しで、ページ両サイドの領域に背景や色を入れるにはどうしたらいいのでしょうか？ 無知で申し訳ないのですが、直し方などわかる方いらっしゃいましたら是非ご教示くださいませ。 また、「WEB上で見るとこうなってる」というように分かるようなソースをのぞけるツールなどありませんか？それを教えていただけるだけでもいいです。 補足が必要ならばいたしますので、どうかよろしくお願いします。

画像を拡大する
  • HTML
  • 回答数1
  • ありがとう数1

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

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

HTML(ウェブページ)がきちんとマークアップされていれば、スタイルシートも簡単に書けるでしょう。 <body> 　<div class="header"> 　　<h1>見出し</h1> 　　<div class="nav"> 　　　<ol> 　　　　<li><a href="./">Top</a></li> 　　　　<li><a href="./news">News</a></li> 　　　　<li><a href="./product">Product</a></li> 　　　</ol> 　 </div> 　</div> 　<div class="article"> 　　<h2>見出し</h2> 　　<div clas="section1"> 　　　<p>段落</p> 　　</div> 　　<div clas="section1"> 　　　<p>段落</p> 　　</div> 　　<div class="contentTable"> 　　　<h3>目次</h3> 　　　<ol> 　　　　<li><a href="#section1">Section1</a></li> 　　　　<li><a href="#section2">Section2</a></li> 　　　　<li><a href="#section3">Section3</a></li> 　　　</ol> 　　</div> 　</div> 　<div class="footer"> 　</div> </body> だとして、 div.header,div.article{width:100%;position:relative;} div.article h2,div.article div.section{margin-left:21%;min-height:400px;} div.article div.contentTable{width:20%;position:absolute;top:0;left:0;height:100%;} とか・・ ＞付け足しで、ページ両サイドの領域に背景や色を入れるにはどうしたらいいのでしょうか？ body{background:****;} div.header,div.article{width:80%;min-width:450px;max-width:960px;margin:0 auto;position:relative;} 以下変更なし 　基本的に、HTMLさえきちんと文書構造にしたがって書かれていたら(プレゼンテーションや配置はHTMLでは扱わない)、スタイルシートでいかようにもレイアウトやプレゼンテーションは決められる。 　そうするとHTMLもCSSも簡潔でわかりやすくなる。HTMLだけ見て何が書かれているかわかること。CSSだけ見てどのように配置しようとしているかわかること。 　　

kuronecosan
質問者

お礼

どうもありがとうございました！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • アメーバブログの各カラムの角を丸くしたいのですが…。

    私は今日アメーバブログに入りました。 現在、CSS編集を行っている最中です。 スキンはスタンダードの「グリーン」を使用しています。 CSSは公開できず、大変申し訳ないのですが、ブログで一般的に使われている３カラムの形式で、各カラム（ヘッダー・メッセージボード・各記事・サイドの２つのカラム）の角を丸くしたいと思っています。 色々検索してみたのですが、どうも見つからずに大変困っています。 どのような英数字（？）を入れればいいのでしょうか？ ご指導よろしくお願いします。 追記１：HTMLタグは一通り理解しています。 追記２：「CSSが分からないと教えようがない」といったような回答はご遠慮願います。

  • 【DreamweaverCS5】ナビの画像について

    Dreamweaverを利用してHPのヘッダやフッタ、ナビ（メニュー）を テンプレート化しようと思うのですが、 選択されているhtmlによって、該当するナビだけ違う画像を表示したいと思っています。 （http://www.okwave.co.jp/index.html　のヘッダメニューのように） その場合は、ナビ部分をテンプレートに含めてしまうのは無理なのでしょうか。 例） index.html、company.html、qa.htmlとあった場合、 index.htmlのときのナビ画像は　image1 image2 image3 company.htmlのときのナビ画像は、imageor1 image2 image3 qa.htmlのときのナビ画像は、image1 imageor2 image3 のような感じです。 思いついたのが、 メインのCSSと、ナビ用の画像を指定するCSSを分けて、 各htmlごとに、それぞれのナビ用のCSSを指定するやり方です。 一応これでナビもテンプレート部分に収めることができたのですが、 もう少し賢いやり方や方法があるのではないかと思っています。 メニューの中で、表示中のものだけ画像が違うのは 非常に良くあるパターンなので、何か賢いやり方があるのではないかと 思っています。 分かる方ご教授お願いします。

    • ベストアンサー
    • HTML
  • Perlでcssを使わないで3カラムにしたい

    現在、Perlでcgiを作成していますが、ページの最上部にヘッダー、ページの両端にメニューや広告、中央にメインコンテンツを配置する3カラム（三段組み）、最下部をフッターにしたいと考えています。 現在、メインコンテンツは完成しております。 cssは、使わないで上記のようなレイアウトをPerlで組みたいのですが、上記にようにしたい場合は、どのように書けば良いのでしょうか？ 横幅全体は800。(ヘッダーとフッターも横幅は800) 左メニュー180、中央メインコンテンツ 440 、右メニュー180 で組みたいと思っています。 お手数をおかけ致しますが、アドバイスよろしくお願い致します。

    • ベストアンサー
    • Perl
  • アメーバブログの両サイドの余白を消したいんです。

    　これから、アメーバでブログをやってみようかと、『　雛形　』的な物は作ってみたのですが、ヘッダの部分は横幅いっぱいにして、カラムやサイドメニューの更に外の余白部分は無くしてしまい、画面をなるべく広くしたい、と考えているのですが、、、、、、、、、、悲しいかな、当方、『　ＣＳＳとはなんぞや？　』と言う状態でして、、、、。 　ググッてなんとか、ヘッダの上の部分を消す方法は分かったのですが、横の余白が消せません。 　色んなブログを見てみると、結構なくなってるのもあるので（例　http://ameblo.jp/hylife/　）、なんとか消す方法はあると思うのですが、どなたか、詳しいお方、子供にでも解る様に、お教え願えないでしょうか？。 　お願いいたします。

  • ヘッダー・左カラムは固定、右カラム可変のレイアウト

    CSSでレイアウトを制作中なのですが、途中から分からず止まっております。 今の状況は縦に可変した時、左カラムのスクロールバーが最大まで表示されない状態です。また、右カラムは途切れてしまいます。 height100％に対し、ヘッダでピクセル指定しているからだと思うのですが。 ■CSS *{ margin:0px; padding:0px; } /** html */ html,body { height:100%; min-height:500px; overflow-y:hidden; } /** ヘッダ */ #header { height:125px; width:100%; } /** 左・右カラムの囲い */ #container { height:85%; margin-left:400px; } /** 左カラム */ #menu { float:left; height:85%; margin-left:-400px; overflow:auto; width:400px; } /** 右カラム */ #main{ float:right; height:100%; margin-left:430px; overflow:auto; width:100%; } /** フッタはありません */ ■HTML側 <div id="header"> ヘッダ </div> <div id="container"> <div id="menu"> 左カラム </div> </div> <div id="menu"> 右カラム </div> 以上です。 理想のレイアウトが、GoogleマップもしくはYahoo!マップの様に組みたいのですが・・・ http://maps.google.co.jp/　Googleマップ http://map.yahoo.co.jp/　　Yahooマップ どなたかお力添えをお貸しください。 宜しくお願いします。

    • ベストアンサー
    • CSS
  • 【HP制作】２カラムを3カラムに変更したい！

    現在2カラムで運営しているサイトを3カラムに変更したいのですが、上手く出来ずに困っています。 現在は、左サイドメニュー(1)、メインメニュー(2)で運営しています。 ここに右サイドメニュー(3)を追加したく、下記の通りCSSに右サイドを追加したのですが、 画面を確認すると、左から(1)→(3)→(2)の順番で表示されてしまいます。 因みに、メインのfloatをrightに変更すると、左から(2)→(1)→(3)の順に入れ替わり、 どうしても(1)→(2)→(3)の順番になりません。 独学で、その場しのぎでHP作りをしてきたので、間違いに気づけずにおります。 お分かりの方がいらっしゃったら、どうかよろしくお願いします。 初心者レベルなので、分かり易く教えて頂けると助かります。 どうぞよろしくお願いします。 ■CSS /*ページ全体の幅、レイアウトをセンタリング*/ #container { width:1130px; margin:0px auto; text-align:left; } /*ヘッダー*/ #header { width:100%; padding: 20px 0; clear:left; } /*左サイド*/ #leftside { float: left; width: 200px; } /*メイン*/ #main { float: right;　←ここを変えるとレイアウトが崩れてしまいます。 width: 700px; } /*右サイド*/　　←ここを追加しました。 #rightside { float: right; width: 200px; } /*フッター（コピーライト）*/ #footer { padding: 30px 0; width:100%; clear:both; color: #666; text-align: center; border-top: 1px solid #ccc; } ■HTML <div id="container"> </div> <!--***** メイン部分 *****--> <div id="main"> </div> <!--*****// メイン部分 *****--> <!--***** 左サイドメニュー *****--> <div id="leftside"> </div> <!--*****// 左サイドメニュー *****--> <!--***** 右サイドメニュー *****-->　←ここを追加しました。 <div id="rightside"> </div> <!--*****// 右サイドメニュー *****-->

    • ベストアンサー
    • CSS
  • ３カラムのレイアウトにおいて・・・

    こんにちわ、サイトを趣味で作っている者です。 最近よくあるCSSでの３カラムレイアウトで作成してます。 上部にヘッダーその下にメニューとコンテンツ部分という構成ですが、 あるサイトにおいて、どのページを開いても、 ヘッダ部分とメニュー部分が表示されるようにアップしたので、 メニュー部分に追加があった時は、 全ページのメニュー部分を書き換えないといけない状態です。 １ページだけ更新したら良い様な作り方とか、 またアプリケーションってあるんでしょうか？ 大変な労力で困っています。 よろしくお願いします

    • ベストアンサー
    • HTML
  • ドリームウィーバーで画像を縮小

    すいません。ドリームウィーバーＣＳを使っているのですが、 ＣＳＳを使った部分でちょっと分からないことがあります。 divで囲って、幅250ピクセルに指定したとします。 そこへ幅500ピクセル、縦1000ピクセルを入れて、自動的に画像を縮小させたりする事は できるのでしょうか？ 事前に何かのソフトで画像を縮小してから放り込めば解決なのですが、大量の画像があるため 画像を加工に非常に時間がかかります。 いろいろＣＳＳのボックスなどの設定を試してはいるのですが、上手くいきません。 私が行いたいのは、上記のサイズのdivで、画像を入れると横幅は50％になりますよね？ その後自動的に縦幅も50％となり、画像が歪むことなく、縮小した画像が表示できたら良いと 考えています。 実際は画像の半分だけ表示されスクロールバーが付いたりします。（このあたりはオーバーフロー設定で変わりますが・・） もし上記が可能ならやり方を教えてもらえると助かります。

    • 締切済み
    • CSS
  • c言語

    c言語初心者です。 今jpgファイルで連番画像を取り扱っていて、 黒色（0,0,0）のレイヤーの上に画像を重ねているイメージで、、 １つフレームが進む毎に４ピクセルずつ、黒色のレイヤー上の画像を右にずらしていくようにプログラミングしているのですが、うまくいきません。 プログラミングの内容としては、 横幅が画像＋真っ黒の画像で均一になるように作っています。 具体的には、横幅が画像＋真っ黒の画像固定で５８０ピクセルとすると、 一つ目の画像は画像の横に、縦幅は画像と同じ幅で、横幅は画像の幅の右側に黒画像を連結させて合わせて５８０ピクセルとなるようにする。 二つ目の画像は、まず幅４ピクセルの黒画像があり、その右側に次のフレームの画像があり、そしてその横にまた、黒画像があり、 これらを足した横幅が５８０ピクセルとする。 という風に100枚ほど作りたいのですがなかなかうまくいきません。 opencvを扱える環境にいますがどういう風にプログラミングを書いたらいいかいまいちわかりません。 急いでいます。 教えてください。 よろしくお願いします。

  • cssでのヘッダー＋2カラム+フッターのレイアウトについて

    こんにちは。趣味のサイトをタグ打ち＋cssで作ってるのですが どうしても上手く行かない箇所があり、ご教授頂ければ、と思い、 投稿します。 私の使用しているOSはmacOS9.2、ブラウザはバグの多いIE5.0（苦笑） です。 レイアウトとしては最近よく見かける、ヘッダー＋2カラム＋フッター のような構図にしたいのですが、この様に崩れてしまいます。 http://meikyu.pop.cx/faq/test.gif ↑この、下の方の背景がヘッダの分だけ（？）白くなってるのを なんとかしたいのですが… （横のボーダーも途中で切れてしまってますし…） 記述した、htmlファイルと、cssファイルも上げてみました↓ htmlファイル http://meikyu.pop.cx/faq/ cssファイル http://meikyu.pop.cx/faq/main.css あちこちのcssリファレンスのサイト様等を参考に、2時間近く奮闘 しましたが、解決方法が分かりません。 解決方法でなくても、うちの環境では正常に見えるよ、 という報告だけでも頂けると嬉しいです。 どうかご助言よろしくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する