ADOBE DW 5.5 ヘッダとコンテンツの隙間
- 現在、独学でADOBE DREAM WEAVER CS 5.5でwebサイトを作成していますが、headerとcontentの間に10pixcelほどの隙間ができてしまいます。
- これを防ぐ方法はなにかありませんでしょうか？
- コードは下記となります。
- ベストアンサー
ADOBE DW 5.5 ヘッダとコンテンツの隙間
現在、独学でADOBE DREAM WEAVER CS 5.5でwebサイトを作成していますが、 headerとcontentの間に10pixcelほどの隙間ができてしまいます。「デザイン」ビューには 表示されないのですが、「ライブ」ビューやIE9やchromeでも隙間ができてしまっています。 これを防ぐ方法はなにかありませんでしょうか？コードは下記となります。 【HTML】--------------------------------------------------------- <html> <body> <div id="container"> <div id="header"> <img src="a.png" width="1000" height="150"> </div><!-- /#header --> <div id="content"> <p>aaa</p> <p>aaa</p> <p>aaa</p> </div><!-- /#content --> </div><!-- /#container --> </body> </html> 【CSS】--------------------------------------------------------- body{ background-color: #CCC; font: 16px/24px 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif; color: #000; } #container { margin:0 auto; width: 1000px; } #header { margin: 0 auto; padding: 0 auto; } #content { width:1000px; margin: 0 auto; padding: 0 20; background-color: #666; } よろしくお願いします。
- 3291982
- お礼率83% (62/74)
- ホームページ作成ソフト
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
それなら、画像がベースラインになっているからだと思います。 http://www.htmq.com/style/vertical-align.shtml 初期値がbacelineです。のでアルファベットのgjpqは下に少し出る設定です。それらがなくても、画像を想定のベースラインそろえて配置します。下にピョコンと出ている想定分あいてしまって見えるわけです。 そこで下ぞろえを指定すれば、希望の隙間がない状態になると思います。 セレクタ{vertical-align:bottom;}
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
div内の要素のマージンが利いているだけです。 HTMLは文書構造だけを記述しましょう。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より どのような名称が良いかは、新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) <body> <div class="header"> <h1><img src="a.png" width="1000" height="150" alt="タイトル"></h1> </div> <div class="section"> <h2>見出し</h2> <p>aaa</p> <p>aaa</p> <p>aaa</p> </div> <div class="footer"> <h2>文書情報</h2> </div> </body> ・・・ div.header,div.section,div.footer{margin:0 auto;width:100%;max-width:840px;} h1,h2,p{margin:0 auto;line-height:1.4em;}/* 上下のマージンを0 */ p{text-indent:1em;} この、margin:0 auto;でそのマージンは消えて、divドオシが密着するはずです。 同じ設定は、グループ化して記述する。 継承するプロパティは親ブロックに記述する。 HTMLは文書構造、スタイルシートはプレゼンテーションときちんと分けましょう。 ←構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )
お礼
上記コードは質問のために少し簡素化したもので、実際に作っているwebサイトで、インスペクタモードで確認すると隙間はheaderに起因しているものでした。bacelineをbottomに変更したり、headerのサイズを写真のサイズに固定したら、隙間は消えました。 今回は自分のCSSとHTMLの認識不足を痛感させられました。リンクしていただいたサイトなども拝見させて頂きましたが、「なんとなくわかったような気がする」という状態で実際はちゃんと理解できていないのが現状です。実際にサイトを作りながら、勉強していきたい思います。今回は本当にありがとうございました。
- naokita
- ベストアンサー率57% (1008/1745)
旧IE非対応で良いなら： #content p:first-child{ margin-top:0;} style属性で１個目のPだけに直接書くなら： <div id="content"> <p style="margin-top:0;">aaa</p> #content { } に border-top を設置する方法もあるし、 #content p { } でmarginをリセットしてpaddingに変更するとか色々・・・
お礼
p:first-chaildというCSSは初めて見ました。ちょっと自分にはまだレベルが高いようです。。。すみません。質問させて頂いたコードではPタグのmarginが原因だったようです。しかし上記コードは質問のために少し簡素化したもので、実際に作っているwebサイトで、インスペクタモードで確認すると隙間はheaderに起因しているものでした。1000X150pixcelの写真が原因だと思い、写真を外しても隙間は消えませんでした。header idのmarginやpaddingもすべて0になっています。header内に起因した隙間だが、marginやpadding以外に隙間や間隔を空けるものがあるかどうかわからず、行き詰ってしまっています。もう少し自分でいろいろ触ってみます。何かお気づきのことがありましたら、助言いただけるとうれしいです。ありがとうございました。
- DrFell
- ベストアンサー率55% (305/551)
headerとcontentの間に10pixcelほどの…… ではなく、おそらくcontent内部の問題かと思います。 #content p{margin:0;} を加えてみてはいかがでしょうか？ 今回のような問題の場合、構造を視覚的に表示すると、原因となっている場所が判明しやすいです。アウトラインを示す表示モードにブラウザを変えたり、cssで一時的に*{border 1px solid red}などとし、問題の空間がどこの領域に属するのかを見て見られてはいかがでしょうか？ その上で今回の場合、content内と判明すれば、その最初の中身と容易に想像がつくと思います。
お礼
回答ありがとうございます。今実際にためしてみました。確かに今回こちらに書いたコードはPタグが原因だったようです。こちらに書いたコードは少し簡素化したものなのですが、実際に今自分で作っているサイトはヘッダがあり、ナビゲーションバーがあり、その下にコンテンツがある状態です（1カラム）。それで、ヘッダの写真にアウトラインをつけてみたら、そのheader内の写真下のところに、隙間ができていました。写真が原因だと思い、写真を外しても隙間は消えませんでした。インスペクタモードで確認をしても、やはり、別のBOXのpaddingやmarginが影響している状態ではありませんでした。写真の大きさは1000 X 150pixcelで間違いないのですが。。。 もう少し自分でがんばってみます。何かお気づきの点がありましたら、教えて頂けるとうれしいです。アウトラインなどでの確認の方法はとても参考になりました。ありがとうございました。
関連するQ&A
- フロートをした場合の縦方向のマージンの指定方法
下記のソースをIEとFFで表示した場合に違いが出てしまいます。 希望はheader、container、footerの間を１０ｐｘずつにしたいです。 http://www.geocities.jp/multi_column/float/06.html こちらのページに「clear したボックスには margin-top は指定しないこと」とあるので、content、sidebarの下マージンを１０ｐｘにしてみました。 IEではsidebarの下マージンが表示されません。 なぜかsidebarよりcontentが長くなるとcontentの下にマージン１０ｐｘが表示されます。 contentとsidebarのどちらが長くなっても同じように表示させるにはどのような方法がありますか？ また、この現象の原因を教えてください。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http equiv="Content-Style-Type" content="text/css" /> <title>サンプル</title> </head> <body> <div id="header"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="container"> <div id="content"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="sidebar"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </div> <div id="footer"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </body> </html> <style> *{ margin: 0; padding: 0; } body{ text-align: center; } div#header{ width: 900px; margin-left: auto; margin-right: auto; margin-bottom: 10px; background-color: #FFCCCC; } div#container{ width: 900px; margin-left: auto; margin-right: auto; } div#content{ float: right; width: 660px; background-color: #FFCCCC; margin-bottom: 10px; } div#sidebar{ float: left; width: 230px; background-color: #FFCCCC; margin-bottom: 10px; } div#footer{ clear: both; width: 900px; margin-left: auto; margin-right: auto; background-color: #FFCCCC; } </style> 長くなって申し訳ありません。よろしくお願い致します。
- ベストアンサー
- HTML
- divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。
divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・？
- ベストアンサー
- CSS
- ページ上部の余白をなくしたい（ＣＳＳ）
初歩的な質問で申し訳ありません。 以下のような記述なのですが、 <div id="container">の上部にスキマが出来てしまいます。 背景に仮色をつけたりして確認しましたが、 どうしても余白をなくすことができません。 marginの指定の仕方がおかしいのでしょうか？ ご指摘いただけると助かります。 /* HTML（単純に書くとこんな感じです）*/ <body> <div id="container"> <div id="header"> <div> </div> </body> /* CSS */ body { margin : 0; padding : 0; background-color : #eeeeee; font-size : 12px; line-height : 150%; color : #333333; font-family : arial, helvetica, sans-serif, Verdana, Geneva, ＭＳゴシック; text-align : center; } #container { margin : 0 auto; padding : 0; width : 751px; text-align : left; background-color : #ffffff; } #header { margin : 0 auto; padding : 0; width:745px; height:120px; background: transparent url(***.jpg) ; background-repeat: no-repeat; }
- ベストアンサー
- HTML
- CSSで文字が流れ込んでしまいます
CSS勉強中ですが、このように組んだらFireFoxで見ると左のコンテンツより右のテキストを増やした場合に左の<div id="leftside">の領域まで文字が行ってしまいます。 clear: bothを入れるのかなぁと思いつつ、色々なところに入れてみたのですが、変らなくて・・・。 どのようにしたらいいでしょうか。 body { margin-top: 0; background: #30689D; text-align: center; } #header{ width: 760px; margin-left: auto; margin-right: auto; background: #E2E2E2; } #container{ width: 760px; margin-left: auto; margin-right: auto; background: #FFFFFF; text-align: left; } #wrap { padding: 0px; } #leftside{ width: 170px; float: left; background: #FFFFFF; } #photo{ width: 570px; float: left; margin-left: 10px background: #FFFFFF; } #news{ width: 570px; margin-left: 10px background: #FFFFFF; } #footer{ width: 760px; margin-left: auto; margin-right: auto; padding: 10px 0px 10px 0px; background: #E2E2E2; text-align: right; } p { margin: 0; padding: 0; } -----HTML <div id="header">ヘッド</div> <div id="container"> <div id="wrap"> <div id="leftside"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </div> <div id="photo"> <p>写真を入れたいところ</p> </div> <div id="news"> <p>ここの文字をたくさん入れて下に増えるとと左に文字が流れ込んでしまいます。</p> <div id="footer">フッターく</div>
- ベストアンサー
- HTML
- CSSでのレイアウトが崩れてしまうんです。
お世話になります。ＣＳＳビギナーなのですが、どうかご教授ください。800pxの画面のセンター表示のサイトを作りたいのですが、divでheader800px/container800px/contents600px（contensの中にleftmenu150px/centermenu450px/footer600pxとさらにdiv分けしてあります。）/leftmenu200pxという具合にレイアウトしたいのですが、leftmenuがcontensの右横にきてくれません。footerの下に表示されます。さらに言うとcontens自体が真ん中に表示されてしまいます。float:leftを指定するとブラウザ画面の左側にいってしまいますし...。これはどうしてでしょう？素人ゆえ基本的なことを見落としているかもしれませんがどなたか教えていただけないでしょうか？ ■HTML </head> <body> <div id="header">省略</div> <div id="container">省略</div> <div id="contens"> <div id="leftmenu">省略</div> <div id="centermenu">省略</div> <div id="footer">省略</div> </div> <div id="rightmenu">省略</div> </body> </html> ■CSS div#header { padding-top:0px; width:800px; margin-left:auto; margin-right:auto; background-color:#00CC00; } div#container { width:800px; margin-left:auto; margin-right:auto; } div#contens { width:600px; margin-left:auto; margin-right:auto; } div#leftmenu { width:150px; float:left; } div#centermenu { width:450px; float:left; margin-left:auto; margin-right:auto; background-color:#FFFFFF; } div#footer { float:left; width:600px; padding-top:50px; } div#rightmenu { width:200px; float:right; background-color:rgb(147,182,110); padding-bottom:5px; } body { background-attachment:scroll; background-color:#FFFFFF; background-image:url(../image/bg.jpg); background-repeat:no-repeat; background-position:center top; }
- ベストアンサー
- ブログ
- 枠線でメイン部分を囲み、フッターを一番下にもってくるには？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css"> <!-- html,body { margin:0px; padding:0px; height:100%; } div#flame { width: 1000px; height:100%; margin-top: 10px; margin-left: 10px; padding: 20px; border-color: #999999; border-style: solid; border-width: 1px; } div#header { background-color:#999999; color:white; } div#container { background-color:#ffffee; } div#left { background-color: #cccccc; width: 200px; left: 0px; top: 0px; } div#content_right { background-color: #cccccc; margin-left: 210px; font-size: 10pt; line-height: 140%; left: 0px; } div#footer { width:100%; background-color:666666; color:white; } --> </style></head> <body> <div id="flame"> <div id="header">ヘッダー</div> <div id="content_right">メイン記事テキスト</div> <div id="left">左メニュー部分</div> </div> <div id="footer">フッター</div> </body> </html>
- ベストアンサー
- HTML
- CSSについて 入力フォームの上下揃い
CSSについて 入力フォームの上下揃い sample.css @CHARSET "windows-31j"; html,body,div,span,h1,h2,h3,h4,h5,h6{margin:0; padding:0; font-size:100%} html { height:100%; } body { height:100%; } body > #container { height: auto; z-index:0; } #container{ width:780px; margin-top:auto; margin-left:auto; margin-right:auto; margin-bottom:auto; position:relative; min-height:100%; border:1px solid #999; } #header{ margin: 0; padding: 0px 0px 0px 0px; width: 100%; height: 100px; background-color:#4682B4; z-index:1; } #main{ padding:auto; width:100%; backgruond-color:#87CEEB; z-index:1; } #footer{ position:absolute; bottom:0px; width: 100%; height: 100px; background-color:#4682B4; z-index:1; } index.html <div id="container"> <div id="header"></div> <div id="main"> <div class="vartical-align"> <form action=""> <input type="text" name="id"> <input type="password" name="pas"> </form> </div> </div> <div id="footer"></div> </div> 上記の用なCSSにて入力フォーム等を、id=main内にて上下中央揃えにしたいのですが どうした良いでしょう？
- 締切済み
- HTML
- 背景の色がコンテンツ部分にも表示されてしまいます
サイトに背景色をつけて、コンテンツ部分は白にしたのですが、どうしても背景色が表示されてしまいます。今はbody以外の各divの背景を白にしていますが、contentsの右下が背景色が表示されてしまします。 お手数ですが、ご指摘頂けると幸いです。よろしくお願いいたします。 <html> <body> <div id="wrapper"> <div id="header"></div> <div id="contents"> <div id="banner"></div> <div id="navi"> <h2><a href="../service/index.html"><em>あああ</em></a></h2> 中略 </div> <div id="bread"><a href="index.html">トップページ</a> > あああ</div> <div id="main"> <p>あああ</p> </div> <div id="sidenavi"> <h3>あああ</h3> <p>あああ</p> </div> <div id="pagetop"><a href="#"></a></div> <div id="footer">Copyright (c) 2009 All Right Reserved </div> </div> </body> </html> <css> body { text-align: center; margin: 0px; padding: 0px; background: #FFCCFF; } #wrapper { text-align: left; margin: 0px auto; padding: 0px; height: 800px; width: 850px; background: #FFFFFF; } #header { margin: 0px; padding: 0px; height: auto; width: 850px; background: #FFFFFF; } #contents #banner { background: url(image/banner.jpg) no-repeat; margin: 0px; padding: 0px; height: 304px; width: 850px; } #contents #navi { background: url(image/menu.jpg) no-repeat; margin: 0px; padding: 0px; height: 61px; width: 850px; } #contents #navi2 { background: url(image/menu2.jpg) no-repeat; margin: 0px; padding: 0px; height: 61px; width: 850px; } #navi h2 { font-size: 12px; margin: 0px; padding: 0px; float: left; } #navi em { visibility: hidden; } #navi2 h2 { font-size: 12px; margin: 0px; padding: 0px; float: left; } #navi2 em { visibility: hidden; } #contents { margin: 0px; padding: 0px; height: 500px; width: 850px; background: #FFFFFF; } #contents #sidenavi p { font-size: 95%; line-height: 1.1em; margin-right: 5px; margin-left: 5px; } #sidenavi h3 { font-size: 105%; font-weight: bold; border-left: 7px solid #FF3366; padding-left: 5px; background: #FFCC33; margin: 0px; padding-top: 5px; padding-bottom: 5px; } #navi a { margin: 0px; padding: 0px; height: 61px; width: 169.5px; display: block; text-decoration: none; } #navi2 a { margin: 0px; padding: 0px; height: 61px; width: 170px; display: block; text-decoration: none; } #contents #main { margin: 10px 0px 0px; padding: 0px 10px 10px; height: auto; width: 610px; float: left; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "メイリオ"; background: #FFFFFF; } #contents #pagetop { clear: both; background: #FFFFFF; margin: 0px; padding: 0px; } #contents #sidenavi { margin: 10px 5px 0px 0px; padding: 0px; float: right; width: 200px; border: 1px dashed #FF3399; background: #FFFFFF; } #footer { font-size: 90%; color: #FF3366; text-align: center; margin: 0px; padding: 10px 0px 0px; clear: both; border-top: 1px dotted #333333; border-right-color: #333333; border-bottom-color: #333333; border-left-color: #333333; background: #FFFFFF; } #main p { font: bold 120% "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; color: #FF3399; padding: 0px; margin-top: 5px; margin-bottom: 5px; } #pagetop img { text-align: center; padding-top: 10px; margin: 0px; padding-bottom: 10px; padding-left: 5px; } .p1 { font-size: 130px; color: #FF3366; padding: 10px; width: 590px; border: 2px dashed #FF3399; background: #FFCCFF; margin: 10px; text-align: center; } #main img { margin: 0px; padding: 0px 0px 10px; } #contents #bread { margin: 5px 0px 0px; padding: 5px 5px 0px 10px; font-size: 100%; width: 830px; }
- 締切済み
- HTML
- ページの一番上にできた余分な余白の消し方
ページの一番上に800×100の画像を用意し、それを背景画像として設定。 その上に<h1>のタイトルを表示しようとすると、 背景画像の上に無駄な余白ができてしまいます。 何か間違えているのでしょうか？この余白の消し方を教えてほしいです。 よろしくお願いいたします。 <html> <head> <title></title> <style type="text/css"> body { margin: 0; padding: 0; text-align: center; background-color: #000; color: #333333; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; text-align: center; } div#container { width: 800px; background-color: #ffffff; text-align: left; margin: 0 auto; padding: 0; } div#header { width: 800px; height: 100px; background-image: url(image/sample.jpg); background-repeat: no-repeat; padding: 0; margin: 0; } h1 { padding-top: 15px; padding-right: 0; padding-bottom: 15px; padding-left: 0; font-size: 15px; font-weight: normal; line-height: 15px; margin-top: 30px; margin-right: 0px; margin-bottom: 0; margin-left: 0; color: #000; } div#mainContent { padding: 5px 15px 0 15px; } </style> </head> <body> <div id="container"> <div id="header"> <h1>テスト</h1> </div> </div> <div id="mainContent"></div> </body> </html>
- ベストアンサー
- HTML
- WordPressのヘッダー上部の余白
WordPressでテーマを自作しているのですが、ヘッダー上部に余白ができてしまいます。 調べてみると、多くの場合は http://hello-design-world.com/2011/04/wordpress31head.html のように管理バー関連の設定に問題があったようなのですが、私の場合は管理バーの表示を外しても直りません。 以下のようなソースでやっているのですが、何が原因かわかる方いたら教えてください！ ※まだ作成途中なので、ファイルは以下の２つだけです。 ----------------------php--------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/TR/xhtml/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;charset=<?php bloginfo('charset'); ?>" /> <title><?php bloginfo('name'); ?></title> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" /> </head> <body> <!-- コンテナ --> <div id="container"> <!-- ヘッダー --> <div id="header"> <h1><a href="<?php echo home_url(); ?>"> <?php bloginfo('name'); ?></a></h1> <p id="desc"><?php bloginfo('description'); ?></p> </div> <!--ヘッダー終わり --> <!-- コンテンツ --> <div id="content"> <?php if(have_posts()): while(have_posts()): the_post(); ?> <div class="post"> <h2><a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></h2> <p class="postinfo"> <?php echo get_the_date(); ?> <?php the_time(); ?> | カテゴリー：<?php the_category(', '); ?> </p> <?php the_content(); ?> </div> <?php endwhile; endif; ?> </div> </div> </body> </html> ----------------------css--------------------- /* Theme Name: Testtheme Theme URI: Description: テストテーマ */ /* コンテナ */ div#container { width: 1000px; margin-right: auto; margin-left: auto; } /* ヘッダー */ div#header {background-image: url(header.jpg); margin-top: 0px; margin-left: 0px; margin-bottom: 20px} div#header h1 {font-size: 1.875em; font-weight: bolder; padding: 10px 0px 0px 10px; margin-top: 0px} div#header h1 a {text-decoration: none; color: #ff8c00} div#header p#desc {font-size: 1em; color: #ffffff; font-weight: bolder; padding: 0px 0px 10px 10px} /* 記事 */ div.post {padding: 15px; margin-bottom: 30px} div.post h2 {background-color: #1e90ff; font-size: 1.3em; padding: 10px; margin: 0} div.post h2 a {text-decoration: none; color: #ffffff} div.post p {font-size: 0.875em; line-height: 1.6; margin-top: 10px} p.postinfo {color: #0c8bcd; text-align: right; margin: 20px 0 0; clear: both} p.postinfo a {color: #0c8bcd}
- ベストアンサー
- ブログ
お礼
vertical-alignをbottomに変更したら、直りました！！またこの方法以外にheaderのサイズが指定してなかったので指定してみると、その方法でも直りました！！bacelineについて画像であってもgjpqがあることを想定して一応その分下に余白を作っておくということでしょうか？？HTMLとCSSの組み合わせで解決の方法が何通りもあり、単純な自分としてはこういうことが混乱のもとになってしまいます。実はまだ他にもいろいろお伺いしたいことがあるのですが、今自分で試行錯誤しています。またどうしてもわからないことがあれば、お伺いをしたいと思います。勉強になりました！本当にありがとうございました！！