- ベストアンサー
CSSで、任意の場所に空白を入れたい時（考え方を教えて下さい）
こんばんは、CSS初心者です。 例： Webページの上端 ↑ ↑ ↑ 任意の高さのスペース１ ↓ ↓ ↓ 見出し行１ ・細目１ ・細目２ ↑ 任意の高さのスペース２ ↓ 見出し行２ ・細目３ ・細目４ ・ ・ ・ …といったスタイルのページを作りたいのですが、例のような任意の高さのスペースを入れたい所が随所にあります。 「見出し行の上部に○ピクセルのマージン」という設定方法はわかりますが、複数ある一番上の見出し行の上部のみ、スペースを入れたいのです。 この場合は他の見出し行とは別枠で、「一番上の見出し行」の設定を別枠で作り、マージンを指定しなければならないのでしょうか。 そうなりますと、ページの仕様上様々な高さの空白を入れたい箇所が結構な数になりますので、その都度設定すると作業がずいぶんと煩雑になってしまいます。 こちらの作業を簡便に行う手法はありますか？ また、初心者なので上記の思考そのものに勘違いがあるかもしれません。 もしかして「CSSとはそういうもの」なのでしょうか？
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
質問の意図が違っていたらすみません。 下記参考URLの方法は使えないのでしょうか？ 任意の高さのスペースの種類が限られているのなら、この方法が良いのではないかと思うのですが・・・ CSSに p.space1 {height:100px; background-color:#ffffff; font-weight:bold; position:relative } p.space2 {height:50px; background-color:#ffffff; font-weight:bold; position:relative } のような感じで記述しといて、HTMLの方に Webページの上端 <p class="space1"></p> 見出し行１ ・細目１ ・細目２ <p class="space2"></p> 見出し行２ ・細目３ ・細目４ ・ ・ という風にとか・・・ この考え方、違うのであれば申し訳ないです。
その他の回答 (3)
- Questa
- ベストアンサー率48% (13/27)
CSSでは、設定値をタグ（セレクタ）ごとにまとめて設定し、特定のプロパティ値のみを個別に変更することができます（継承、カスケード処理）。 ======================================== （CSS） h2 { /* 標準見出し */ margin-top: 2em; ・・・ font-weight: bold; font-size: 110%; } h2.level-1 { margin-top: 8em; } h2.level-2 { margin-top: 6em; } ・・・ （HTML） ・・・ Webページの上端 ・・・ <h2 class="level-1">見出し行１（高）</h2> ・・・ ・・・ <h2 class="level-2">見出し行２（中）</h2> ・・・ ・・・ <h2>見出し行３（標準）</h2> ・・・ ・・・ <h2 class="level-2">見出し行４（中）</h2> ・・・ ・・・ ======================================== ※ margin-top 以外のプロパティ値は、クラス（level-?）付きのH2要素にも「継承」されます。 ※ HTMLのマークアップがきちんとできていないと、この「技」は使えません。
お礼
こちらの皆さんの回答のお陰で、何とかうまく表示できるようになりました。 それまでCSSが嫌で仕方なかったのですが、現金なもので、思った通りの表示ができると楽しいですね(^^;) 本当にありがとうございました。
- steel_gray
- ベストアンサー率66% (1052/1578)
CSSでは次のように書けます。 <html> <head> <title></title> <style type="text/css"> <!-- div{border:thin solid black;margin:4px;} .midasi{margin-top:32px;} .midasi:first-child{margin-top:4px}/* ← これ */ --> </style> </head> <body> <div class="oya"> <div class="midasi">見出し行１</div> <div>細目１</div> <div>細目２</div> <div class="midasi">見出し行２</div> <div>細目１</div> <div>細目２</div> </div> </body> </html> FirefoxやOperaではOK。ただし、IE が first-child に対応していないので現状ではやはり最初の子要素にclassやidを付けておく方法が現実的です。
お礼
お礼が大変遅くなりました… 紆余曲折の末、こちらの皆さんのお陰で、何とかうまくいっています。 本当にありがとうございました。
- chocopri55
- ベストアンサー率42% (3/7)
No.1のchocopri55です。 <p class="space1"> と </p> の間に何も書かなくても反映されるはずですが・・・ 一度試して見てください。 一応IEでは軽く試してでの発言です。 それでも何か違うとのことでしたら、私が言えるのはここまでです。 力不足でごめんなさい。
お礼
何度もありがとうございます。 今はclass指定をしていませんので、もしかしたら指定をすれば反映されるのかもしれません。 作業を行うのは今週末になってしまいますので、その頃また結果を書き込みたいと思います。 回答を下さった皆様、お礼は少々お待ち下さい。
補足
【後日補足】 chocopri55さんの、こちらのご回答は正しかったです。 どうもありがとうございました。
お礼
こんばんは。ご回答ありがとうございます。 質問の意図はその通りです。 ただ、<p class="space1"></p> のように、<p class="space1"> と </p> の間に何も書かないと、その行は反映されなくないですか？ 実は現在は、<p> と </p> の間に全角スペースを入れて、 <p> </p> という記述を、欲しい空白の高さに応じて書くことで対応しています。 ですがこの方法ですと、画面に無意味な全角スペースが表示されてしまうので（反転させないと見えませんが）、もっとスマートな方法はないものかと思い、質問させていただいた次第です。