中小企業の働き方改革をサポート>>

こんにちは。
http://atstyle.biz/blogtemp333ctr.php


の下の方にあるMovabtyeTypeというブログ用のテンプレートを使わせてもらおうとしております。
真っ白なので部分的に色を変えたいと思いまして、

全体的にグレー
左カラム部分だけ黄色

にしようとして

body {
font-size: 100%;
color: #333333;
line-height: 1.6em;
margin: 0;
padding: 0;
background-color: ##333333;
}

としたところ、全体の色がグレー(#333333)
になったものの、左カラムの部分の色を変えようとしてもどうもうまくいきません。

どのあたりを修正すればよいかアドバイス頂けると助かります。

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

A 回答 (2件)

セルの背景色を変える↓


http://www.1uphp.com/con1/table/cell-bgcolor.html

その他、セルに関しての一覧↓
http://www.1uphp.com/con1/table/tables.html
こちらに詳しく載っています。
本当に分かりやすいので、お勧めです。
    • good
    • 0
この回答へのお礼

ありがとうございます!

お礼日時:2006/09/09 10:36

リンク先のソースを確認しました。



#left {
width:200px;
float:left;
}

ここに背景色指定すれば左側の色は変わります。
178行目ですね。
いろんなところにいちいち指定してある background-color:#ffffff; が邪魔な場合は、それを消してしまうか、background-color:transparent; とするか、どちらかで解消されます。
    • good
    • 0
この回答へのお礼

ご丁寧にありがとうございます。できました!

お礼日時:2006/09/09 10:36

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

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

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

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

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で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
の縦バージョンはありますか?

現在HTML言語を使用してホームメイドなサイトを構築しているのですが

<hr>・・・横長の区切り線

ですよね?

これを縦にした表示がしたいのですが、どうすればよろしいでしょうか?

恐れ入りますが、そのようなタグが存在するようならば、タグを教えていただけないでしょうか?

よろしくお願いします。

Aベストアンサー

 こういうのはだめですか、↓
<div style="background-color:gray; width:2px; height:300px; position:absolute; top:50px; left:100px;"></div>

参考URL:http://www.tohoho-web.com/how2/line.htm#vr

Q複数のボタンを等間隔に、かつ中央に配置する

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button">
<input type="submit" value=">> 進 む>>" />
</div>

↓CSSファイルです↓
div.button {
padding-right:35px;
float:left;
}

上記設定で、ボタンの左右間隔はいい感じにあいたのですが
全体的に左に寄ってしまってます。

よろしくお願いいたします。

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button...続きを読む

Aベストアンサー

<div class="button">
<input type="submit" value="<< 戻る <<" />
<input type="submit" value="選択リセット" />
<input type="submit" value=">> 進 む>>" />
</div>

div.button {
text-align:center;
}
div.button input {
margin: 0px 20px;
}

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ページの左右の余白(枠外)に色を付ける方法

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


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

Aベストアンサー

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">の背景を白色にしているということになります。
ご参考まで。

Qillegal string offset

php5.3では動いていたプログラムをphp 5.4 で動かしたらwarning illegal string offsetが出て困っています。以下のプログラムでwarningが出ないようにするにはどのようにコーディングすればよいのでしょうか?


$a = array('exists' => 'foo');
if ($a['exists']['non_existent']) {
print 1;
}
print 2;
exit;

Aベストアンサー

isset()を使えばいいと思います

Qテーブルの横に画像を

テーブルのすぐ隣に画像を表示させるには、どうしたら良いでしょうか?

教えてください。

よろしくお願いします。

□…テーブル ★…画像

□★

こんな感じです。

Aベストアンサー

<img src="***.png" alt="**" style="float:right">
<table>
<tr><td>***</td></tr>
</table>

<table style="float:left">
<tr><td>***</td></tr>
</table>
<img src="***.png" alt="**">

こんな風にすると良いかも。

QCSSを使って、ある部分の背景色を変えるには?

すごく簡単な質問で申し訳ないのですが、ネット検索をしても、何を見てもわからないので、お教えくださいませ。

ホームページを作る際、CSSを使って、ある文字列の部分だけを、その部分の背景色を別なものにしたいのですが、どのようにすればいいのでしょうか。

Aベストアンサー

背景色を指定するプロパティはbackground-colorです。
値は#999999の16進数形式でもrgb(255,255,255)のRGB10進数形式でも、色名キーワード(redとかnavyとか)でもOKです。

参考URL:http://hp.vector.co.jp/authors/VA013937/cssref/backgcol.html

Q外側のdivの高さを入れ子のdivの高さに自動的に合わせたい

外側のdivの高さを入れ子のdivの高さに自動的に合わせたい

添付画像のようなコンテンツを作成しています。
外側のdiv(contents_box)内にcontents_imgとcontents_textのdivを配置しています。
このcontents_imgとcontents_textの高さに合わせて外側のcontents_boxも自動的に変動させたいのですが、どのようにしたら良いのでしょう?
高さをautoですとただの棒のようになってしまい、ダメでした。
どうぞよろしくお願い致します。

xhtml

<div id="contents_box">
<div id="contents_img">ここに画像</div>
<div id="contents_text"> ここにテキスト</div>
</div>

css
#contents_box {
height: auto;
width: 805px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #333;
}

#contents_img {
height: auto;
width: 300px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0px;
float: left;
}

#contents_text {
height: auto;
width: 485px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 10px;
float: right;
text-align: justify;
}

外側のdivの高さを入れ子のdivの高さに自動的に合わせたい

添付画像のようなコンテンツを作成しています。
外側のdiv(contents_box)内にcontents_imgとcontents_textのdivを配置しています。
このcontents_imgとcontents_textの高さに合わせて外側のcontents_boxも自動的に変動させたいのですが、どのようにしたら良いのでしょう?
高さをautoですとただの棒のようになってしまい、ダメでした。
どうぞよろしくお願い致します。

xhtml

<div id="contents_box">
<div id="contents_img">ここに画像</div>
<div ...続きを読む

Aベストアンサー

クリアーしていないって事かな・・・ 色々方法はあるけど。
----------------

<div id="contents_box">
<div id="contents_img">ここに画像</div>
<div id="contents_text"> ここにテキスト</div>
<hr /> <!-- 追加 -->
</div>



#contents_box {
width: 805px;
}
#contents_box hr { clear: both;} /* 追加 */

#contents_img {
width: 300px;
margin: 10px 0;
float: left;
}

#contents_text {
width: 485px;
margin: 10px 0;
float: right;
text-align: justify;
}


人気Q&Aランキング

おすすめ情報