外部スタイルシートへの記入方法について
- 外部スタイルシートへの記入方法について知りたいです。
- 外部ファイルにまとめて記載する方法を教えてください。
- タイトルや本文を指定した外部スタイルシートに記載する方法を教えてください。
- ベストアンサー
外部スタイルシートへの記入方法について
外部スタイルシートへの記入方法について 下記ボックスを利用したいのですが 外部ファイルにまとめて記載できたらと思いましたがどうも上手くいきません。 どなたか詳しい方にご教授願えないでしょうか、 よろしくお願い致します。 <div class="box_01"> この中にタイトルを記載と 本文を記載する </div> <TABLE width="400"><TR><TD> <DIV style="width : 400px"> <DIV style="border-width : 1px;border-color : #333333 ;border-style : solid"> <DIV style="border-width : 1px;border-color : #FFFFFF #999999 #999999 #FFFFFF;border-style : solid;"> <DIV style="background-color : #D0D0D0;padding : 1px"> <DIV style="padding : 3 3 4 3px;text-align : center">- タイトル -</DIV> <DIV style="border-width : 1px;border-color : #999999 #FFFFFF #FFFFFF #999999;border-style : solid;"> <DIV style="border : 1px #333333 solid;background-color : #FFFFFF;padding : 10px;"> <br><hr> ↓<BR> ↓<BR> <center> ↓<BR> ↓<BR> </center> ↓<BR> ↓<BR> <hr> </DIV> </DIV> </DIV> </DIV> </DIV> </TD></TR></TABLE> くれくれで恐縮ですがどうぞよろしくお願い致します。
- 100POINT
- お礼率50% (49/97)
- CSS
- 回答数4
- ありがとう数13
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
１つのクラスには複数のスタイルを指定することは出来ません。 そのため、ネットで探してこられたサンプルのように、複数のdivタグで箱を作ってデザインする必要があります。 書き方は他にもありますが、例として下記のような形になります。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>サンプル</title> <style type="text/css"> <!-- .wrap{ width:400px; border:1px solid #333; } .wrap2{ padding:1px; background:#D0D0D0; border:1px solid; border-color:#FFFFFF #999999 #999999 #FFFFFF; } .wrap_title{ padding:3 3 4 3px; text-align:center; } .wrap_contents{ border:1px solid; border-color:#999999 #FFFFFF #FFFFFF #999999; } .wrap_contents_bg{ padding:10px; background:#FFF; border:1px #333333 solid; } --> </style> </head> <body> <div class="wrap"> <div class="wrap2"> <div class="wrap_title">- タイトル -</div> <div class="wrap_contents"> <div class="wrap_contents_bg"> ここに本文を入力します。<br /> サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト。 </div> </div> </div> </div> </body> </html> 上記サンプルはCSSをHTMLのheadに直接書き込んでいますが、この設定を外部ファイルとして読み込む場合は、下記の部分のスタイル設定をCSSファイルにして、HTMLのheadにCSSファイルを読み込むタグを挿入します。 .wrap{ width:400px; border:1px solid #333; } .wrap2{ padding:1px; background:#D0D0D0; border:1px solid; border-color:#FFFFFF #999999 #999999 #FFFFFF; } .wrap_title{ padding:3 3 4 3px; text-align:center; } .wrap_contents{ border:1px solid; border-color:#999999 #FFFFFF #FFFFFF #999999; } .wrap_contents_bg{ padding:10px; background:#FFF; border:1px #333333 solid; }
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
聞きたいことが、上のシンプルなHTMLと、下の悲惨なHTMLとがつながらなくて、分からなかったのですが、下のtableを表示させて意味がわかりました。 それにしても下のTABLEでマークアップしたHTMLは酷いですね。 このコメントの最後にHTMLの全ソースを書いておきます。CSSもその中にあります。 ★HTML自体は、シンプルにして、classやidは使っていません。 ★CSSは基本的にタイプセレクタや子孫セレクタ、子供セレクタ、隣接セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#type-selectors )をつかっています。 私は、後での修正等が面倒になるので、idやclassセレクタは、必要ない限り使いません。 その分、一般/初心者向けの解説とは違う。 ★CSSはHTMLを置いた同じディレクトリにCSSホルダを作成して、そこにsample.cssという名前で保存すること ★文字コードは、すべてShift_JISで統一すること ☆HTMLはAnother HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ☆CSSはW3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証してあります。必ずチェックする癖をつけましょう。 下記は、下の<TABLE>についてのコメントです。 CSSの基本は、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/ )］より HTMLで文書を正しくマークアップした上で、プレゼンテーション(表現)をスタイルシートに任せようというのは、 14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) のためなのです。 示されたHTMLは、 ×デザイン・配置のために表を使用している。 →http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ×余白の制御のために<br.>を連続させている。 →http://openlab.ring.gr.jp/k16/htmllint/explain.html#continuous-brs ×<center>のような非推奨要素を使っている →http://openlab.ring.gr.jp/k16/htmllint/explain.html#deprecated-tag →http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/present/graphics.html#edef-CENTER 以下は、HTML全ソース（CSSはその中に書いてある。 <!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 http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:hoge@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <link rel="stylesheet" type="text/css" href="./CSS/sample.css" > </head> <body> <div> <h1>外部スタイルシートへの記入方法について</h1> <div> <p class="Question">下記ボックスを利用したいのですが、外部ファイルにまとめて記載できたらと思いましたがどうも上手くいきません。</p> <p>どなたか詳しい方にご教授願えないでしょうか、</p> <p class="message">よろしくお願い致します。</p> <h2>HTML</h2> <pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ***** <link rel="stylesheet" type="text/css" href="./CSS/sample.css" > ***** </head></pre> <h2>CSS</h2> <pre>@charset "Shift_JIS"; html,body{ margin:0px; padding:0px; background-color:rgb(60,60,255); } body>div{ width:60%; min-width:500px; max-width:800px; margin-left:auto; margin-right:auto; margin-top:20px; background-color:rgb(200,200,200); border:outset 2px gray; } body>div h1{ font-size:1.4em;margin:0.2em;text-align:center; } body>div>div{ border:inset 2px gray;background-color:white; } body>div>div p{ text-align:center;margin:0.2em 1em; } p.Question,p.message{ text-align:left;text-indent:1em; } body>div>div pre{ margin:0.5em 1em; padding: 0.5em 1em; border-style:inset; border-width:2px 4px 4px 3px; border-color:green; line-height:1.3em; color:white; background-color:rgb(0,60,10); } /* ./CSS/sample.css */</pre> </div> </div> </body> </html>
お礼
高尚で私にはよく理解できませんでしたが きっと模範的な素晴らしい回答をしていただいたように思います。 ネットで見つけて利用させて頂いてましたcssテーブルを何とか勉強がてら 簡単にできないか試行錯誤しましたがギブアップしてこちらでお聞きしようと 思い投稿させていただきました。 矢印等は本文を削除したため他のタグとともに残ってしまい 見て頂いた方に誤解を与えましたことも今後の反省とさせていただきます。 ご親切にありがとうございました。お礼申しあげます。
- 0909union
- ベストアンサー率39% (325/818)
もう一度、基本的なことをおさらいするといいですね。 よく見ると、Class名指定の構成です。でもＨＴＭＬオブジェクトにはそのクラス名が指定されていません。当然、反映されませんよね。 --------あなたの指定は全てクラス名指定ですね---------- .box{ } .title{ } ------改変後-------- .box_01{ } .title{ これは指定されているＨＴＭＬオブジェクトはありませんね } この指定方法は、ＣＳＳのバージョンによって拡張されています。ブラウザがどのバージョンに対応しているかで、動作が異なります。下記のサイトは割りと正確に記載されているので、参考にするといいでしょう。正確にはＷ３ＣのＨＰで確認を。 http://hp.vector.co.jp/authors/VA022006/css/selector.html http://msdn.microsoft.com/en-us/library/aa358816(VS.85).aspx （ＩＥ専用でもあるが、CSS3 バージョンがそれぞれに記載されている）
補足
不慣れで誤記載（転載）ですみません。 ************** .box_01{ } ************** は当然 ************** .box{ } ************** の事だったのですが <div class="box"> <div class="title"> </div> </div> よろしくお願い致します
- neko-ten
- ベストアンサー率55% (1287/2335)
したいことがさっぱりわからないのですが・・・。 各要素にClass指定してそれぞれのStyleを定義するのじゃだめなんですか？
補足
下記のようにしましたがうまく表示できませんでしたので お聞きしたかったのですが・・・ .box{ width : 400px; border-width : 1px;border-color : #333333 ;border-style : solid; border-width : 1px;border-color : #FFFFFF #999999 #999999 #FFFFFF;border-style : solid; background-color : #D0D0D0;padding : 1px; border-width : 1px;border-color : #999999 #FFFFFF #FFFFFF #999999;border-style : solid; border : 1px #333333 solid;background-color : #FFFFFF;padding : 10px; } .title{ padding : 3 3 4 3px;text-align : center; }
関連するQ&A
- ホームページビルダーでスタイルシートを使ったのですが？
今、ホームページビルダーで簡単な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; }
- ベストアンサー
- ホームページ作成ソフト
- スタイルシートで背景を伸ばしたい
以下のソースで、文字列のside side...の高さをmain,main...に揃えたいです。 色々試してみたのですが、side の文字のある側の背景が下まで伸びてくれません。 どうしたらよいでしょうか。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style TYPE="text/css"> <!-- body{ font-size: 10pt; text-align: center; } #container { width: 752px; border-left: 1px solid #599E3D; border-right: 1px solid #599E3D; } #main { float: right; width: 570px; background: #FFFFFF; } #side { float: left; width: 180px; background: #E0FFFF; border-right: 1px solid #F2992F; } --> </style> </head> <body> <div id="container"> <div id="main"> main<br> main<br> main<br> main<br> main<br> </div> <div id="side"> side<br> side<br> side<br> </div> </div> </body> </html>
- ベストアンサー
- HTML
- 外部スタイルシートが読み込めない
こんにちは。 外部スタイルシートが読み込めず 困っています。 HTMLは、 <html> <head> <link rel="stylesheet" href="controlbox2.css" type="text/css"> </head> <body> <div class="modal">syun</div> </body> </html> controlbox2.cssは .modal{ background-color:#fff; padding:10px; border:1px solid #333; } だけです。 もちろん同じディレクトリで あり何度も確認しています。 ブラウザは、IE7です。 ヘッダー部分に スタイルシートを書くと 当然効果があります。 <head> <style type="text/css"> .modal{ background-color:#fff; padding:10px; border:1px solid #333; } </style> </head> 文字コードは、ともに SHIFT_JISで保存しています。 何が悪いのか、 全くわかりません。 何か分かる人がいましたら、 よろしくお願いします。
- ベストアンサー
- HTML
- 直接書き込むCSSを外部ファイルに設定したい
CSS初心者です。下記の携帯テンプレートを使ってサイトを作りたいです。 タグに直接書き込むタイプのCSSが多いのですが、 このソースの一部を外部ファイルに設定するには、どういう書き方をしたら良いでしょうか？ 【外部に設定したい項目】 ★タイトル下線のMARGIN-RIGHT: 47% ★真ん中の線(画像位置)BACKGROUND-POSITION: 53% ★一番下線のMARGIN-LEFT: 53%; 外部にしたい理由は携帯とパソコンで見た時にそれぞれ線の位置を変えたいと思って いるからです。出来ますでしょうか？CSSに詳しい方、どうかお願いします(>_<) 【全タグ】 <html> <HEAD> <TITLE>TITLE</TITLE> </HEAD> タイトル <H1 style="PADDING-LEFT: 7px; MARGIN: 0px; PADDING-TOP: 10px; BACKGROUND-COLOR: #ffffff"></H1> <DIV style="BACKGROUND-POSITION: 53% 40%; BACKGROUND-IMAGE: url(http://deai.mokuren.ne.jp/up/src/up3891.gif); BACKGROUND-REPEAT: repeat-y"> <DIV style="BORDER-TOP: #000000 1px solid; MARGIN-RIGHT: 47%"> <P style="PADDING-RIGHT: 0px; PADDING-LEFT: 15px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 7px"></P></DIV> <DIV style="MARGIN-LEFT: 40%; PADDING-TOP: 17px"> <DIV style="WIDTH: 300px; MARGIN-RIGHT: 20px"> <H2 style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 13px; PADDING-BOTTOM: 2px; MARGIN: 0px 0px 3px; PADDING-TOP: 3px; BACKGROUND-COLOR: #000000"> <font color="#ffffff">コンテンツ</font></H2></font> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説２</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">その他</a></div> </DIV></DIV> <DIV style="MARGIN-LEFT: 53%; BORDER-BOTTOM: #000000 1px solid"> <P style="PADDING-RIGHT: 5px; MARGIN: 0px; PADDING-TOP: 17px" align=right></DIV></DIV> <P style="PADDING-RIGHT: 5px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; MARGIN: 0px; PADDING-TOP: 5px" align=right> </HTML>
- 締切済み
- CSS
- タグに直接書き込むスタイルシートを、外部あるいはページ内にわけるには？
下記テンプレートソースですが、タグに直接書き込むスタイルシートになっています。 このソースを、外部あるいはhead内に設定するには、どういうわけ方をしたらいいですか？ いろいろ自分で試したのですが、うまく表示されません宜しくお願いします。 <table><tbody><tr><td> <div style="border:1px solid #ff6699;background:#ffcccc;font-size:13px"><div style="padding:3px" align="center"> ＊ ここにタイトル ＊ </div><div style="border-top:1px solid #ff6699;background:#fff;padding:10px" align="left"> ＊ ここに本文 ＊ </div></div> </td></tr></tbody></table>
- ベストアンサー
- HTML
- この部分の画像を入れるには・・？？
<!--＊ はじめ ＊--> <table><tbody><tr><td> <div style="border:1px solid #ff6699;width:400px"><div style="border-width:3px;border-style:solid;border-color:#fff #ffbbbb #ffbbbb #fff;background:#ffcccc;padding:4px"><div style="border:3px dotted #fff;padding:4px"><div style="border-width:3px;border-style:solid;border-color:#ffbbbb #fff #fff #ffbbbb"><div style="border:1px solid #ff6699;background:#fff;font-size:13px;color:#ff6699;padding:15px"> <img src="写真ＵＲＬ" width="幅(ピクセル)" height="高さ(ピクセル)" border="0" align="left" style="margin:0 7px 0 0"> <b>ＨＮ</b> ☆ プロフィール <hr style="border-style:solid;color:#ff6699;height:1px"> <b>職業／学校</b> ☆ プロフィール <hr style="border-style:solid;color:#ff6699;height:1px"> <b>住んでるとこ</b> ☆ プロフィール <hr style="border-style:solid;color:#ff6699;height:1px"> <b>性別</b> ☆ プロフィール <hr style="border-style:solid;color:#ff6699;height:1px"> <b>年齢</b> ☆ プロフィール <hr style="border-style:solid;color:#ff6699;height:1px"> <!--＊ おわり ＊--> すいません。上記のタグは、ＨＰ用のプロフィールなんですが、写真を入れることのできるプロフィールなんです。。 が、上のほうに、写真ＵＲＬというのが、あって、多分そこに写真を入れるんですが、写真ＵＲＬって何ですか？マイピクチャーに入れてる写真を使うのですがＵＲＬなんかないです。。 どうしたらいいんでしょうか？
- ベストアンサー
- レンタルサーバ・ASP
- Opera（10.10）でのスタイルシートの表示について
Opera（10.10）でのスタイルシートの表示について Operaでのスタイルシートの「border」の表示について質問させて下さい。 これは例ですが、HTMLとCSSを以下のとおりに設定しているとしますね。 ------------------------------------------------------------------ <body> <div id="layout"> <div id="box1"> <p>ボーダーのテスト</p> </div> </div> </body> ------------------------------------------------------------------ *{ margin : 0px; padding : 0px; } #layout{ width : 800px; height : 600px; padding : 10px; margin-left : auto; margin-right : auto; background-color : #FFF; } #box1{ width : 780px; height : 580px; padding : 10px; border-top : solid 1px #D1D1D1; border-left : solid 1px #D1D1D1; border-right : dashed 1px #D1D1D1; border-bottom : dashed 1px #D1D1D1; background-color : #FFF; } ------------------------------------------------------------------ このように設定した場合、「id="box3"」のボーダーは上と左が直線、 右と下が点線と表示されるのが正しい表示だと思います。 しかし、Operaで閲覧した場合なぜか「border-left」のみ表示されません。 「border-left」を「solid」から「dashed」に変更すると表示されます。 borderに合わせてwidthもちゃんと横に伸びているので、 CSSが適用されていないわけではないと思います。 また、「border-left」を「dashed」から「solid」に変更した場合には、 「border-top」と「border-right」の両方が見えなくなってしまいます。 どちらの問題も、IE6やFirefox（3.5.7）では指定通り正しく表示されました。 Operaでも同様に正しく表示させるにはどうすればよいのでしょうか。 よろしくお願いいたします。
- ベストアンサー
- HTML
- 外部スタイルシートは同じなのですが…
こんばんは。 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
- スタイルシートについて
スタイルシートについて質問です。 下記をTableの基本スタイルにしています。 特定のTableのみ、borderカラーを#666666にしたい場合 上記基本スタイルを生かしたままで簡潔なスタイルの設定方法はないでしょうか。 table, td, th {border: 1px solid; border-collapse: collapse} .w550 {border-color: #8AC5D4; width:550px} .w550 td {border-color: #8AC5D4; text-align: center} .w550 th {border-color: #8AC5D4; padding: 5px; padding-left: 10px; color:#2A6D90} いつもスタイルシートの設定が大量になってしまう為、今回はどうにか簡潔で綺麗にしたいので アドバイスいただけると大変助かります。 どうぞ宜しくお願い致します。
- ベストアンサー
- HTML
- ＣＳＳを消して表に色を付けたい！！！
参考サイトのソースをそのまま使って編集してたら、表を挿入して、色を付けようとしたら「ＣＳＳが設定されているため・・・」と出て表に色がつけられません。 <!-- BODY { MARGIN-TOP: 3px; COLOR: #000000; BACKGROUND-COLOR: #e6eee6; TEXT-ALIGN: center ;} TABLE { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px; WIDTH: 900px; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px ;} TD { FONT-SIZE: 11pt; MARGIN: 0px; WIDTH: 140px; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #48D1CC; TEXT-ALIGN: center ;} DIV { BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; BORDER-LEFT: #999999 1px solid; WIDTH: 900px; BORDER-BOTTOM: #999999 1px solid; BACKGROUND-COLOR: #ffffff ;} .menu { BORDER-RIGHT: #66cc99 0px solid; PADDING-RIGHT: 3px; BORDER-TOP: #66cc99 0px solid; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #66cc99 0px solid; WIDTH: 100%; COLOR: #ffffff; PADDING-TOP: 3px; BORDER-BOTTOM: #66cc99 0px solid; BACKGROUND-COLOR: #1E90FF; TEXT-DECORATION: none ;} .menu:hover { COLOR: #004411; BACKGROUND-COLOR: #FFF8DC ;} .close { BORDER-RIGHT: #ff0000 1px solid; BORDER-TOP: #ff0000 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 11pt; BORDER-LEFT: #ff0000 1px solid; COLOR: #dd0000; BORDER-BOTTOM: #ff0000 1px solid; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none ;} .close:hover { COLOR: #ffffff; BACKGROUND-COLOR: #ff0000 ;} --> １．ＣＳＳを全て解除しなければいけないのですか？ ２．メニューにカーソルをあてたら色が変わるようにしています。表に色をつけるようにするには、どこを削除すればいいのですか？
- 締切済み
- HTML
お礼
ご回答ありがとうございました。 質問するのもなかなか難しいものだと思いましたが、意味を汲んでいただき当にこのようにできたらいいなと思いいろいろやってみましたができませんでした。 このようにシンプルにできるとDIVボックスのひとつひとつがよく理解できるようになりました。 このまま即外部ファイルとして使えますので助かります。 この見本は５重に線を重ねているためとても立体的に見えてぜひ色々使いたいと思っていたので 本当に嬉しいです。 半分諦めていましたので助かりました。ありがとうございました。