- ベストアンサー
外部スタイルシートへの記入方法について
serverservの回答
１つのクラスには複数のスタイルを指定することは出来ません。 そのため、ネットで探してこられたサンプルのように、複数の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; }
関連する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ボックスのひとつひとつがよく理解できるようになりました。 このまま即外部ファイルとして使えますので助かります。 この見本は５重に線を重ねているためとても立体的に見えてぜひ色々使いたいと思っていたので 本当に嬉しいです。 半分諦めていましたので助かりました。ありがとうございました。