- ベストアンサー
スタイルシートで左側だけ色をつけたい
naokomannの回答
セルの背景色を変える↓ http://www.1uphp.com/con1/table/cell-bgcolor.html その他、セルに関しての一覧↓ http://www.1uphp.com/con1/table/tables.html こちらに詳しく載っています。 本当に分かりやすいので、お勧めです。
関連するQ&A
- スタイルシートのカスタマイズ方法 を教えて！！
下記スタイルシートの花の絵の部分を自分のＣドライブ内に保存している画像に変更したいのですが、どのようにすればいいのでしょうか。 @charset "EUC-JP"; /* ############################### ▼▼基本 ################################# */ body { color: #6e625c; background-color: #fff; background-image: url("https://cart1.fc2.com/template/bouquet/image/bg.gif"); text-align: center; margin: 0; padding: 0; bgcolor: #ffffff } #BaseBlock { color: #6e625c; font-size: 10px; font-family: Osaka, "Verdana", "ＭＳ Ｐゴシック"; text-align: left; margin: 0 auto; padding: 0; width: 863px } a:link , a:active , a:visited { color: #c36; text-decoration: none } a:hover { color: #29a8a8; text-decoration: underline } br { letter-spacing: normal } /* ############################### ▼▼ 先頭 ################################# */ #HeadBlock { font-size: 10px; font-family: Osaka,Verdana, "ＭＳ Ｐゴシック"; background-image: url("https://cart1.fc2.com/template/bouquet/image/bg-head.gif"); background-repeat: repeat-x; background-position: 0 0; text-align: center; margin: 0; padding: 0; width: 100%; height: 245px } .HeadBlockA { background-image: url("https://cart1.fc2.com/template/bouquet/image/top-1.jpg"); text-align: right; margin: 0 auto; padding: 0; width: 863px; height: 46px } .HeadBlockAtext { padding-top: 20px } .HeadBlockB { background-image: url("https://cart1.fc2.com/template/bouquet/image/top-2.jpg"); text-align: right; margin: 0 auto; padding: 0; width: 863px; height: 138px } .HeadBlockC { background-image: url("https://cart1.fc2.com/template/bouquet/image/top-3.jpg"); text-align: right; margin: 0 auto; padding: 0; width: 863px; height: 42px } .ShopName { font-size: 20px; font-family: Verdana, Osaka,"MS UI Gothic"; font-weight: bold; margin: 0; padding: 10px 0 0 0 } .ShopName a:link , .ShopName a:active , .ShopName a:visited { color: #000; text-decoration: none } .ShopName a:hover { color: #dadada; text-decoration: none } 「▼▼基本」の部分のURL（background-image: url("https://….jpg");）を変更するのでしょうか。 その際、「▼▼ 先頭」の部分のURL（background-image: url("https://….jpg");）は触らないでそのままでいいのでしょうか。 ずっと「▼▼ 先頭」の部分のURLを変更していましたが、全く反映されません。 Ｃドライブに入っている画像は「○○.jpg」と書けばいいのでしょうか。
- 締切済み
- Windows XP
- ホームページビルダーでスタイルシートを使ったのですが？
今、ホームページビルダーで簡単な2カラム（右メニュー）のテンプレートを作っています。 質問ですが、メニューバー（サイドバー）に色を付けたくて、画像を使う事にしました。 <div class="main">に画像（background.gif）を入れ属性で繰り返す（垂直方向）にチェックをいれたのですが、ＩＥやfirefoxでプレビューでは反映されていないです。 色々いじってみたのですがどうしても解りません。どこが間違っているのか教えていただけないでしょうか？ よろしくお願いします。 HTML <body> <div class="box"> <div class="header"> <span class="site_name">ここにサイト名を入れる</span> <h1>ここにｈ１</h1> <div class="description_1">ここに簡単な説明文</div> </div> <div class="main"> <div class="contents">コンテンツ部分<br /> </div> <div class="menu"> メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> スタイルシート * { margin:0; padding:0; } .box{ width : 750px; margin: 0 auto; border-left-width : 1px; border-left-style : solid; border-left-color : black; border-right-width : 1px; border-right-style : solid; border-right-color : black; border-bottom-width : 1px; border-bottom-style : solid; border-bottom-color : black; } .header { width : 726px; height : 96px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; border-bottom-width : 2px; border-bottom-style : solid; border-bottom-color : black; } .main { width : 750px; background-image : url(file:///C:/Documents and Settings/※※※/img/background.gif); background-repeat : repeat-y; background-position : 0px 0px; margin-top : 0px; margin-bottom : 0px; margin-left : auto; margin-right : auto; background-color : #ffffff; } .menu { float: left; width : 180px; padding-top : 10px; padding-left : 10px; padding-right : 10px; padding-bottom : 10px; margin-left : auto; margin-right : auto; } .contents { float: left; width : 526px; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; } .footer { clear: both; width : 726px; height : 26px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; text-align : center; } .menu ul { list-style: none; } .site_name{ font-size : 21px; font-weight : bold; margin-left : 12px; } h1{ font-size : 15px; margin-top : 12px; margin-left : 24px; } .description_1{ font-size : 12px; font-weight : normal; margin-left : 24px; }
- ベストアンサー
- ホームページ作成ソフト
- cssで左カラムと右コンテンツの長さをそろえる方法
cssで左カラムと右コンテンツの長さをそろえる方法 今ホームページを作っているのですが、左カラムの背景と右コンテンツの長さがそろわず困っています。 左は短めなので右が長くなっても左は短いままなのです。 【background-repeat:repeat-y;】で左の背景を繰り返しています。 どなたか分かるかた教えてください。 下のようになっています。 #wrapper…左カラムと右コンテンツ部分 #side…左カラム #main_contents…右コンテンツ部分 body{ width:930px; float:left; margin:0px; padding:0px; font-size:12px; background-color:#CCCC99; color:#333333; font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅"; line-height: 150%; height:100%; } #wrapper { margin:0px auto; background-color:#ffffcc; height:auto; min-height:100%; } #side { background-image:url(left_bg.gif); background-repeat:repeat-y; width:230px; float:left; margin:0; padding:0; } #main_contents{ width:685px; color:#333333; font-size:13px; font-family:"Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅"; line-height:170%; float:right; background-color:#ffffcc; padding-left:15px; margin:0; padding-bottom:200px; }
- ベストアンサー
- その他(ソフトウェア)
- XHTML、CSSレイアウトでフッターを常に最下部に配置するには?
フッターを最下部に表示したいのですが、#footerに position: fixed; bottom:0;を付け加えてもフッター だけ最下部に表示されコンテンツ部分がついてきません。 ヘイトに100%をつけくわえるのでしょうか? どうかご教授願います。 body { margin: 0; padding: 0; text-align:center; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size:1em; background-color:#CCCCCC; } ol,ul,li { margin: 0; padding: 0; } li { list-style:none; } h1,h2,h3,p { margin: 0; padding: 0; } #container { margin: 0 auto; text-align: left; width: 740px; height: 100%; background-color:#FFFFFF; } #header { width:740px; height:80px; margin:0; padding:0; background-color:#FFFFFF; background-image:url(img/nine_rogo.gif); background-repeat:no-repeat; background-position:left center; } #contents { width:740px; height:100%; margin:0; padding:0; background-color:#FFFFFF; } #menu { float:left; width:140px; height: auto; margin:0; padding:0; background-color:#FFFFFF; color:#000000; } #main { float:right; width:580px; height:auto; margin:0; padding:0 0 0 10px; background-color:#FFFFFF; color:#000000 } #footer { clear:both; width:740px; height:auto; background-color:#FFFFFF; color:#000000; font-size:1em; padding:0.3em 0; text-align:center; }
- 締切済み
- ホームページ作成ソフト
- スタイルシートのpositionでフッターを位置指定するには
こんにちは。今回ページレイアウトにテーブルではなくcssのpositionを使おうと思っているのですが、フッターの指定がうまくいきません。フッターの上のメインコンテンツや右カラム、左カラムが短い場合は問題ないのですが、長くなるとフッターにかかってしまいます。左カラム、メインコンテンツ、右カラムのどれが長くなっても常にフッターがページの最下部に下がるようにするにはどのように指定すればいいですか？ちなみに今こんな感じで指定しています。 フッターをbottom:0px;で指定すれば常に一番下に来ると思ったのですが…。スクロールしない範囲での一番下にしか来ません…。 /* 左カラム */ #left_column { position: absolute; top: 130px; left: 10px; background-color: #FFFFFF; width: 150px; /* height: 500px; */ border: 1px solid #000; padding: 0px; } /* メインコンテンツ */ #main_contents { position: absolute; top: 130px; left: 165px; background-color: #FFFFCC; width: 490px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* 右カラム */ #right_column { position: absolute; top: 130px; left: 660px; background-color: #FFFFFF; width: 200px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* フッター */ #footer { position: absolute; bottom: 0px; left: 10px; background-color: #EEE; width: 850px; border: 1px solid #000; padding: 20px; }
- 締切済み
- その他([技術者向] コンピューター)
- 外部スタイルシートは同じなのですが…
こんばんは。 HTMLをコーディングしていて困ったことが出て来たのでご指導願います。 外部スタイルシートで共通のスタイルシートを指定し、コンテンツを組んでいるのですが、画像を挿入するとセンターで指定しているボックスが微妙に左へずれるのです。 HTMLのコードは下記／／／ <body> <div class="bace"> <div class="hedder"></div> <div id="menu"> <div class="menu"> <div class="menu_box"><a href="info.html">当サイトについて</a></div> <div class="menu_box"><a href="time.html">時間</a></div> <div class="menu_box_act">アクセス</div> <div class="menu_box"><a href="profile.html">紹介</a></div> <div class="menu_box"><a href="index.html">トップページ</a></div> <div class="clear"></div> </div> </div> <div class="main"> <h1>アクセス</h1> <div class="main_text"> <div align="center"><img src="map.jpg"/></div> ←この部分で画像指示をするとレイアウトが左へずれる。 </div> <div class="main_text"> <h2>アクセス／設備</h2> ○○○徒歩３分<br /> 駐車場2台（バリアフリー）<br /> <br /> <h2>住所</h2> 〒000000000000000000000000<br /> 電話 123-456-789 </div> </div> <div class="futter">Copyright © 2007 All Rights Reserved</div> </div> </body> CSSは下記／／／ * { margin:0; padding:0; } .bace{ width:750px; height: auto; margin-right: auto; margin-left: auto; font-size:90%; } .hedder{ width:750px; height:150px; background-image: url(hed.jpg); background-repeat: no-repeat; } .menu{ width:700px; height:30px; margin-top: 10px; padding-right: 25px; padding-left: 25px; } .menu_box{ height:30px; width:120px; float:left; margin-right: 10px; margin-left: 10px; } .menu_box_act{ height:30px; width:120px; float:left; margin-right:10px; margin-left:10px; display:block; text-align:center; line-height:30px; background-image: url(menu_back2.jpg); background-repeat: repeat-x; } .main{ width:670px; padding-right: 40px; padding-left: 40px; margin-top: 15px; height: auto; } .main_text{ margin-top: 5px; padding-right: 15px; padding-left: 15px; width: 640px; margin-bottom: 5px; height: auto; position: relative; } .futter{ height:15px; width:750px; text-align:center; background-color: #002187; color: #CCCCCC; margin-top: 15px; font-size: 90%; } .clear{ float:clear; } /* メニュー用リンクスタイル */ #menu a{ display:block; color:#333333; height:30px; line-height:30px; text-decoration:none; text-align:center; background-image: url(menu_back1.jpg); background-repeat: repeat-x; } #menu a:hover,a:focus{ color:#333333; background-image: url(menu_back3.jpg); background-repeat: repeat-x; } #menu a:active{ color:#333333; background-image:url(menu_back2.jpg); background-repeat:repeat-x; } 画像を入れないと全くぶれないのに、入れた途端レイアウトはそのまま左右へぶれるということが起こるのでしょうか？ リンクをサイト内でたどるとこのページだけ左へずれて違和感があります。 ご指摘の程、どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- スタイルシート教えて下さい
ブログのトップページの一番上の部分を 自分の作った画像に変えました。 それはうまくいったのですが、 その部分にブログサイト名と説明文が入るのですが、 自分の画像を貼り付ける前までは一番左にあった文字が 今は真ん中に表示されてしまうんです。 ブログ名（リンクつき）とブログの説明文を左に表示させるには どうしたらいいのか教えて下さい。 その部分のスタイルシートです↓ #banner{ background-image:url(http://△△△△/○○○/□□□.jpg); background-repeat:no-repeat; background-position:left top; font-family:arial, Helvetica; padding:0px 0px 0px 197px; height:197px; text-align:left; margin-left:13px; }
- 締切済み
- ブログ
- スタイルシート 継承？？
以下のスタイルシートで質問が３点あります。 (1) * {} は、何を表して、どこに影響を与えるのでしょうか？ (2) h2#testは、上のh2の属性を継承し、font-sizeだけ上書きしています。 継承させない方法はあるのでしょうか？ (3) 最後の#sample ul li img は４つ並んでいますが、これをする意味が知りたいです。 優先順位など規則があるのでしょうか？ * { margin:0px; padding:0px; } body{ color: blue; background: red; } h2 { margin:10px; padding:10px; font-size: 20px; color: yellow; background: blue; } h2#test { font-size: 10px; } #sample ul li img { height:12px; margin-right:5px; }
- 締切済み
- HTML
- スタイルシート※max-heightがIEではきかない
firefoxでは見れるのですが、IEではmax-heightがきいてません。 以下ソースです。 } #TREE-VIEW-DIV { float: left; width: 50%; max-height: 35em; overflow: auto; } これでfirefoxのほうでは、インラインフレームのように テキスト量が縦に多ければスクロールバーが出ます。 でもIEではでてこず、ずべてのテキストが長く下へ表示されます。 どうしてでしょうか、教えてください。 ※また、このサイトは左に１つ右へ上下２つの3ペイン画面なのですが、 これをすることによって、左と右を分けている境界線にグレーのラインを いれているのですが、これが真ん中から切れてしまいます（IEのみ）。 この因果関係などわかりますでしょうか。 下がソースです。 } div.●● { margin-left: 10em; padding: 1em; border-left: thin solid #c0c0c0 }
- ベストアンサー
- HTML
- 左側に設置したバナーの縦の長さを小さくしたいです
現在、無料cssテンプレートを使用して自社サイトを作成しています。 http://web-zen.sakura.ne.jp/index.html 左側のバナー関連が縦長になってしまい、しかし上司にはバナーの数を 減らす事はできないと言われ大変困っております。 そこで、バナーそのものの縦の長さを変更できないか質問してみます。 関係ありそうなcssのファイルの内容は、以下のとおりです。 @charset "UTF-8"; /* --------------------- * FONTSIZE MODEL * * --------------------- * 63% -> 10pxに相当 * 70% -> 11pxに相当 * 75% -> 12pxに相当 * 82% -> 13pxに相当 * 88% -> 14pxに相当 * 94% -> 15pxに相当 * 100% -> 16pxに相当 * 107% -> 17pxに相当 * 113% -> 18pxに相当 * 119% -> 19pxに相当 * 125% -> 20pxに相当 * --------------------- */ /* ========BASIC======== */ html { overflow-y:scroll; } body { margin:0; padding:0; line-height:1.6; letter-spacing:1px; font-family:Verdana, Helvetica, sans-serif; font-size:13px; color:#fff; background:#FFF; } br { letter-spacing:normal; } a { color:#d1d1d1; text-decoration:none; } a:hover { color:#666; } img { border:0; vertical-align:bottom; } h1,h2,h3,h4,h5,h6 { margin:0; } /* ========TEMPLATE LAYOUT======== */ #top { width:780px; margin:0 auto; } #contents { float:left; width:780px; } #side { float:left; width:220px; background:#181818; padding:10px 0; } #main { float:right; width:540px; padding:10px 0; } #footer { width:540px; margin-left:240px; } /* ========SIDE CUSTOMIZE======== */ #side h1 { margin:0; font-size:24px; } #side h1 a { color:#fff; } #side h1 a:hover { color:#ddd; } #side div.section { margin:0 10px; } /* ========MENU CUSTOMIZE======== */ #menu ul { margin:0 auto; padding:10px 0; } #menu li { color:#333; text-align:center; list-style-type:none; } #menu li a { display:block; width:220px; color:#f1f1f1; line-height:60px; } #menu li a:hover { color:#f1f1f1; background:#2d2d2d url("../images/bg_menu.gif") 0 0 repeat; } /* ========MAIN CONTENTS CUSTOMIZE======== */ #main #pr p { margin:0; padding:5px 0; } #main #icatch { margin-bottom:10px; } #main a { color:#d1d1d1; } #main a:hover { color:#f1f1f1; text-decoration:underline; } #main h2 { margin-bottom:8px; padding:0 0 0 10px; font-size:15px; font-weight:bold; line-height:35px; border:1px solid #3e3e3e; background:#181818; } #main h3 { clear:both; margin:20px 0 8px 0; padding:0 0 0 5px; font-size:14px; border-left:5px solid #3e3e3e; } #main h4 { margin-bottom:2px; font-size:14px; border-bottom:2px solid #f1f1f1; } #main h5 { margin-bottom:2px; padding:2px 5px; font-size:13px; background:#3e3e3e; } #main h6 { margin-bottom:2px; font-size:13px; border-bottom:2px solid #3e3e3e; } #main p { margin:0 0 1em 0; } #main dt { margin-bottom:3px; } #main dd { padding:0; margin:0 0 0.5em 1em; padding:3px; color:#ddd; background:#181818; } /* INFORMATION CUSTOMIZE */ * html body #main dl.information dd div { display:inline-block; } #main dl.information dt { float:left; width:10em; margin:0; padding:0; color:#fff; } #main dl.information dd { margin:0 0 0.5em 10em; padding:0; color:#fff; background:transparent; } #main table { width:100%; border-collapse: collapse; } #main table th { padding:5px; font-size:12px; text-align:left; border:1px solid #ddd; background:#181818; } #main table td { padding:5px; font-size:12px; text-align:left; border:1px solid #ddd; } /* ========PAGETOP CUSTOMIZE========= */ #pageTop { padding:10px 0; text-align:right; font-size:11px; } #pageTop a{ padding:0 0 0 12px; background:url("../images/bg_pagetop.gif") 0 60% no-repeat; } /* ========FOOTMENU CUSTOMIZE======== */ #footMenu ul { margin:0; padding:10px 0 0 0; text-align:right; border-top:1px solid #b4b4b4; } #footMenu li { display:inline; margin:0 0 0 10px; list-style:none; } #footMenu li a { padding-left:10px; background: url("../images/bg_footmenu.gif") 0 50% no-repeat; } よろしくお願いします。
- 締切済み
- HTML
お礼
ありがとうございます！