- ベストアンサー
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% (477/626)
- その他（プログラミング・開発）
- 回答数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 記述方法など間違えているところがあるかも知れません。 よろしければご指導頂けましたら幸いで御座います。 また、今後ご質問させていただく際はなるべく詳しくご説明できるように、楽手させていただきます。 ご回答ありがとう御座いました
お礼
ご回答頂きまして誠にありがとう御座います。 まだ正直良く理解できない部分があるのですが少し自分なりに 実行してみました。 http://technocompany.web.fc2.com/ よろしければ拝見してみてください。 現段階で少し気になるのは、テスト画像3を{text-align: right} にしているのですが、何故か中央揃えになってしまったり、現在枠の部分を div#border という場所で記述をしているのですが、するとh1の部分も一緒に中央揃えになってしまうなどあり、それならば、枠の幅だけをべつの場所にcssとして記述したほうが良いのでしょうか？ うまく説明が出来ないのですがよろしければ拝見してみてください。 ご回答ありがとう御座いました なお再質問させていただく場合は、このような形でご質問をさせていただいても良いものなのでしょうか？