人気マンガがだれでも無料♪電子コミック読み放題!!

http://inshokutenkeiei.com/
上記ページの左右の余白(枠外)に色(#EEE8AA)を付けたいのですが、
どこに何(html文)を入れれば良いか教えていただけるとありがたいです。


※編集画面は、cssとhtmlに分かれています。
※ネットで色々探しましたが、どれも理解できませんでした。

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

A 回答 (2件)

body#top {


background-color:#EEE8AA;
}

上記をCSSに追加してください。
CSSのdiv#wrapperの内容を以下に変更してください。

div#wrapper {
background-color:#FFFFFF;
width: 950px;
margin: 0 auto;
}

これでOKです。
つまりHTML全体にEEE8AAを付けて、内容が入っている<div id="wrapper">の背景を白色にしているということになります。
ご参考まで。

この回答への補足

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

ただ、私の表現に誤りがありまして、トップページだけでなく全ページを同じくしたい場合はどうすればよろしいでしょうか?

補足日時:2011/07/15 16:37
    • good
    • 0

いわゆる外部スタイルシートを使います。


そこで、
body{background-color:#eee8aa;}
でよいです。ただし標準では隙間が開くことがあるので
html,body{padding:0;margin:0;background-color:#eee8aa;}
としておきます。
 通常は背景画像や、font-family,line-height,colorなど、継承されるプロパティも一緒に固定スタイルシート(永続スタイルシート)書いておきます。

★HTMLはきちんと文書構造にしたがってマークアップして、デザインのためにclass名をつけたりIDをつけることは間違いです。
 タグスープになっちゃいます。典型的な悪い例が<div class=wrap">のように意味のない(非セマンティックな)マークアップです。(これは某オーサリングツール由来のものです。)HTML4.01が登場して10数年になろうというのにいまだに・・改善されていない。

[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>Untitled</title>
<meta name="author" content="IRUKA">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rev="made" href="mailto:ORUKA1951@ichiya.com" title="send a mail" >
<link rel="stylesheet" type="text/css" href="./styleSheet/standard.css">
<link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/screen.css">
<link rel="START" href="../index.html">
<link rel="NEXT" href="./page1.html">
<link rel="SHORTCUT ICON" href="/favicon.ico">
<link rel="ICON" href="/favicon.ico">
</head>
<body>
<div class="header">
<p class="nav"><a href="./index.html">トップへ</a></p>
<div class="hgroup">
<h1>title</h1>
<h2>subTitle</h2>
</div>
</div>
<div class="section">
<h2>section Title</h2>
<p>
</p>
</div>
<div class="footer" id="DOCUMENT_INFORMATION">
<dl class="document-version">
<dt id="FIRST-PUBLISHED">First Published</dt>
<dd>2005-06-10</dd>
<dt id="LAST-MODIFIED">Last Modified</dt>
<dd>2005-06-10 12:00:00 (JST)</dd>
</dl>
</div>
</body>
</html>

[CSS]standard.css
html,body{margin:0;padding:0;}
body{
font-family:"MS P明朝","平成明朝",serif;
line-height:1.4em;
}
p{text-indent:1em;}

[CSS]screen.css
body{
background-color: #eee8aa;
}
div.header,
div.section,
div.footer{
width:80%;
margin:0 auto;
background-color:white;
}
    • good
    • 0

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

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

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

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

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

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

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

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>

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

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="Con...続きを読む

Aベストアンサー

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

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

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

そのまえに、
 ⇒HTML 4.01 Specification (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html )
を読んで、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/CSS21/cover.html )

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

<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>

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

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

慣れるまで、大変だと思いますが、慣れてしまえ...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

QCSS、width100%でもできる余白

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<div id="logo"></div>
<div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div>
</div>
</div>
<div id="contents"><div class="centerbox">contents</div></div>

<div id="footer"><div class="centerbox">footer</div></div>

</body>
</html>


CSS

body{color:white; width:100%;}
.centerbox{width:500px; height:100%;}
a:hover{background-color:red;}

/*base layout*/
#header{width:100%; height:auto; text-align:center; background-color:black;}
#lang{text-align:right;}
#lang li{list-style:none; display:inline; margin-left:10px}
#logo{float:left; width:150px; height:80px; background-color:white;}
#menu{text-aign:right; margin-top:50px;}
#menu li{list-style:none; display:inline; margin-left:10px}
#contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;}
#footer{width:100%; height:100px; text-align:center; background-color:black;}

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<di...続きを読む

Aベストアンサー

スタイルシートの書き始めに、
html,body{margin:0;padding:0;}
の一行を入れておくようにすれば回避できます。
 これは常に入れておきましょう。

 なお、今後のために・・・どの部分が影響しているかは
*{border:solid 1px red;}
を入れてみると、わかりやすいです。

また、firefoxの開発者向けツール ( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )にあるFirebug | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト ( https://addons.mozilla.jp/firefox/details/1843 )を使うと、このあたりがよくわかると思います。

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

QCSSでボックス幅を文字列に合わせたい

ボックス幅を文字列の幅に合わせるにはどうしたらいいのでしょうか。
テーブルではセルにwidth属性を指定しなくても文字列の幅になりますが、ボックスではwidthプロパティを指定しなかったら領域全体の幅になります。white-spaceプロパティでnowrap指定し、widthプロパティで文字列より小さいサイズに指定するとできるのですが、他に指定する方法があれば教えて下さい。

Aベストアンサー

div等のblock要素ではなくspan等のinline要素によって行う。

<span style="border:solid 1px">文字幅に合わせた枠線</span>

Qリストの左余白の削除方法

<li>リストを作成した再に表示されてしまう、左余白部分を削除して、画面左に詰めたいのですが、上手く出来ません。
どなたかご教授頂けませんでしょうか?

=>CSS記述<=
ul li {
list-style: none;
margin: 0px;
padding: 0px;}

=>HTML記述<=
<ul>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
</ul>

Aベストアンサー

ul li {

の箇所を

ul {

にするだけ

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。


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

人気Q&Aランキング