個人事業主の方必見!確定申告のお悩み解決

http://tempnate.com/sozai_aroma/aroma_brown_txt/
の両サイドに肌色の背景があると思うのですが、
これの簡単なHTMLCSSサンプルを教えてください。

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

A 回答 (3件)

実際にそのサイトを知っているのでしたら、ソースを見るのが一番早いですよ。


ウェブサイトを作ってらっしゃるなら、当然firefoxをお使いでしょうから、firebug( https://addons.mozilla.jp/firefox/details/1843 )で・・。
bodyに、repeat-xで画像を並べ、div.mainの幅を指定してmargin:0 auto;
そのサイトのHTMLやCSSは比較的良く出来ていますが、必ずしも良いものではありません。
 良いデザインのサイトを見つけたら、それを参考にして自分でデザインするのが良いですよ。

 firefoxには、開発者用のアドオン(  ⇒開発者向けツール( https://addons.mozilla.jp/firefox/extensions/dev … ) がとても豊富ですから、この様な時にとても役に立ちます。
・ Html Validator( https://addons.mozilla.jp/firefox/details/249 )
・ Web Developer( https://addons.mozilla.jp/firefox/details/60 )
・ Open With( https://addons.mozilla.jp/firefox/details/11097 )
・ FireMobileSimulator( https://addons.mozilla.jp/firefox/details/8519 )
・ Server Switcher( https://addons.mozilla.jp/firefox/details/2409 )
    • good
    • 0
この回答へのお礼

遅くなりました、ありがとうございました。

お礼日時:2014/03/07 07:56

画像は、


http://tempnate.com/sozai_aroma/aroma_brown_txt/ …

この画像をbodyに横リピートで表示させています。

つまり、
body { background: url(back.gif) repeat-x;}

何も難しい事はやっていません。初歩の方法ですよ。
    • good
    • 1

ブラウザ画面で右クリック、「ソースの表示」でHTML+CSSのソースコードが表示されます。

それを読めば分かります。読めなければ分かりません。
    • good
    • 0

この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メディアのみのスタイル。印刷や携帯電話には適用されません。
 印刷プレビューで確認できます。
 印刷機や携帯用には、別のスタイルを書くことができます。
★ウィンドウを狭めてみると分かるようにスマホ縦置き以上の幅があればきちんと表示されるはずです。

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

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

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

Qホームページの背景画像を両端に配置したいのですが...

ホームページの背景画像をスタイルシートにて、両端に表示させたいのですが、どなたかご存じの方、教えていただけないでしょうか?
現在は以下のものを使用しています。
body { background: white url(bg018.gif) repeat-y;
よろしくお願いいたします。

Aベストアンサー

ANo.1さんが書いてみえる「横幅が常に固定~」と言うのは、多分、「元々両端に画像が描かれている背景画像を利用する」事だと思います。
敷き詰めた時にタイル状にならないよう、横長になっている画像だと少し面倒ですが、余白が少ない画像でしたら、下のようにANo.1さんの書かれたCSSに一文足した方が早いと思います。↓

HTML {
background: white url(bg018.gif) repeat-y;
background-position: right;
}
body {
margin-right: 背景画像の横幅サイズ;
background: white url(bg018.gif) repeat-y;
background-position: left;
}


人気Q&Aランキング