- ベストアンサー
スタイルシートでデザイン
現在スタイルシートを使ってホームページを作成中の者です。 しかしそのデザインがうまくいかず困っております。 文字が中央に打ってある長方形の赤枠があります。 間２０PXくらいあけて平行にまた文字が中央に表記されてある枠を置きたいのですがうまくいきません。 marginとpaddingでpxを指定しているのですが両者の枠が平行にならず 片方の枠が下の方に下がってしまいます。 視覚化するとこんな感じにしたいのですが ーーーーーー ーーーーーー ｜ 映画 ｜ ｜ 小説 ｜ ーーーーーー ーーーーーー いつも ーーーーーー ｜ 映画 ｜ ーーーーーー ーーーーーー ｜ ｜ ーーーーーー とこんな感じに片方の枠が下の方にずれてしまいます。 指定の仕方に問題があると思うのですが、 何分初心者なもんでよく分かりません。 marginは右枠４０px５５０px１５０px３０px 左枠１０px５５０px１５０px３０px にしています。 上をそろえさえすれば両枠平行になるだろうと思っていたのですが 全くなりません。ずれるばかりです。 わかりにくい説明でふがいないですが どなたかお分かりの方おられればよろしくお願いします！
- --w--
- お礼率29% (35/117)
- その他（プログラミング・開発）
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
[映画]と[小説]の間が折り返されているのかも知れません。 [映画]と[小説]を折り返さずに表示できる領域を指定しておけばいいかも知れません。 下の例では<div class="menu">でこの領域の幅をwidth: 700px と十分大きく取っています。 <html> <head> <style> div.menu { width: 700px; } div.menu span.item { display: inline-block; border: solid 1px red; padding: 4px; width: 80px; text-align: center; } /* 上 右 下 左 */ span#movie { margin: 10px 150px 30px 150px; } span#novel { margin: 10px 50px 30px 150px; } </style> </head> <body> <div class="menu"> <span id="movie" class="item">映画</span> <span id="novel" class="item">小説</span> </div> </body> </html>
その他の回答 (2)
- koutarou504
- ベストアンサー率44% (182/407)
まずはマージンの指定を短縮形から個々の指定に代えて見てみてはいかがでしょうか？ margin-top, margin-right, margin-bottom, margin-left と明示的にどこをいくつにと・・・。 意外と意図と違う指定をされているのではないでしょうか？ なにせ、右マージン 550px だと 両方合わせて 1100px ・・・。 1024 * 768 でも入りきりませんが・・・。 まずはそこからかと。 その後、HTMLタグの選択とか CSSでの表示位置指定等々の検討など考えれば良いと思います。 尚、今回の検証方法は、 左右に表示したい要素の外側にSPAN等要素を用意して 背景色を指定する事により その内側の「右枠」「左枠」がどこまで領域を保持しているか検証した事により確認しました。 <span style="background-color:#ffffcc;"> <span style="border:solid; margin:10px 550px 150px 30px;">aaa</span> <span style="border:solid; margin:40px 550px 150px 30px;">bbb</span> </span> これが検証時の記述です。 今後の検証への参考に。
- koma1000nin
- ベストアンサー率30% (342/1133)
私なら「表」を使って解決します。 表のセルの中には、別の表を置けますので、このテを使って何も記入しないセルをmarginやpaddingの代わりに使います。最後に枠を非表示にします。 Visualでできるのがいいところですね。
関連するQ&A
- スタイルシートを使って段組でのバディングは？
書籍にのっていたスタイルシートでの段組を 次のように記述してみました。 <DIV style="float:left;border-right:3px dashed #000000;width:50%;padding-left:10px;"> ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ </DIV><DIV style="padding-left:10px"> ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ </DIV> 中央に点線が入って文章が左右に分けられるのですが、 文字と中央線の余白がないので、paddingやmarginを使って みたのですが、特に右側文章の左にある点線と文字の空間がどうしてもできません。（左側部分のの左右余白は機能するのですが） tableを使ったときはpadding-leftで設定できたのですが、正しい方法がありましたらお教えください。 書籍にもここらへんの説明がないのです。
- ベストアンサー
- ホームページ作成ソフト
- スタイルシートが効かない
bodyに以下のスタイルを適用しています。 body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; font-family: 'Arial', 'ＭＳ Ｐゴシック', sans-serif; font-size:12px; line-height:150%; color:#333333; } フォントサイズを12にしているのですが 別のフォントサイズとしてクラスで10pxを指定しても WindowsIEだと、10pxに表示されません。 また、bodyの12pxの指定をはずしても 10pxの指定が反映されませんでした。 ただし、16pxなど他のクラスだと反映されます。 10pxが反映されない理由が分かりません。 どなたかお分かりになる方 いらっしゃいましたら、ご教授願います。 よろしくお願いします。
- ベストアンサー
- その他(業務ソフトウェア)
- スタイルシートの横並びリスト中央配置について
#Area_Navi { margin: 0; padding: 0; } #Area_Navi ul { margin-left: auto; margin-right: auto; text-align: center; list-style-type: none; list-style-position:inside; } #Area_Navi li { text-align: center; display: inline; padding: 0; margin-left: auto; margin-right: auto; float: left; width: 200px; } #Area_Navi a { display: block; border-left: 1px solid #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000; background-color: #FFFFFF; font-size: 20pt; padding: 3px; text-decoration: none; color: #000000; margin: 1px 0px; text-align: center; } スタイルシートは上記なのですが、うまく中央配置されず 半端に左寄せになっています。 windows7 firefox を使用しています。 調べて position:relative; と記載しても上手く中央寄せになりませんでした。 どなたか、教えて頂けませんか。 宜しくお願い致します。
- ベストアンサー
- CSS
- fc2ブログのスタイルシートについて
h1～h6タグの文字の大きさ＆改行（しない）を変更したいのですが、 fc2ブログのスタイルシートのどこに書き込めばいいのか分からない状態です。 色々調べてみたのですが、どうしても分からないので、分かる方がいましたら、教えて下さい。 よろしくお願いします。 ソースは、こちらになります。 （文字数が足りないので数ヵ所省きました）↓ body{ font-family: "Verdana","ＭＳ Ｐゴシック", "MS UI Gothic","Arial","Osaka"; margin:0px; margin-left:auto; margin-rught:auto; padding:0px; background-color: #FFFFFF; color:#666666; text-align:center; letter-spacing:1px; word-break: break-all; } #container{ width:840px; margin-right:auto; margin-left:auto; padding:0px 0px; background-color: #FFFFFF; border-left:1px solid #DECE21; border-right:1px solid #DECE21; } /* ### 共通のタグ ### */ blockquote{ font-family: "MS UI Gothic","Verdana","ＭＳ Ｐゴシック", "Arial","Osaka"; margin:15px 0px; padding:10px; background-color:; border:1px dashed #996600; font-size:12px; line-height:150%; width:90%; voice-family:"\"}\""; voice-family:inherit; width:90%; } html>body blockquote{ width:90%; } blockquote p{ margin:0px 0px; padding:0px; line-height:150%; } h1.blogtitle{ position:absolute; width:820px; font-family: "Century Gothic","MS UI Gothic","ＭＳ Ｐゴシック", "Arial","Osaka"; padding:0px; margin:0px; top:3px; left:20px; color:#333333; font-size:24px; font-weight:normal; z-index:1; } h1.blogtitle_back{ position:absolute; width:818px; font-family: "Century Gothic","MS UI Gothic","ＭＳ Ｐゴシック", "Arial","Osaka"; padding:0px; margin:0px 0px 0px 1px; top:4px; left:21px; color : #CCCCCC; font-size:24px; font-weight:normal; z-index:0; } /* ### メイン部（左側） ### */ #main{ width:590px; float:left; margin:0px; padding:0px; } #contents{ margin:0px 20px 0px 20px; padding:0px; text-align:left; width:590px; voice-family:"\"}\""; voice-family:inherit; width:550px; } html>body #contents{ width:550px; } /* ### エントリー（記事） ### */ .e_title{ font-family: "MS UI Gothic", "Verdana","ＭＳ Ｐゴシック", "Arial","Osaka"; height:20px; text-indent:60px; margin: 0px 0px 0px 0px; padding: 10px 0px 0px 0px; color:#967B3F; font-size:14px; font-weight:bold; letter-spacing:1px; } .e_date{ font-family: "Verdana","ＭＳ Ｐゴシック", "MS UI Gothic", "Arial","Osaka"; margin:0px 0px 30px 60px; text-align:left; color:#999999; font-size:10px; line-height:150%; letter-spacing:1px; } .e_body{ font-family: "MS UI Gothic","Verdana","ＭＳ Ｐゴシック", "Arial","Osaka"; margin:0px 0px 15px 0px; margin-bottom:25px; padding:0px ; color:#444444; font-size:12px; line-height:155%; letter-spacing:1px; } .e_body img, .e_body a img{ margin:2px; border:0px; } .e_body_w{ margin:0px; padding:5px 15px 5px 15px; background-attachment: scroll; background-image: url(http://blog-imgs-41.fc2.com/a/w/i/awitchsally/aws_np03_point.gif); background-repeat: no-repeat; background-position: 0% 0%; border:1px solid #E9F3E9; } .e_more{ margin:30px 0px 15px 0px; padding:0px; text-align:left; color:#333333; font-size:10px; font-weight:bold; letter-spacing:1px; } .e_state{ font-family: "Verdana","ＭＳ Ｐゴシック","MS UI Gothic", "Arial","Osaka"; margin:5px 0px; text-align:left; color#967B3F; font-size:10px; letter-spacing:1px; line-height:150%; font-weight:bold; }
- ベストアンサー
- HTML
- Firefoxでのスタイルシートの記述について
Firefoxでのスタイルシートの記述について ４つの文字を配置するために (1) font-size:18px; font-weight:bold; color:#000000; margin:127px 72px 0px 40px; (2) font-size:18px; font-weight:bold; color:#000000; margin:64px 72px 0px 40px; (3) font-size:18px; font-weight:bold; color:#000000; margin:101px 72px 0px 40px; (4) font-size:18px; font-weight:bold; color:#000000; margin:65px 72px 0px 40px; と指定しました。IEでは思った位置になったのですが Firefoxでは(2)(3)(4)が下のほうにずれてしまいました。Firefoxに合わせるとIEでの位置が上にずれてしまい頭を悩ませています。 記述の間違いや、アドバイスなどあれば教えてください。 よろしくお願いします。
- ベストアンサー
- 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
- スタイルシート・CSSの画像の余白について
ショッピングサイトを作成しております。 楽天ショップでよくあるメイン画像を何枚か縦に並べて長いページを作成していくという作業です。 スタイルシートで作成していますが、画像を縦に並べていき、アップすると画像の下に余白ができてしまいます。 margin、paddingは0pxで指定あります。 何か原因、いい修正方法などありましたら、ぜひ教えて下さい。 よろしくお願いします。
- 締切済み
- その他（プログラミング・開発）
- スタイルシートでの文字位置の指定
正方形の中心に文字があるようなデザインにしたくて 次のように記述したのですがうまくいきません。 .text{ height : 160px; width : 160px; color : #FFFFFF; padding: 0px; margin: 0px; background-color: #6C3C1F; font-size: 15pt; text-align: center; vertical-align: middle; font-weight: bold; } 横位置はきちんと中央揃えになりますが、 縦の位置は文字が正方形内で上揃えになってしまいます。 どうすれば希望のデザインにできるか教えてください。 よろしくお願いします。
- ベストアンサー
- HTML
- スタイルシートテーブルの罫線を細くしたい
例えば以下のようにHTMLを書いた場合、 tableとtdのスタイルシート指定により、 外枠と内枠で罫線がかさなり、 若干太くなってしまいます。 細くしたいのですが、どうすれば出来るのでしょうか？ <table style="{border:1px solid #000000;border-spacing:0px}"> <tr> <td style="{border:1px solid #000000;padding:0px}">あああ </td> <td style="{border:1px solid #000000;padding:0px}">いいい </td> </tr> </table>
- ベストアンサー
- その他（インターネット・Webサービス）
- スタイルシートのpositionについて
久しぶりの投稿となります。 まだまだ未熟なのですがスタイルシートでデザインし、それを使ってブログにする。ということを考えています 例えば #blog{border:inset 10px #000000; width:500px; height:100px; background-color:#FFFFFF; position:absolute; top:100px; left:200px; } こんな感じでHTMLに組み込むと横幅500px縦100pxの上から100px、左から200pxの位置にある 枠で囲った表が出ると思うのですが、ここまではいいのです。 ここで文字を入れて過度に改行すると枠も自動的に伸びますよね？ つまり縦100pxを超える文字列を記述したときなどです。 これもいいのです。 ブログですから当然記事も2つ以上一つのページに表示することになるので #blog2{border:inset 10px #000000; width:500px; height:100px; background-color:#FFFFFF; position:absolute; top:300px; left:200px; } とすれば#blogは上から100pxの高さで高さが100pxの枠が表示されると思うので#blog2は#blogの100px下に同じ条件で現れると思います。 これもいいのですが、#blogで100pxを超えて300pxの高さになる文章を書いたとします。 そうなると#blog2の上にかぶさってしまいますよね？ そうならないためにはどうしたらいいのでしょうか。。。 固定でいつも上の記事(#blog)の100px下。という感じに出来ないでしょうか？ 出来るならば4つくらい記事を書いても記事と記事との間にスペースが生まれるのでいいなぁと思ったのですが。。。 こうなると#blog(記事の一番目)の100px下に#blog2(記事の二番目)、その下100pxに#blog3(記事の3番目)さらにその下に#blog4(記事の四番目)というように。 説明がよくわからないと思うのでどのようにしたいか伝わらなかった場合どんどんお申し付けください。 よろしくお願いします
- ベストアンサー
- HTML
