プロが教える店舗＆オフィスのセキュリティ対策術

右と左の両端に色を付けるには？

解決済

  • 質問者：VNRMHRWE
  • 質問日時：
  • 回答数：3件

http://www.1uphp.com/con2/layout/bodycenter.html
を参考に、サイトを作成しているのですが、
右と左の両端の四角の中を赤にしたい場合、どうすればいいでしょうか？

「この中にページ内容を入れます。」と書いてない部分に色を付けたいです。

BgColor #FF0000; を追加して、

<!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">
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css">
<!--

body
{
margin:0px; /* ページ全体のmargin */
padding:0px; /* ページ全体のpadding */
text-align:center; /* 下記のautoに未対応用のセンタリング */
border: 1px solid #FF0000;
BgColor #FF0000;
}

#main
{
margin-left:auto; /* 左側マージンを自動的に空ける */
margin-right:auto; /* 右側マージンを自動的に空ける */
text-align:left; /* 中身を左側表示に戻す */
width:650px; /* 幅を決定する */
border: 1px solid #FF0000;
}

-->
</style>
</head>
<body>

<div id="main">この中にページ内容を入れます。</div>

</body>
</html>

としてみたのですが、何も変わりません。

通報する

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

質問の本文を隠す

A 回答 (3件)

No.1

  • 回答者： outbrave
  • 回答日時：

BgColor #FF0000; という書き方はないです。



background-color: #f00; と書きます。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。

通報する
お礼日時：2014/10/26 20:17

No.2

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

そんな酷いサイトを参考にするのではなく、ちゃんとした方法を学ばないと・・



★『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
すなわち、DOCTYPEは
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
　これだけで、IEも他のブラウザも標準モードで起動するのでブラウザごとの差はなくなるでしょう。

★中心に寄せるのはtext-alignではありません。
　text-alignは、テキストなど行内要素を中心寄せにするプロパティです。
　'text-align'( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
　断じてブロック要素を中央配置するためのものではありません。

★<div id="main">この中にページ内容を入れます。</div>
　class,idの使い方間違っています。この場合はclass="article"かもしくは不要です。
　『id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』であって、決してデザインするために用いるものではありません。

ウェブ標準の簡単なサンプル
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
　のDATA入力(右上のボタン)でチェック済みのHTML4.01strictです。
★タブは＿に置換してあるので戻す。

　一見して分かるように、HTMLには文書構造しか書いていませんから、作成するのも将来のメンテナンスもとても楽なはずです。
　class名は、HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/h … )を参考に、文書構造を示す物にしてあります。HTML5にするときは
　<div class="header"></div>　→　<header></header>
　<div class="section"></div>　→　<section></section>
　<div class="footer"></div>　→　<footer></footer>
　<div class="nav"></div>　→　<nav></nav>
に変更するだけです。HTML4.01で作成するときにもHTML5の新しい要素やその使途を参考にすると良いです。

<!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>HomePage</h1>
</div>
<div class="section">
<h2>本文</h2>
<div class="section">
<h3>ページ全体を中央に表示</h3>
<p>ページを中央に表示するには、ページがウェブ標準で作成されている限り、IE7以降のモダンブラウザには差はありません。</p>
<ul>
<li>幅を指定して左右のマージンをautoにします。</li>
</ul>
</div>
<div class="section">
<h3>スタイルシートで指定します。</h3>
<p>HTMLには文書構造だけを記述し、プレゼンテーションはスタイルシートで指定します。</p>
</div>
<div class="nav"><!-- ナビゲーション、メインじゃないので後回し-->
<ol>
<li>MENUE1</li>
<li>MENUE2</li>
<li>MENUE3</li>
<li>MENUE4</li>
<li>MENUE5</li>
</ol>
</div>
</div>
<div class="footer">
<h2>文書情報</h2>
<dl class="documentHistry">
<dt id="FIRST-PUBLISHED">First Published</dt>
<dd>2014-09-29</dd>
</dl>
</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。

通報する
お礼日時：2014/10/26 20:17

No.3ベストアンサー

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

No.2のスタイルシートを説明を入れてあげておきます。

このままスタイル部分を入替えると良いです。
★背景色の指定はbackground-color、文字色はcolorです。
★screenメディアのみのスタイル。印刷や携帯電話には適用されません。
　印刷プレビューで確認できます。
　印刷機や携帯用には、別のスタイルを書くことができます。
★ウィンドウを狭めてみると分かるようにスマホ縦置き以上の幅があればきちんと表示されるはずです。

★タブは＿に置換してあるので戻す。

慣れるまで、大変だと思いますが、慣れてしまえば
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より
になります。

そのまえに、
　⇒HTML 4.01 Specification (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
を読んで、HTMLの基本だけは理解するほうが絶対に早く効率的です。
　とりあえず、どこに何が書いてあるかだけでも知っておくくらいでよい。
Anothter HTML LintをパスするHTMLが書けるようになったら

　⇒Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

★皆通ってきた道です。変なサイトで変なこと覚えると、直すのが大変です。
　最初から本道をたどるほうが早い。

<style type="text/css" media="screen">
<!--
html,body{margin:0;padding:0;}/* ブラウザの余白を消す */
p{
＿text-indent:1em;/* 日本語なので段落が変わると一文字下げる */
＿line-height:1.6em;/* 日本語も字が大きいので一行を高く */
＿margin:0;/* marginは0 */
}
div.header,div.section,div.footer{/* これらのdivブロックは */
＿width:90%;min-width:470px;max-width:900px;/* 標準幅、最小幅、最大幅を指定 */
＿margin:0 auto;/* 中央寄せ! これが中央寄せ */
＿padding:5px;/* 周囲の余白 */
＿background-color:rgb(255,255,160);/* 背景色を指定 */
}
div.header h1{
＿background-color:orange;/* 背景色 */
＿border:outset orange 2px;/* ボーダー(枠線)の色と形 */
＿line-height:2em;/* 行を高く */
＿padding:0 10px;/* 内部の余白 */
＿color:white;/* 文字の色 */
}
div.section{
＿position:relative;/* 子孫の要素の位置やサイズの基準とするため */
}
h2{display:none;}/* 隠す */
div.section div.section{/* section(本文)中のサブセクション */
＿margin:80px 0 10px 200px;/* 右と上を空ける */
＿width:auto;min-width:0;/* 幅を上の指定を上書きする */
＿background-color:white;/* 背景色 */
＿border:1px solid orange;/* 枠の色 */

}
div.section div.section h3{
＿position:absolute;/* 上にずらしてその場から消す */
＿top:-80px;/* 上に80px */
＿width:90%;/* 幅 */
＿padding:0 5px;/* 内側の余白 */
＿font-size:20px;/* 文字の大きさ */
＿line-height:40px;/* 行の高さ */
＿background-color:white; /* 背景色 */
＿border:1px solid orange;/* 文字色 */
＿border-left-width:3px;/* 左のボーダーを広く */
}
div.section div.nav{/* 本文中のナビゲーション */
＿position:absolute;/* 絶対配置 */
＿top:0;left:0;/* 本文の左上隅 */
＿width:200px;height:100%;/* 幅と高さ、高さは本文にあわせる。 */
＿text-align:center;/* 文字は中央 */
＿line-height:40px;/* 行の高さ */
}
div.section div.nav ol{
＿margin:0;padding:0;/* 余白は0 */
}
div.section div.nav ol li{
＿list-style:none;/* リストじゃなくする */
＿background-color:orange;/* 背景色 */
＿border:outset orange 2px;/* 枠のスタイル */
＿margin:2px;/* 周囲との余白 */
＿padding:0;
＿color:white;/* 文字色 */
}
-->
＿</style>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。

通報する
お礼日時：2014/10/26 20:17

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

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

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

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

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

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

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

おすすめ情報