プロが教える店舗＆オフィスのセキュリティ対策術

スタイルシートでデザイン

解決済

  • 質問者：--w--
  • 質問日時：
  • 回答数：3件

現在スタイルシートを使ってホームページを作成中の者です。
しかしそのデザインがうまくいかず困っております。

文字が中央に打ってある長方形の赤枠があります。
間２０PXくらいあけて平行にまた文字が中央に表記されてある枠を置きたいのですがうまくいきません。

marginとpaddingでpxを指定しているのですが両者の枠が平行にならず
片方の枠が下の方に下がってしまいます。

視覚化するとこんな感じにしたいのですが

　　ーーーーーー　　　　　　　　　　ーーーーーー
　　｜　映画　｜　　　　　　　　　　｜　小説　｜
　　ーーーーーー　　　　　　　　　　ーーーーーー

いつも

　　ーーーーーー　　　　　　　　　
　　｜　映画　｜　　
　　ーーーーーー　　　　　　　　　　
　　　　　　　　　　　　　　　　　　ーーーーーー　　　　　　　　　　　　　　　　　　　　　　　　　　　　｜　　　　｜
　　　　　　　　　　　　　　　　　　ーーーーーー

とこんな感じに片方の枠が下の方にずれてしまいます。
指定の仕方に問題があると思うのですが、
何分初心者なもんでよく分かりません。

marginは右枠４０px５５０px１５０px３０px
　　　　左枠１０px５５０px１５０px３０px
にしています。
上をそろえさえすれば両枠平行になるだろうと思っていたのですが
全くなりません。ずれるばかりです。

わかりにくい説明でふがいないですが
どなたかお分かりの方おられればよろしくお願いします！

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： grape16
  • 回答日時：

[映画]と[小説]の間が折り返されているのかも知れません。


[映画]と[小説]を折り返さずに表示できる領域を指定しておけばいいかも知れません。
下の例では<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>
    • good
    • 0
    • 件
通報する

No.2

まずはマージンの指定を短縮形から個々の指定に代えて見てみてはいかがでしょうか？



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>
これが検証時の記述です。
今後の検証への参考に。
    • good
    • 0
    • 件
通報する

No.1

私なら「表」を使って解決します。


表のセルの中には、別の表を置けますので、このテを使って何も記入しないセルをmarginやpaddingの代わりに使います。最後に枠を非表示にします。
Visualでできるのがいいところですね。
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報