- ベストアンサー
cssの書き方について
始めましてpcckitと申します。cssには全くの初心者ですがよろしくお願いします。メモ帳でcssで構成したホームページを作成しようと考えております。そこでまずは下記のように記述をしました。 body {background-color: #87ceed; text-align: center} div#border {border-style: solid; border-width: 2px; padding: 20px; background-color: #ffffff; width: 700px} 上記のようにしたところ、画面に枠が出来て、その枠の中に740×458 の画像を入れて確認をしたところ、枠からはみ出してしまいました。 やはりこれは、width: 700px}にしているからでしょうか？ 上記の状態でＩＥでは正常に表示されるのですがFire foxで見ると やはり画像が枠からはみ出していたり、枠そのものが左に寄ったりしています。 また、枠の中に文字や画像を入れて中央ぞろえや、両端ぞろえなどしたいのですが、うまく行きません。ご指導の程よろしくお願いします。
- pcckit
- お礼率76% (472/621)
- その他（プログラミング・開発）
- 回答数5
- ありがとう数2
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
サイトを拝見させていただきました。 私なりに推測して、下のようなソースにしたのですがどうでしょう？ ・cssの部分 body{ background-color: #00ffff; text-align: center; } div#border{ border-style: solid; border-width: 2px; padding: 20px; background-color: #ffffff; width: 800px; text-align: left; margin:0 auto; } h1{ font-size: 1.5em; } p { font-size: 2.0em; } #img2 { text-align: right; } #font{ text-align: center; color: #66aa66; font-style: normal; } #font1 { text-align: left; color: #000080; font-style: italic; } #font2{ text-align: justify; color: red; font-style: oblique; font-weight: bold; text-justify : inter-ideograph ; } ・htmlの部分 <body> <div id="border"> <h1>テストテストテスト</h1> <img src="img/gg6i4.gif" alt="テスト画像1" width="740" height="458" /></a> <p id="img1"><img src="img/eeyty.gif" alt="テスト画像2" width="450" height="25" /></p> <p id="img2"><img src="img/555.jpg" alt="テスト画像3" width="190" height="196" /></p> <p id="font"> <br />私は現在cssの学習をしております。 <br />しかし中々うまく行きません。 <br />中央揃え </p> <p id="font1"> <br />私は現在cssの学習をしております。 <br />しかし中々うまく行きません。 <br />左揃え </p> <p id="font2"> 書き忘れましたが、中央ぞろえや、両端ぞろえと言うことなので、text-alignプロパティを指定しても、思ったように表示されないと言うことだと思うのですが、このように表示させたいのに、こう表示されてしまう。と言うように具体的な説明がないと、なかなか良い回答は得られないと思います。<br /> 両端揃え </p> <p> 書き忘れましたが、中央ぞろえや、両端ぞろえと言うことなので、text-alignプロパティを指定しても、思ったように表示されないと言うことだと思うのですが、このように表示させたいのに、こう表示されてしまう。と言うように具体的な説明がないと、なかなか良い回答は得られないと思います。<br /> 指定なし </p> </div> </body> </html> ・参考になると思われるサイト http://nagomin0123.web.fc2.com/centering/m_centering.html http://w3g.jp/css/text/text-align http://w3g.jp/css/ext/text-justify
その他の回答 (4)
- qualheart
- ベストアンサー率41% (1451/3486)
No2です。 確認させていただきました。 ＞テスト画像3を{text-align: right} にしているのですが、何故か中央揃えになってしまった この件は、単純にdiv#img2と{の間に全角スペースが入っているため、「text-align: right」自体が認識されていないだけです。 全角スペースは文字と認識されてしまいますので、スペースは必ず半角スペースを使ってください。半角スペースにすれば右寄せで表示されます。 ただし、DIVの標準の横幅はブラウザの仕様によって異なる場合があります。IEやFirefoxではDIVにwidthを指定しなかった場合、表示領域に対して100%の横幅になるので右寄せすれば中身の要素は右に寄りますが、ブラウザによってはDIVの横幅が中身の要素にぴったり合うサイズがデフォルトになってしまうことがあります。 ですので、DIVに対してはなるべくwidthを指定しておく方が無難です。 ＞div#border という場所で記述をしているのですが、するとh1の部分も一緒に中央揃えになってしまう 上記の件は、H1でtext-alignを指定していないので当然ですね。 text-alignの設定は、その要素自体に指定されていなければ、その要素を囲っている親要素の設定に従います。 つまりH1を囲っている親要素はdiv#borderになりますので、ここで指定されたtext-alignの設定がH1にも適用されてくるわけです。 なので答えは「枠の幅だけをべつの場所にcssとして記述」ではなく、「H1のtext-alignをCSSに記述」です。 DIVは子要素をとりまとめるためのブロック要素です。 基本的には、DIVで基本的なtext-alignを設定し、その子要素に対してDIVに設定したtext-alignとは異なる設定をしたい場合は、各要素に対しtext-alignを設定するという形になります。 CSSは子要素＞親要素という形で適用されます。 親要素で標準の値をまとめて設定し、個別に設定する必要のあるものは各子要素にて設定する、というのがセオリーとなります。 ＞なお再質問させていただく場合は、このような形でご質問をさせていただいても良いものなのでしょうか？ 今回の補足質問は元の質問をより詳細にするために発生したものですので、補足による追加質問でも良いと思いますよ。
- po-pe-tian
- ベストアンサー率76% (40/52)
書き忘れましたが、中央ぞろえや、両端ぞろえと言うことなので、text-alignプロパティを指定しても、思ったように表示されないと言うことだと思うのですが、 このように表示させたいのに、こう表示されてしまう。と言うように具体的な説明がないと、なかなか良い回答は得られないと思います。
- qualheart
- ベストアンサー率41% (1451/3486)
まずIEとFirefoxでの表示の違いですが、基本的にFirefoxが正しくてIEが間違っていると考えましょう。 記述通りのCSSであれば、Firefoxでの表示が正しいです。 ちゃんと表示できてないのはIEの方なんです。 したがってwidth:700pxのDIVに740pxの画像を配置すと枠からはみ出すのは当然と言うことです。 それをふまえて、どうすべきか多少アドバイスさせていただきます。 まずbodyに対してtext-alignを指定するのはスマートじゃありません。text-alignは各DIVかその下要素のタグに対して指定しましょう。 もし全体を中央寄せしたいという意図であれば、bodyに対して margin-left:auto; margin-right:auto; を追加してください。 ただしCSSに上記を追加しただけでは、ブラウザによって全体が中央寄せされない場合があります。 それも正しい仕様で、基本的にHTMLの先頭にはどのDOCTYPEを使っているか宣言する必要があるためです。 ですので、HTMLファイルの一番先頭（<HTML>の前）に <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> というDOCTYPE宣言を必ず追加してください。 上記両方を記述すれば、基本的どのブラウザでもDIV枠は中央に表示されるはずです。 あと、DIV枠から画像がはみ出すのは、DIV枠が画像より小さければ当然ですので、画像にあわせてwidthは調整してください。 また、文字や画像の中央揃えは、文字を囲むタグまたは画像自体にalign属性を設定すればちゃんと表示されると思います。
- po-pe-tian
- ベストアンサー率76% (40/52)
width:700pxにしているからです。 Firefoxの方が正しい解釈です。 ボックスから内容がはみ出しても、ボックス自体の大きさは変わらない。と言うのが正しい解釈です。 overflowプロパティ(ボックスから内容がはみ出したときの振舞いを指定できるプロパティ)が指定されていないので、規定値であるvisibleが指定されていることになっています。 visibleが指定されていると言うことは、ボックスからはみ出した内容をボックスからはみ出して表示させると言うことです。 正常に表示させるためには、画像を小さくするか、ボックスの幅を広げるかで、画像よりもボックスの幅の方が大きい状態にしましょう。 http://w3g.jp/css/display_position/overflow http://nagomin0123.web.fc2.com/overflow_visible/overflow_visible.html
お礼
ご回答頂きましてありがとう御座いました。 まずwidthについては画像サイズより枠のサイズを大きくすれば良いのですね。ありがとう御座いました。自分なりに色々とやってみたのですがよろしければ拝見してみていただけませんでしょうか？ http://technocompany.web.fc2.com 記述方法など間違えているところがあるかも知れません。 よろしければご指導頂けましたら幸いで御座います。 また、今後ご質問させていただく際はなるべく詳しくご説明できるように、楽手させていただきます。 ご回答ありがとう御座いました
関連するQ&A
- ＣＳＳを消して表に色を付けたい！！！
参考サイトのソースをそのまま使って編集してたら、表を挿入して、色を付けようとしたら「ＣＳＳが設定されているため・・・」と出て表に色がつけられません。 <!-- 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
- Opera、ネスケでcssが崩れます
DreamWeaverMXで作業しています。 ブラウザはLunascape（Netscapeから生まれたもの？）とIE6を使用、確認していましたが、 アップ後にOpera9、Netscape、Mozila Firefox1.5で確認したところ CSSが崩れていることに気づきました。 左右のフロートが崩れており、この回避方法を調べましたが よくわかりません。。。。 過去の教えて！から、下記URLを参考にしましたが それでも理解できません。涙 http://members.at.infoseek.co.jp/cssbug/detail/opera.html http://www.keynavi.net/ja/bugh/index.html どなたか制作に詳しい方、助けてください…！ ---------------------------------------- <link rel="stylesheet" href="web.css" type="text/css" media="screen"> --------------- #body{ margin:auto; width: 700px; padding-top: 0px; } #page{ background:#ffffff 700px; width:700px; font-size:11px; color:#585858; border-right: 1px solid #585858; border-bottom: 1px solid #585858; border-left: 1px solid #CCCCCC; border-top-width: 1px; border-top-style: solid; border-top-color: #CCCCCC; } #left{ width:180px; float:left; text-align:left; padding-top: 5px; padding-right: 5px; padding-left: 5px; background-color: #797979; height: 100%; padding-bottom: 10px; margin-left: 1px; border-top-width: 10px; border-top-style: solid; border-top-color: #FFFFFF; } } #right{ width:480px; text-align:left; float: right; margin-right: 3px; padding: 15px; margin-top: 8px; } --------------------------------
- ベストアンサー
- HTML
- css
こんにちは、CSSの勉強をしています。 書籍に下記のようなCSSが書かれてありました。 .photoBoxL .photoSpace, .photoBoxR .photoSpace{ position: relative; left: 0px; top: 0px; border-left: solid 1px #999999; border-bottom: solid 1px #999999; background-color:#FFFFFF; padding: 5px; } これはどのように読めばいいのでしょうか？ 「.photoBoxLというクラスの中にある.photoSpace」と、「.photoBoxRというクラスの中にある.photoSpace」の二つに対して設定するという意味なのでしょうか？ 何かお分かりの方がいましたら教えてください。 よろしくお願いします。
- ベストアンサー
- その他(業務ソフトウェア)
- FireFoxでCSSのボーダーが反映されません
FireFoxでのCSS表示について教えて下さい。 現在、IEでは見れるものがFireFoxで反映されておりません。 どこかに原因があるとは思うのですが、見つからないのです。。。涙 Bodyとページ全体のCSS、及び問題箇所のCSSを記述します。 #body { margin: 0px; width: 100%; padding: 0px; border: 0px; height: auto;} #page { background-color: #ffffff; width: 746px; height: auto; margin: 0px; padding: 0px; border-collapse:collapse; border: 0px; border-spacing:0px;} #page td {line-height: 120%; font-size: 12px; color: #000000;} #contents1 {width: 746px; border-collapse:collapse; border-spacing:0px; margin:0px 0px 5px 0px;} border: 1px solid #666633; #contents td {font-size: 12px; line-height: 120%; color: #000000; padding-top: 2px; padding-bottom: 2px;} #contents2 {width: 350px; height: 45px;} #contents2 td { border: 1px solid #999999; font-size: 12px;} ※contents1は外枠のみボーダーカラーをつけたいと思います。 contents2では、tdのみ枠をつけて、外枠は表示させたくありません。 (大枠の中にいくつか枠付きの行が表示される状態にしたいです) idではなくclassにする方が良いのでしょうか？ CSSについては独学なので、記述もほとんどDW頼りです。 参考サイトなどご存知でしたら教えて下さい。。。 以上、よろしくお願いいたします。
- ベストアンサー
- CSS
- cssで枠の中に複数の罫線を引く方法
よろしくお願いします。 枠を作成するためにcssに以下の記述をしました。 【css】 border-top:3px solid #339900; border-left:3px solid #339900; border-right:3px solid #339900; border-bottom:3px solid #339900; padding: 0px; background-color:#ffff00; これにより外枠のみに罫線が引かれましたが、枠の中に縦線や横線 その他、点線等を引く場合にはどのような記述をすれば良いのでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- CSSでtext-align
不思議な現象が起きてます。 2行7列の表を作って、 2行目の3～5列と7列目を右寄せにしたいがために、 <td class="right"> で外部CSSに .right{ text-align:right; } と記述したところ適用されませんでした。 しかしインラインで <td style="text-align:right;"> と書くと右寄せになるんです・・・ 原因がわからずこまっています。 ちなみに <td align="right"> でも表示されませんでした・・・ table全体には以下のCSSが外部で適用されてます、 div.gray_box { background-color: #FFFFFF; border-color: #CCCCCC; border-style: solid; border-width: 1px; padding: 1px 0 1px 0; } table.wide_table_border { border: 1px solid #FFFFFF; border-collapse:collapse; margin: 0px auto; padding: 5px; width: 100%; } あまり関係ないとは思うのですが一応載せておきます。 目的としては、必ず外部CSSに記述することです。
- ベストアンサー
- HTML
- CSSを独学中です。が背景の設定がどうしてもうまくいきません。
CSSを使ってwebを作ろうとしている素人です。 header（見出しのロゴなど） main この中にコラムを２つ。左コラムに縦並びメニュー 背景画像あり。 footer（copyright表記など） 色はグレー。 いろいろ参考資料を見ながら、このような構成にしたのですが、 本文(main)のところが、footerと同じグレー１色になってしまい、 予定していた背景画像が表示されません。 とりあえず全体的なレイアウトは何とか大丈夫なようなのですが、 何か原因がお分かりでしたらご教示いただけると幸いです。 おそらく単純なミスなのかもしれませんが。 以下に、cssとhtmlファイルの抜粋を載せておきます。 ------- css ------- body { margin: 0; padding: 0; background-color: #999999; color: #FFFFFF } .header {略} .main { padding: 0px; background-color: #FFFFFF; color: #000000; background-image: url(images/background-check.gif); } .footer{ clear: both; padding: 2px 0 2px 0; border-top: solid 1px #333333; color: #FFFFFF; text-align: center; } p { margin: 0 0 12px 20px; padding: 0; line-height: 130%; color: #000000 } ul { list-style: none; margin: 0; padding: 0; } img { border: none; } /*------ 左の縦メニュー------------ */ .menutate { width: 120px; margin: 0px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } .menutate li a { height: 32px; text-decoration: none; } .menutate li a:link, .menutate li a:visited { color: #FFFFFF; display: block; background: url(images/menutate.gif); padding: 8px 0 0 5px; } .menutate li a:hover, .menutate li #current { color: #990099; background: url(images/menutate.gif) 0 -32px; padding: 8px 0 0 5px; } /*-------- コラム分け---------------- */ .leftcolumn { float: left; width: 120px; } .rightcolumn { float: left; overflow: auto; padding: 0 0 0 20px; } /*----- 本文-------------- */ h1{ padding: 6px 5px 6px 5px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 15px solid #CC0099; background-color: #FFFF99; } h2{ padding: 2px; border-left: 15px solid #CC0099; border-bottom: 1px solid #666666; } ------ html ------ <body> <div class="header"> （略） </div> <!-- メインパート --> <div class="main"> <!-- 左のタテメニュー --> <div class="leftcolumn"> <div class="menutate"> <ul> <li><a id="current" href="index.html">home</a></li> <li><a href="others.html">others</a></li> <li><a href="aboutme.html">about me</a></li> </ul> </div> </div> <!-- 右のコラム --> <div class="rightcolumn"> <h1>いろいろ</h1> <h2>あれこれ</h2> <p>などなど</p> </div> </div> <div class="footer"> Copyright: 2007 xxx. All rights reserved. </div> </body> </html>
- 締切済み
- CSS
- cssでのレイアウトの仕方
次の2ファイルを作成しました。 ---index.html <html> <head> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="notice"> <dl> <dt>タイトル</dt> <dd class="noticeDesc"><p>→一覧</p></dd><br /> <dd class="noticeBox"> <ul> <li>リスト１</li> <li>リスト２</li> </ul> </dd> </dl> </div> </body> </html> ---index.htmlここまで ---style.css @charset "utf-8"; .notice { width: 210px; background-color: #ffff00; border-bottom-style: solid; height: 80px; } .notice dl { background-color: #00ffff; border-top-style: solid; } .notice dt { padding-top: 3px; padding-right: 5px; padding-bottom: 2px; padding-left: 5px; border-right-style: solid; border-left-style: solid; border-bottom-style: solid; } .notice .noticeBox { margin: 0px; padding: 0px; background-color: #00ffff; border-bottom-style: solid; } .notice .noticeDesc p { width: 60px; position: absolute; top: 3px; right: 5px; line-height: 1; } .notice dd { border-right-style: solid; border-left-style: solid; float: left; width: 204px; margin: 0px; padding: 0px; } ---style.cssここまで ここの掲示板は画像をUPしてもかなり劣化されてしまうのでどれだけ見えるかわかりませんが実際に表示したイメージも添付しました。 これで希望と違うところが2点あります。 ●「→一覧」というのは「タイトル」と同じ箱の中に右詰めで表示したい ●「タイトル」の箱の周りの枠と下の「リスト」が入った箱の隙間は開けたくない 何通りかのやり方があるんだとは思いますが、style.cssの方を修正する方法でどこをどう調整すればよいのか教えてください。 よろしくお願い致します。
- ベストアンサー
- CSS
- CSSでバックグラウントカラーの途切れを直したい
CSS初心者です。 CSSでfloatを利用してプロックを左右に並べています。 その際、左のブロックにbackground-colorを指定していますが、右のブロックの情報が多かった場合に、background-colorが途中で終わってしまいます。 どのようにしたらよいでしょうか。 下記のCSSもおかいしところがあるかも・・・指摘をお願いします。 #page { width: 750px; margin-right: auto; margin-left: auto; text-align: left; border: 1px solid #666666; margin-bottom: 0px; } div.blocka{ float: left; background-color: #FFC556; width: 150px; margin:0px 0px 0px 0px; padding:5px ; border-right:1px solid #666666 ; } div.blockb { float: left; margin:0px 0px 0px 0px; padding:10px ; width: 550px; }
- ベストアンサー
- HTML
- 【急ぎます！】ページ幅を解除と、メニューの色を変更するには
http://flash.xtaro.com/sozai/tool/fcount/sample.htmここを参考にＨＰを作っています。 <!-- 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: 700px; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px ;} TD { FONT-SIZE: 11pt; MARGIN: 0px; WIDTH: 140px; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #66cc99; TEXT-ALIGN: center ;} DIV { BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; BORDER-LEFT: #999999 1px solid; WIDTH: 700px; 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: #339966; TEXT-DECORATION: none ;} .menu:hover { COLOR: #004411; BACKGROUND-COLOR: #bbffdd ;} .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 ;} --> (1)メニュー１や２の色を変更するにはどうすればいい？ (2)ページ背景色をhttp://www.kds.kddi.com/topics/index.htmlのようにグラデーションにするにはどうすればいい？ (3)ページ幅を変更するにはどうすれいい？
- ベストアンサー
- HTML
お礼
ご回答頂きまして誠にありがとう御座います。 まだ正直良く理解できない部分があるのですが少し自分なりに 実行してみました。 http://technocompany.web.fc2.com/ よろしければ拝見してみてください。 現段階で少し気になるのは、テスト画像3を{text-align: right} にしているのですが、何故か中央揃えになってしまったり、現在枠の部分を div#border という場所で記述をしているのですが、するとh1の部分も一緒に中央揃えになってしまうなどあり、それならば、枠の幅だけをべつの場所にcssとして記述したほうが良いのでしょうか？ うまく説明が出来ないのですがよろしければ拝見してみてください。 ご回答ありがとう御座いました なお再質問させていただく場合は、このような形でご質問をさせていただいても良いものなのでしょうか？