アプリ版：「スタンプのみでお礼する」機能のリリースについて

急いでいます！

RMS　レフトナビ問題

締切済

  • 質問者：エビゾー
  • 質問日時：
  • 回答数：2件

他スレにも立てているのですが、RMSのレフトナビと右側の領域の間に余白がどうしてもできてしまいます。

レフトナビ問題と呼ばれている事はわかってRMSで問題がある事はわかったのですが、どのようにHTML/CSSをコーディングしてレフトナビ問題を解消すればよいかわかりません。

詳しい方宜しくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2

  • 回答者： ORUKA1951
  • 回答日時：

スタイルシートを書いていくとこうなる。


上から一行ずつ書き足していくと、わかるはずです。
これは隙間０ですが、sectionの左マージンを変えれば自在に・・
簡単な説明は入れておきました。
　このように、HTMLの文書構造に基づいて、セレクタをつかって適用したい要素を特定し、プロパティを追記していくだけ。
★タブは＿に置換してある

＿<style type="text/css" media="screen">
<!--
/* わかりやすいように色分け */
/* ヘッダ */
div.header{background-color:rgb(9, 200, 193);}
/* 本文 */
div.section{background-color:silver;}
/* 本文内のナビゲーション */
div.section div.nav{background-color:rgb(255, 134, 151);}
/* 本文内のsection */
div.section div.section{background-color:white;}
/* フッタ */
div.footer{background-color:rgb(252, 179, 87);}
/* 念のためhtml,body */
html,body{background-color:gray;}

/* これを好きに配置していきます */
html,body{
＿margin:0;
}
/* 字の大きな日本語なので */
h1,h2,h3,h4{
＿margin:0;
＿line-height:1.6em;
}
/* 段落 */
p{
＿margin:0;
＿line-height:1.6em;
＿text-indent:1em;
}
/* 全体のサイズ */
div.header,div.section,div.footer{
＿width:90%;
＿max-width:850px;
＿min-width:640px;
＿margin:0 auto;
}
/* 本文とナビゲーション */
div.section{
＿position:relative;/* これは後で消してみると何の効果があるかわかる */
}
/* 本文中の要素の配置 */
div.section h2,
div.section p,
div.section div.section{
＿margin-left:150px;/* 左にナビ用のスペースを確保 */
}
/* 子供のsectionの子孫には適用したくないので */
div.section div.section{
＿width:auto;
＿min-width:0;
}
div.section div.section p{
＿margin-left:0;
}
/* ナビゲーションの指定 */
div.section div.nav{
＿width:150px;
＿height:100%;
＿position:absolute;
＿top:0;
＿left:0;
}
-->
＿</style>
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： ORUKA1951
  • 回答日時：

単にCSSの書き方の問題。


私は、テンプレート使わない(^^)
HTMLがちゃんとできていれば、どうにでもなります。
例えば、下記のようなHTMLがあったとします。
★タブは＿に置換してあるので、タブに戻すこと。
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
　でチェック済みのHTML4.01strictです。(右上のDATAから)

<!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&#64;hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">
<!--
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>本文見出し</h2>
＿＿<p>本文はsection</p>
＿＿<div class="section">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>このように、デザインはHTMLには文書構造しか書いてはなりません。</p>
＿＿＿<p>メンテナンスも容易になるし、デザインはすくに変更できるし、デザインの幅も広がります。そしてなにより<strong>検索エンジン最適化(SEO)</strong>として最適なHTMLになりますから・・</p>
＿＿</div>
＿＿<div class="section">
＿＿＿<h3>CSS</h3>
＿＿＿<p>そのうえで、文書構造に基づいてセレクタを書いてデザインを適用させたい要素を指定します。</p>
＿＿＿<blockquote>
＿＿＿＿<p>レフトナビと右側の領域の間に余白がどうしてもできてしまいます。</p>
＿＿＿</blockquote>
＿＿＿<p>
＿＿＿＿そのうえで、ナビや本文は重ねようが、開けようが、密着させようが好きにデザインすればよい。左はやめて右にしてもよい。
＿＿＿</p>
＿＿</div>
＿＿<div class="nav">
＿＿＿<ol>
＿＿＿＿<li><a href="/">TOP</a></li>
＿＿＿＿<li><a href="/products">製品</a></li>
＿＿＿＿<li><a href="/order">注文</a></li>
＿＿＿＿<li><a href="/q">問い合わせ</a></li>
＿＿＿</ol>
＿＿</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>
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報