CSSなどのことはほぼ分からないのですが、詳しい方がいましたら是非お力になっていただきたいと思っております。お願いします。

スティンガー3を使用しております。


header.php を変更したときに思ったようにならなかったので追加したコードを削除したところでおかしくなったと思います。変更内容はトップページ以外、ヘッダー画像をでないようにしようとしていました。

現象は、ヘッダーの画像を横並びに配置していたのですが、縦に二つ並ぶようになりました。

この現象と同時に気がついた異変がまだありまして、h2の装飾を子テーマを使って変更していたんですが、これの装飾がなくなりました。(現在は戻ってはいますが、子テーマで変更しようとしても反映されず、親テーマを変更すると反映されます。)

抜粋記事の枠の大きさなどわかりやすいところを子テーマを使い変更してみましたところ、きちんと反映されました。

ヘッダー画像が回り込まなくなったことと、子テーマで変更できなくなったものがあることの関係は分からないんですが、かれこれ半日以上調べていたのですが完全にいき詰まったのでこちらに質問させていただきました。

もしわかる方がいましたらお力を貸していただきたいので宜しくお願いいたします。


http://arromanches-ngy.sakura.ne.jp/wp/?p=99


問題のサイトになります。トップ画像の下にある「広告のソースコード」という文字がトップ画像の右上に来るはずなんですが・・・。(CSSに関しては一度きちんと横並びになっていましたので問題ないと思います。)

このQ&Aに関連する最新のQ&A

A 回答 (4件)

サイトのどこにおいても良いように書き換えた。


サーバーのどこかに置いてください。

★HTMLとCSSの基本を身につけましょう。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』であって、デザインのためではありません。
★スタイルシートの
5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
は、絶対にひつような知識。これがないとDIVをデザインのために書いたり、煩雑なHTML/CSSになる。

頑張ってください。

<style type="text/css" media="screen">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;line-height:1.8em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;position:relative;}
div.header h1,div.header h2{width:49%;display:inline-block;position:relative;}
div.header h1 img,div.header h2 img{width:90%;height:auto;}
div.header div.nav{width:100%;line-height:2em;text-align:center;}
div.header div.nav a{text-decoration:none;font-weight:bold;color:black;}
div.header div.nav ul,div.header div.nav ul li{list-style:none;margin:0;padding:0;}
div.header div.nav ul li{display:inline-block;width:13%;position:relative;margin-left:1px;font-weight:bold;}
div.header div.nav ul li+li:before{content:"|";position:absolute;left:-1px;top:0;}
div.header div.nav ul li ul{position:absolute;top:2em;width:100%;display:none;z-index:10;}
div.header div.nav ul li:hover ul{display:block;}
div.header div.nav ul li ul li{font-weight:normal;width:100%;}
div.header div.nav ul li ul li:before{content:"";}
div.section h2,div.section p,div.section div.section,div.section div.aside{width:auto;margin:0 300px 0 0;min-width:0;border-color:gray;border-style:dotted;}
div.section{min-height:800px;}
div.section div.section{min-height:0;}
div.section div p{width:auto;margin:0;}
div.section div.nav{position:absolute;width:295px;top:0;right:0;font-size:0.95em;}
div.section div.nav h4{line-height:33px;border-bottom:ridge 5px rgb(255,100,100);}
div.section div.nav h4:before{content:url(/wp/wp-content/uploads/2014/07/icon_sidebar1.png);position:relative;top:10px;}
div.section div.nav ul{list-style-type:none;line-height:1.8em;}
div.section div.aside{font-size:0.95em;}
div.section div.aside h4{line-height:3em;margin:1em 2em;text-align:center;font-size:1.5em;}
div.section div.aside dl{margin-left:170px;line-height:1.6em;position:relative;}
div.section div.aside dt{position:relative;font-widght:bold;}
div.section div.aside dd{min-height:2em;margin-left:0;text-indent:1em;}
div.section div.aside dd a{position:absolute;background-color:rgb(255,200,200);width:8em;text-decoration:none;display:block;right:10px;}
div.section div.aside dt a:before{content:"";background-image:url(/wp/wp-content/themes/stinger3ver20140327/images/no-img.png);position:absolute;top:0;left:-160px;width:110px;height:110px;display:block;background-size:cover;}
div.section h2{border-width:1px 1px 0 1px;}
div.section div.section,div.section * p{border-width:0 1px;}
div.section * p{border:none;}
div.section div.aside{border-width:0 1px 1px 1px;}
div.section div.aside h4{border-style:dotted;border-width:1px 0px;border-color:gray;background-color:rgb(200,200,200);}
div.section h2,div.section p,div.section div.section{background-color:white;}
div.section * p{background-color:transparent;}
div.header div.nav ul li ul li{background-color:rgb(255,240,240);}
body{background-image:url(/wp/wp-content/uploads/2014/07/04-polish-wood.png);}
div.section div.aside dl a{text-decoration:none;}
div.section div.aside dl a:hover{text-decoration:underline;}
div.section div.aside{background-color:rgb(255,225,225);}
-->
</style>
    • good
    • 0
この回答へのお礼

詳しいご回答、ありがとうございました。

知識がないので参考にさせていただいて、勉強させてもらいます。

お礼日時:2014/07/20 21:20

そしてスタイルシートを遊びで書いてみました。


・・HTMLをどこかのサイトのデザインに合わせてスタイルシートを書くと言うのは、私にとっても、とても良い練習にもなるので・・

 こんな簡単な判りやすいものになるのです。細かいところは手を入れていませんが、多分あなたの期待に近いものじゃないかと・・。

★リキッドなのでスマホ以上の幅640pxがあればOK。
 ウィンドウを小さくしてみる。
★印刷(media:print)や携帯用(media:handheld)は書いてません。御随意に

<style type="text/css" media="screen">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;line-height:1.8em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;position:relative;}
div.header h1,div.header h2{width:49%;display:inline-block;position:relative;}
div.header h1 img,div.header h2 img{width:90%;height:auto;}
div.header div.nav{width:100%;line-height:2em;text-align:center;}
div.header div.nav a{text-decoration:none;font-weight:bold;color:black;}
div.header div.nav ul,div.header div.nav ul li{list-style:none;margin:0;padding:0;}
div.header div.nav ul li{display:inline-block;width:13%;position:relative;margin-left:1px;font-weight:bold;}
div.header div.nav ul li+li:before{content:"|";position:absolute;left:-1px;top:0;}
div.header div.nav ul li ul{position:absolute;top:2em;width:100%;display:none;z-index:10;}
div.header div.nav ul li:hover ul{display:block;}
div.header div.nav ul li ul li{font-weight:normal;width:100%;}
div.header div.nav ul li ul li:before{content:"";}
div.section h2,div.section p,div.section div.section,div.section div.aside{width:auto;margin:0 300px 0 0;min-width:0;border-color:gray;border-style:dotted;}
div.section{min-height:800px;}
div.section div.section{min-height:0;}
div.section div p{width:auto;margin:0;}
div.section div.nav{position:absolute;width:295px;top:0;right:0;font-size:0.95em;}
div.section div.nav h4{line-height:33px;border-bottom:ridge 5px rgb(255,100,100);}
div.section div.nav h4:before{content:url(http://arromanches-ngy.sakura.ne.jp/wp/wp-conten …);position:relative;top:10px;}
div.section div.nav ul{list-style-type:none;line-height:1.8em;}
div.section div.aside{font-size:0.95em;}
div.section div.aside h4{line-height:3em;margin:1em 2em;text-align:center;font-size:1.5em;}
div.section div.aside dl{margin-left:170px;line-height:1.6em;position:relative;}
div.section div.aside dt{position:relative;font-widght:bold;}
div.section div.aside dd{min-height:2em;margin-left:0;text-indent:1em;}
div.section div.aside dd a{position:absolute;background-color:rgb(255,200,200);width:8em;text-decoration:none;display:block;right:10px;}
div.section div.aside dt a:before{content:"";background-image:url(http://arromanches-ngy.sakura.ne.jp/wp/wp-conten …);position:absolute;top:0;left:-160px;width:110px;height:110px;display:block;background-size:cover;}
div.section h2{border-width:1px 1px 0 1px;}
div.section div.section,div.section * p{border-width:0 1px;}
div.section * p{border:none;}
div.section div.aside{border-width:0 1px 1px 1px;}
div.section div.aside h4{border-style:dotted;border-width:1px 0px;border-color:gray;background-color:rgb(200,200,200);}
div.section h2,div.section p,div.section div.section{background-color:white;}
div.section * p{background-color:transparent;}
div.header div.nav ul li ul li{background-color:rgb(255,240,240);}
body{background-image:url(http://arromanches-ngy.sakura.ne.jp/wp/wp-conten …);}
div.section div.aside dl a{text-decoration:none;}
div.section div.aside dl a:hover{text-decoration:underline;}
div.section div.aside{background-color:rgb(255,225,225);}
/* aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow */
-->
</style>
    • good
    • 0

後半です。


 説明はは不要だと思います。
 HTMLにはプレゼンテーションに関する事は一切書かれていませんから、後は好きにデザインできます。デザインの重度も格段にましますから、ガラケーやプリンターなど端末に合わせてリキッドにするなり、メディアクウェリー使ってディスプレイによってスタイル帰るなり・・
 もちろん、HTML・・・この場合テンプレートのメンテナンス性もデザイン関係ないのでよくなりますよね。
★タブにも度したら
Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
でチェックしておくとよいです。

__<div class="aside">
___<h4 class="kanren">関連記事</h4>
___<dl>
____<dt><a href="http://arromanches-ngy.sakura.ne.jp/wp/?p=61">超初心者が超初心者に伝えるcss講座になってしまった一件</a></dt>
____<dd>記事一覧をブロック化からのリンク仕様</dd>
____<dd>今日もコツコツカスタマイズな1日。</dd>
____<dd>こういうことで、ほ</dd>
____<dd><a href="http://arromanches-ngy.sakura.ne.jp/wp/?p=61">この記事を読む</a></dd>
____<dt><a href="http://arromanches-ngy.sakura.ne.jp/wp/?p=39">サイドバーを色々とカスタム</a></dt>
____<dd>もう朝です・・・。いやぁ、それにしても時間の過ぎることの早いこと早いこと。</dd>
____<dd>他の先生方のように</dd>
____<dd><a href="http://arromanches-ngy.sakura.ne.jp/wp/?p=39">この記事を読む</a></dd>
____<dt><a href="http://arromanches-ngy.sakura.ne.jp/wp/?p=53">やっとみつけた!記事本文の公開日の装飾部分</a></dt>
____<dd>アロマンシェスウェブ担当のミツロックでございます。</dd>
____<dd>いやぁ、これだけのことにどんだけ時間を使う</dd>
____<dd><a href="http://arromanches-ngy.sakura.ne.jp/wp/?p=53">この記事を読む</a></dd>
___ _<dt><a href="http://arromanches-ngy.sakura.ne.jp/wp/?p=25">記事一覧をカード型に分けてスッキリ</a></dt>
____<dd>こんばんわ。アロマンシェスのブログサイトに記念の初投稿させていただきますWEB担当ミツロックです。</dd>
____<dd><a href="http://arromanches-ngy.sakura.ne.jp/wp/?p=25">この記事を読む</a></dd>
__ </dl>
__</div>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2013-03-03</dd>
__</dl>
_</div>
</body>
</html>

【前回の一部訂正】
 div class="section">
  <h2>見出し</h2>
  <p class="breadcrumb list">ホーム &gt; BLOG &gt;</p>
                            ↑>を&gt;に

   <label></label>は削除
    • good
    • 0

 残念ですが、そのテンプレートでは細工は不可能です。

あなたでなくてもソースを見てうんざりするでしょう。
 スタイルシートを用いてデザインする最大の目的は、御存知のように「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」の分離です。
 そのためには、『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。( http://jigsaw.w3.org/css-validator/ )』
 ところが、そのURLを
Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
 でチェックされると分かるように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" media="screen">
<!--
-->
_</style>
</head>
<body>
_<div class="header">
__<h1><a href="/"><img src="/wp/wp-content/uploads/2014/07/wp_header.png" width="473" height="343" alt="アロマンシェフブログ 少しだけほっと一息よろしいでしょうか?"></a></h1>
__<h2><a href="/"><img src="/wp/wp-content/uploads/2014/07/wp_header.png" width="473" height="343" alt="アロマンシェフブログ 少しだけほっと一息よろしいでしょうか?"></a></h2>
__<div class="nav">
___<ul>
____<li><a href="/wp/" title="トップページ">HOME</a></li>
____<li><a href="/HP">OFFICIAL-HP</a></li>
____<li><a href="/wp/Blog">BLOG</a>
_____<ul>
______<li><a href="/wp/?cat=4">店長</a></li>
______<li><a href="/Therapist">セラピスト</a></li>
_____</ul>
____</li>
____<li><a href="/wp/news">NEWS</a>
_____<ul>
______<li><a href="/Event">イベント</a></li>
_____</ul>
____</li>
____<li><a href="/Job">JOB OFFER</a></li>
____<li><a href="/Hotel">HOTEL-LIST</a></li>
____<li><a href="/wp/?cat=6">CUSTOM</a></li>
___</ul>
__</div>
_</div>
_<div class="section">
__<h2>見出し</h2>
__<p class="breadcrumb list">ホーム &gt; BLOG ></p>
__<div class="section">
___<h3>トップ画面以外でヘッダー画像を非表示に・・・が、悲劇が訪れた</h3>
___<p>公開日: 2014/07/19 : 最終更新日:2014/07/20 BLOG, カスタム 備忘録, ミツロック</p>
___<p>ウェブ担当とは名ばかりのミツロックでございます。この記事は、只今ミツロックが遭遇中の悲劇の備忘録です。</p>
___<p>そんなのこうこうこうやれば直るんじゃね~?ってわかる方いましたら是非コメントお願いします・・・。</p>
___<p>本日のカスタム内容は</p>
___<ol>
____<li>トップ画面を2分割に分ける ⇒ とりあえずは成功しました。</li>
____<li>トップ画面以外でヘッダー画像を非表示に ⇒ 悲劇が起こりました。</li>
___</ol>
___<p>という内容となっております。</p>
___<p>(1)トップ画面を(2)分割に分ける</p>
___<p>参考にさせていただいたサイトはこちら</p>
___<p>画面全体に画像を使っている方は、こちらの記事にあるステップ2のheader.phpに記述を加えるにある「広告用ソースコード」という言葉が変更後、上に出ればもうできたも同然(だと思います。)</p>
__</div>
__<div class="nav">
___<form method="get" id="searchform" action="/wp/">
____<p><label class="hidden" for="s"></label>
____<input value="" name="s" id="s" type="text">
____<input style="width: 48px; height: 48px;" src="/wp/wp-content/themes/stinger3ver20140327/images/wp_sarch" alt="検索" id="searchsubmit" value="Search" type="image"></p>
___</form>
___<div>
____<h4>アロマンシェスより一言</h4>
____<p>当店セラピスト、スタッフのブログです。</p>
____<p>ウェブ担当ミツロックのワードプレスにおけるカスタム備忘録も隅っこの方に書かせてもらってます。</p>
____<p>出張リクラゼーションサロンin名古屋「アロマンシェス」<img src="/wp/wp-content/uploads/2014/07/titlelogo01.png" alt=""></p>
___</div>
___<div>
____<h4>カテゴリ別一覧</h4>
____<ul>
_____<li><a href="/wp/?cat=3" >BLOG</a> (3)</li>
_____<li><a href="/wp/?cat=6" >カスタム 備忘録</a> (5)</li>
_____<li><a href="/wp/?cat=7" >ミツロック</a> (3)</li>
____</ul>
___</div>
___<div>
____<h4>アーカイブ</h4>
____<ul>
_____<li><a href="/wp/?m=201407">2014年7月</a></li>
____</ul>
___</div>
___<div>
____<h4 class="menu_underh2">メタ情報</h4>
____<ul>
_____<li><a href="/wp/wp-login.php">ログイン</a></li>
_____<li><a href="/wp/?feed=rss2">投稿の <abbr title="Really Simple Syndication">RSS</abbr></a></li>
____</ul>
___</div>
__</div>

以後は次に・・
    • good
    • 1

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QDREAMWEAVERによるレイアウト作成についての質問です。

DREAMWEAVERによるレイアウト作成についての質問です。
「DREAMWEAVERCS5」を利用してHPを作成してます。現在レイアウトを作成しているのですが、
「AP Divを描画」を利用すれば簡単に作成できるのですが、「Float」を利用して作成する
とうまくいきません。購入した本などによると「Float」を利用しているケースが多いようで
すが、何かそうすることでSEO対策などメリットがあるのでしょうか?よろしくお願いします。

Aベストアンサー

コードではなく「デザイン」で配置していると思いますが、
positionとz-indexでの配置ですね・・・
表示環境で崩れる可能性があるので、
カラムを組む場合には、Floatを使うのが一般的です。
(確かに賛否両論ありますが)
簡単に作るという事は、少なからずリスクがあるという事です。
文字サイズなどを変更したら重なったり消えたりするのは、デメリットですよね。
ただし、
コンテンツや隙間などを
しっかり考慮・理解して作る分には問題ありません。
ただ、文章量などが増えるとその都度CSSも変更しなければいけないし、
複数ページなら同じCSSを使いまわすfloatの方が便利だし、
そのコンテンツや表示に合わせてのケースバイケースって事になりますね。

SEOに関しては、文章の流れを変更出来るので、
floatでもpositionでも多少は優位にする事は出来るでしょう。
つまり、SEOの問題では無いという事です。

QCSSで先に大枠レイアウトを作成し、その後コンテンツを入れるとレイアウト崩れが起こる

掲題のとおり、先にCSSでヘッダー、コンテンツ枠、その中に左部分、右部分、そしてフッターを作っておき、それをコピペしてコンテンツを入れていくと、フッターがコンテンツにめり込んできます。clearを使ってますし、コーディングには思い当たる節はありません。これを再度、上から順番に組みなおすと、今度はきちんと表示されます。また、フッターの部分のCSSの記述を最下部にもってきても、やはりめり込みます。どなたかこの理由が分かる方がいらっしゃいましたら、ご教授願います。

Aベストアンサー

CSSで

body {
margin : 0;
padding : 0;
}

というようにまずすべて0にしてやってみてください。

Q鉄道模型を入れるケースについて

鉄道模型のレイアウトを入れるケースについて教えてください。
ホコリ対策でケースに入れたいのですが、かなり大きいです。
(幅220×奥95×高35cm位)
こんなに大きなものを入れる(かぶせる)ケースなんて可能でしょうか?(オーダー?自作でできますか?)
アクリルなどのケースを使用されている方がいらしたら教えてください。
よろしくお願いします。

Aベストアンサー

「はざい屋」と言うアクリル板材専門店があります。
サイズは、2700×1350位まである様です。
このサイズの板材が、5mm厚で30000円ぐらいなので、箱状にしたら結構な値段になると思いますがオーダーは出来る様です。
参考URLで見積りを取れます。

参考URL:http://www.hazaiya.co.jp/

Qテーブルを挿入すると他のCSSと干渉してレイアウトが崩れてしまいます。

いくらやっても作成したテーブルを挿入するととの画像やメニューと干渉してレイアウトが崩れてしまいます。テーブルを取るとレイアウトが戻ります。。。
文字量の関係でテーブルだけ記入しました。
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
/*テーブル*/

table {position:absolute; left:200px; top:450px;
font-family:MS,UI,Gothic,標準;
FONT-SIZE: 11px;
COLOR: #666666;
font-weight: lighter;
text-align:center;
border-collapse:collapse
}
caption {
font-family:MS,UI,Gothic,標準;
FONT-SIZE: 11px;
COLOR: #666666;
font-weight: lighter;
text-align:left;

}

table,th,td {border:1px solid}


div {margin:20px}
-->
</style>
</head>

<body>
<div>


<table>
<caption>ジャズシューズサイズ表</caption>

<tr><th width=70px>Sansha</th><td width=30px>2</td><td width=30px>3</td><td width=30px>4</td><td width=30px>5</td><td width=30px>6</td>
<td width=30px>7</td><td width=30px>8</td><td width=30px>9</td><td width=30px>10</td><td width=30px>11</td>
<td width=30px>12</td><td width=30px>13</td><td width=30px>14</td><td width=30px>15</td>
</tr>

<tr><th>(cm)</th><td>21</td><td>21.5</td><td>22</td><td>22.5</td><td>23</td><td>23.5</td><td>24</td>
<td>24.5</td><td>25</td><td>25.5</td><td>26</td><td>26.5</td><td>27</td><td>27.5</td>
</tr>
</table>
</div>
</body>

いくらやっても作成したテーブルを挿入するととの画像やメニューと干渉してレイアウトが崩れてしまいます。テーブルを取るとレイアウトが戻ります。。。
文字量の関係でテーブルだけ記入しました。
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
/*テーブル*/

table {position:absolute; left:200px; top:450px;
font-family:MS,UI,Gothic,標準;
FONT-SIZE: 11px;
COLOR: #666666;
font-weight: lighter;
text-align:ce...続きを読む

Aベストアンサー

空いている右下(left:200px top:450px)にテーブルをおきたくて、そのように書いてあるのに、他と重なってしまうっていう状況が今ひとつわからないのですが、ポジションで指定した位置に表示されないってことなんでしょうか?
少なくとも、質問文のHTMLだけだと、ちゃんと指定した位置(left:200px; top:450px;)に表示されているので、どういった状況なのかもう少し詳しくわからないと、皆さん答えようがないと思いますよ。
たとえば、テーブル挿入前はいいけど、テーブルを挿入するとレイアウトが崩れるというのも、挿入したテーブルがメニューや画像とかぶってしまうのか、他のもの全てがあらぬレイアウトになってしまうのか。とか、単純にleft:200px top:450pxの位置に入らないだけなのかとか、他の要素の位置指定もスタイルシートで行っているのかとか。
もしも、すべてのものをポジションでコントロールしているのなら、スタイルシートだけでもココに乗せてもらえれば、解決の糸口は見つかるかもしれませんね。(その際には、それぞれのものの縦横のサイズもわかったほうがいいと思いますが)
とにかく、何かしら情報がもう少しわかればといった感じでしょうか。

空いている右下(left:200px top:450px)にテーブルをおきたくて、そのように書いてあるのに、他と重なってしまうっていう状況が今ひとつわからないのですが、ポジションで指定した位置に表示されないってことなんでしょうか?
少なくとも、質問文のHTMLだけだと、ちゃんと指定した位置(left:200px; top:450px;)に表示されているので、どういった状況なのかもう少し詳しくわからないと、皆さん答えようがないと思いますよ。
たとえば、テーブル挿入前はいいけど、テーブルを挿入するとレイアウトが崩れるとい...続きを読む

Qアップロードするとレイアウトが崩れてしまう

お世話になります。

DW CS3でHPを作成しているのですが、
プレビューやグーグルクロームで確認するとうまくレイアウトされているのに
なぜかアップロードするとレイアウトがひどく崩れてしまいます。

BOMをはずすと解決したという方もいらっしゃいましたが
UTF-8のBOMを含めない設定になっています。

プレビューやグーグルクロームで二重に確認しながらコーディングしているつもりなのに
いざアップすると全く違うレイアウトになっているようでは確認しようがない気がして
困っています。

margineやpadding、widthの設定等が間違っているのではというご指摘もあるかと思いますが
「プレビューやグーグルクロームでは思い通りのレイアウトになっているのに・・・」というのが
いちばん疑問に感じている点です。

どなたか詳しい方ご教授ください。
また、「こういったケースの場合はこの辺を見直してみて」といった
ヒントを下さるととても助かります。

長文申し訳ありません。
お分かりだとは思いますが、当方初心者です。
なにとぞよろしくお願いいたします。

Aベストアンサー

すべてテキストモードで転送されていますか?
HTML/CSSの文字コードと、指定があってますか?
スタイルシートは、Shift_JISで作成されているのに、@charsetがUTF-8になっていたとか。
すべての日本語を外してみてください。(font-familyのプロパティも!!)
余分な空白が残ってませんか?
Validatorは・
 ⇒W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )
 ⇒W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_uri )

 ⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )

QCSSでブラウザごとにレイアウトが崩れたりします。

はじめまして。
現在、CSS初心者でお店のホームページを作成しているのですが、作ったサイトのレイアウトがブラウザごとにレイアウトが違って見えます。
細かな部分でも違って見えてきてしまっているのですが、大枠のレイアウトが崩れてしまっていて、なんとか修正できないものかと頑張っています。

■■■■■■    ■=ヘッダー
□□●●●●    □=メニュー
□□●●●●    ●=コンテンツ(中身)1
□□○○○○    ○=コンテンツ(中身)2
□□○○○○    ▲=フッター
▲▲▲▲▲▲

このようなレイアウトで組んでいるのですが、初心者なため、ひたすら「div」で囲って、さらにその中をdivで囲ってなんとかレイアウトを組みました。
そこで、問題の崩れているレイアウトですが、メニュー(□)とコンテンツ(○+●)の部分の高さを「auto」にしているのですが、フッターの部分が左のメニュー(□)の高さにしかあっておらず、右のコンテンツの途中からフッターが出てきてしまいます。
※コンテンツ(○+●)部分はさらに大枠の「right」で囲っており、メニュー部分は「left」で、両方ともdivで、高さは他と同様に「auto」トなっております。

ちなみにこの現象はIE7のみでして、IE6やfirefoxなどでは正常に表示されました。
全てのhtmlファイルごとに高さを指定して、divを指定すれば、解決するとは思うのですが、テンプレートを使用しているため、なんとかこのまま解決方法を見いだせればありがたいのですが、、、

どうか教えていただけないでしょうか?

body{
margin:0px;
padding:0px;
text-align:center;
}
/* ラッパーの設定*/
#wrap{
position:relative;
width:790px;
background-color:#FFFFFF;
margin:0px auto;
text-align:left;
}
/* ヘッダーの設定*/
#head{
width:790px;
height:100px;
background-color:#FFFFFF;
}
/* 左側の設定*/
#left{
width:210px;
height:auto;
float:left;
background-color:#FFFFFF;
}
/* 右側の設定*/
#right{
width:580px;
height:950px;
float:right;
background-color:#FFFFFF;
margin-bottom: 15px;
}
#sub_main {
width: 550px;
margin-left: 15px;
background-color: #FFFFFF;
margin-top: 10px;
height: auto;
margin-bottom: 5px;
}
#sub_main2 {
width: 550px;
margin-left: 15px;
margin-top: 15px;
background-color: #FFFFFF;
height: auto;
}
#foot{
position:relative;
width:100%;
height:auto;
background-color:#CCFFCC;
clear:both;
float: left;
}

※sub_main1,2は●と○になります。
どうかよろしくお願いいたします。

はじめまして。
現在、CSS初心者でお店のホームページを作成しているのですが、作ったサイトのレイアウトがブラウザごとにレイアウトが違って見えます。
細かな部分でも違って見えてきてしまっているのですが、大枠のレイアウトが崩れてしまっていて、なんとか修正できないものかと頑張っています。

■■■■■■    ■=ヘッダー
□□●●●●    □=メニュー
□□●●●●    ●=コンテンツ(中身)1
□□○○○○    ○=コンテンツ(中身)2
□□○○○○    ▲=フッター
▲▲▲▲▲▲

このようなレイアウトで組ん...続きを読む

Aベストアンサー

簡易的な形

<div style="width:6em"><!-- 全体 -->
 <div>■■■■■■</div>
 <div>
  <div style="width:2em;float:left">
   □□
   □□
   □□
   □□
  </div>
  <div style="width:4em;float:left">
   <div>
    ●●●●
    ●●●●
   </div>
   <div>
    ○○○○
    ○○○○
   </div>
  </div>
  <div style="clear:both"></div>
 </div>
 <div>▲▲▲▲▲▲</div>
</div>


あとはclearfixかな
http://www.google.co.jp/search?q=clearfix&hl=ja&lr=lang_ja

Q収納がない部屋のレイアウト

こんにちは

引越し先のワンルームの部屋に収納がなく、レイアウトに悩んでいます。
レイアウトや収納製品等、住みやすいスペースの使い方について
アイディアやノウハウをいただきたいです。
似たような質問は過去にありますが、古いものが多く、リンク切れも多いので
改めて質問させていただきます。

部屋の間取りは添付画像のとおりです。
上のベランダがメインなので左のベランダは
ある程度ふさがってもかまいません。

持っているもの:
・高さ30cmほどの衣装ケース×3
・横60cm、高さ1mほどの本棚
・デスクトップPC

買おうと思うもの
・ベッド
・机(+袖机?)
・クローゼットなどの収納

収納したいもの
・スーツなど衣類
・布団
・その他小物類

初めての一人暮らしで、独りで考えていてもあまり良い考えが浮かびません。
皆様のお知恵を借りられればと思います。

Aベストアンサー

レイアウト考えるの楽しいですよね。こっちまで楽しくなってきました(^^ゞ
私の経験談や友人の部屋を思い出しながらご回答させていただきますね。
stafm様のお好みや予算等もあるかと思いますので、ご参考まで。。

《伸縮性のカーテン付ラック》
NO2の方のご意見にも出てきましたが、伸縮性のカーテン付ラック、おすすめです。
【メリット】
・お部屋のサイズに合わせて設置できます。
・物量の変動に合わせて伸縮でき、高い位置にも収納できるので、空間が生かせます。
・既にお持ちの衣装ケースや棚を活用できます。
 パソコン・TVが一緒に置けるラックを別に購入し、中央に設置、必要な時にオープン。
 荷物があっちこっちにあるより、壁一面にまとめられた方が統一感が出ます。
・カーテンが付いているので、友人が来ても目隠しになるし、部屋も綺麗に見えますよね。
・次引越する時に運びやすい、捨てやすいという点も意外と重要です。
【留意点】
・カーテンの生地はできれば厚めの方がいいです。
 カーテンの色は壁紙と同じにすると部屋が広くみえます。
 好きな柄のカーテンを別に買ってきてもいいですよね。
・重い荷物が多い場合は、太いラックのを選ぶといいです。

お値段お手頃のを見つけたのでURL添付しておきますね。
NO2の方のサイトもいろんな種類のラックがあっていいと思います。
http://www.nissen.co.jp/sho_item/bargain/7874/7874_80616.asp?book=7874&cat=&bu=2&thum=sale019_000_000_000-01

《メタルラック》
以前友人がメタルラックの大きいのを二つ横に重ねて置いて、TV棚を兼ね活用していました。
統一感があって、シックで、とても素敵だなと思ったのを覚えています。
パソコンも置けるデザインや、スーツを掛けられるのもありますよね。
既にお持ちの衣装ケースや棚を活用できますし、布で隠してもいいですよね。

《ベッド》
まずは私の失敗談から(^^ゞ
以前1Kの部屋に普通のベッドを置いたら部屋が半分埋まって狭い思いをしました。
一旦購入するとなかなか変えられませんし、引越の時小さいトラックには入らず、
捨てる時は廃棄料がかかりましたので、おすすめしません。
すぐに真ん中を上に上げて、布団ごと二つに折りたためるのがよかったなと思いました。

ロフト式のベッドは部屋下の空間をうまく使えるのでいいですよね。
ただ、はしごを上がったり下がったり、TVが遠かったり、ちょっと手間でした。。
男性の場合は体重によりベッド部分が反ってしまうかも、頑丈な造りのものがいいです。

ベッドでくつろぐことが多い方は、ベッドは下にあった方がいいのかも。。
折りたたみできるマットレスタイプのソファーもおすすめです。
広げてベッドに、使わない時はソファーに、運びやすくて部屋の模様替も楽です。
マットに厚みがあるので、座り心地も寝心地もいいです。
もし可能であれば間取図下のベランダ・窓にそって置くと部屋が広く使えます。

《部屋の仕切り》
玄関のドアからお部屋への仕切りがない場合、宅急便が来た時に部屋内が見えてしまいます。
突っ張り棒で布やのれんをかけて仕切るといいですよ。

いろんなお部屋のデザインやサンプルを見ていると、アイディアも広がりますよ。
http://www.ikea.com/ms/ja_JP/campaigns/heya_doko/index.html
http://www.bellemaison.jp/interior/sp/storage_place/storage_place_index.html#bed

素敵なお部屋になるといいですね。がんばってください(^^)

レイアウト考えるの楽しいですよね。こっちまで楽しくなってきました(^^ゞ
私の経験談や友人の部屋を思い出しながらご回答させていただきますね。
stafm様のお好みや予算等もあるかと思いますので、ご参考まで。。

《伸縮性のカーテン付ラック》
NO2の方のご意見にも出てきましたが、伸縮性のカーテン付ラック、おすすめです。
【メリット】
・お部屋のサイズに合わせて設置できます。
・物量の変動に合わせて伸縮でき、高い位置にも収納できるので、空間が生かせます。
・既にお持ちの衣装ケースや棚を活用でき...続きを読む

QCSSで画面サイズを縮小するとレイアウトが大きく崩れてしまう

CSSとXHTMLで、左と右に分かれただけのデザインという少し変わったレイアウトで作ってみたのですが、画面サイズを変更(縮小)すると右側のBOXがすべて左側の下に回り込んでしまいます。
できればスクロールバーなどを出現させて、レイアウトが崩れないようにしたいと考えています。
色々いじくっていたらめちゃくちゃになってしまったのですが、一応CSSを掲載しておきます。
また、左側を○○pxで、右側を残りのサイズというようなwidthの指定の仕方ってあるのでしょうか?
frameとかだと*で対応するみたいなんですが・・・

ひとまず、周り込を回避する方法が優先です。
どうかよろしくお願いいたします。


@charset "shift_jis";


body {
margin: 0px;
height: 100%;
padding: 0px;
font-size: 12px;
line-height: 150%;
}
html {
height: 100%;
}
img {
border: none;
vertical-align: bottom;
}

#left {
background-color: #666666;
width: 350px;
float: left;
min-height: 100%;
height: 100%;
}
#right {
height: 100%;
padding: 35px 0 0 0;
min-height: 100%;
width: auto;
margin: 0 0 0 350px;
}

CSSとXHTMLで、左と右に分かれただけのデザインという少し変わったレイアウトで作ってみたのですが、画面サイズを変更(縮小)すると右側のBOXがすべて左側の下に回り込んでしまいます。
できればスクロールバーなどを出現させて、レイアウトが崩れないようにしたいと考えています。
色々いじくっていたらめちゃくちゃになってしまったのですが、一応CSSを掲載しておきます。
また、左側を○○pxで、右側を残りのサイズというようなwidthの指定の仕方ってあるのでしょうか?
frameとかだと*で対応するみたいなん...続きを読む

Aベストアンサー

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<style>
/* left[liquid] right[fixed] */
body {
overflow: hidden;
zoom: 1;
}
#left {
float: left;
width: 100%;
overflow: hidden;
zoom: 1;
}
#left div.contents {
margin-right: 240px;
}
#right {
float: right;
width: 240px;
margin-left: -240px;
overflow: hidden;
zoom: 1;
}
/* your design */
body{
margin:0;
width:100%;
height:100%;
}
#left{
background: #eee;
height:100%;
}
#right {
background: #ccc;
height:100%;
}
</style>
<body>
<div id="left">
<div class="contents">
text text text text text text text text text text text text text text
</div>
</div>
<div id="right">
text text text text text text text text text text text text text text
</div>
</body>
</html>
こんな感じでどうでしょう?サブコンテンツ固定のメインコンテンツ可変のレイアウトです。(注:IE6とFirefox2.0でしか確認してません)
最近ブログに同じような記事を書いたので、よろしかったら参考にしてみてください。

簡単にCSSレイアウトできるフレームワークを考えてみる - Cyokodog::Diary
http://d.hatena.ne.jp/cyokodog/20080731/1217496357

サブコンテンツ固定・メインコンテンツ可変のCSSレイアウト - Cyokodog::Diary
http://d.hatena.ne.jp/cyokodog/20080805/1217955315

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<style>
/* left[liquid] right[fixed] */
body {
overflow: hidden;
zoom: 1;
}
#left {
float: left;
width: 100%;
overflow: hidden;
zoom: 1;
}
#left div.contents {
margin-right: 240px;
}
#right {
float: right;...続きを読む

QWordの印刷レイアウトとWebレイアウトで図形の位置が異なるのは?

Word2002(OS=XP)とWord2007(OS=Vista)で作業を行っています。
下記現象は両Officeで確認済みです。

Wordの印刷レイアウトを用いて、
図形(写真やクリップアート、オートシェイプなど)を画面右側に設定しました。
※表示も画面右側に表示されています。
※図形のレイアウトは「四角」を指定しています。

しかし、Webレイアウトで表示すると図形が左側に寄り、印刷レイアウトと表示位置が逆転しています。


(1)なぜ、印刷レイアウトとWebレイアウトで表示位置が異なるのでしょうか?

(2)また、Webレイアウトにした場合でも印刷レイアウトの表示と同様の位置に表示する手段はあるのでしょうか?
(印刷レイアウト側の設定で...)

初歩的な質問ですみません。
ご存じの方がいらっしゃれば、ご回答をお願いします。

Aベストアンサー

よくわからんですが、
Office が出力する html は float とか出力しないからかもしれませんね。
HTML のエディタ等では float を使って画像を右端に配置して、文字が回りこむようにすることができました。(Visual Studio 2008 で確認)
ただしもともと html はレイアウトの制約があったりしますから、自由にレイアウトした Word でのレイアウトを html + css で再現させるのは難しい場合もあると思います。

Qスタイルシート(CSS)がSafariのみレイアウトが崩れるときの対処法

趣味でCSSレイアウトを用いて、サイトを作成しています。

CSSでつくったコンテンツ部分の枠の中に、CSSで3つのわくを横並びにつくっていたのですが、IEで表示がくずれたので、仕方なくテーブルで作成したところ、正しく表示されるようになりました。

しかしSafariのみその3つのわくが横に飛び出してしまいます。

他にFirefox、IE7、Sleipnirでは正常に表示されます。

こういうときWeBデザイナーの方はどうされているのでしょうか?

Aベストアンサー

どのような記述をされているかわからないので
CSSの解釈の違いなのか、HTMLの記述間違いなのか不明ですが、
一般的に、ブラウザ間のCSSの解釈の違いの修正には
CSSハックと呼ばれる技法を使う事が多いです。

細かい事は参照URLを見てもらったり、検索をかけてもらえば
わかると思いますが、記述方法によるブラウザ毎の解釈の違い
(主にコメントとして認識したり、無視したりする様な記述)を
利用して、特定のブラウザのみCSSを解釈させる方法だと
思っていただければいいと思います。

ただし、CSSハック自体はCSSの文法として必ずしも正しいわけではなく、
無理やり解釈させているものもあるという事をご理解ください。

※HTMLの記述間違いの可能性もありますので、HTMLタグの閉じ忘れ等の
※確認もした方がいいかもしれません。

参考URL:http://blog.worldending.jp/web/css-hack.php


人気Q&Aランキング