• ベストアンサー

CSSで、任意の場所に空白を入れたい時（考え方を教えて下さい）

こんばんは、CSS初心者です。 例： Webページの上端 ↑ ↑ ↑ 任意の高さのスペース１ ↓ ↓ ↓ 見出し行１ ・細目１ ・細目２ ↑ 任意の高さのスペース２ ↓ 見出し行２ ・細目３ ・細目４ 　・ 　・ 　・ …といったスタイルのページを作りたいのですが、例のような任意の高さのスペースを入れたい所が随所にあります。 「見出し行の上部に○ピクセルのマージン」という設定方法はわかりますが、複数ある一番上の見出し行の上部のみ、スペースを入れたいのです。 この場合は他の見出し行とは別枠で、「一番上の見出し行」の設定を別枠で作り、マージンを指定しなければならないのでしょうか。 そうなりますと、ページの仕様上様々な高さの空白を入れたい箇所が結構な数になりますので、その都度設定すると作業がずいぶんと煩雑になってしまいます。 こちらの作業を簡便に行う手法はありますか？ また、初心者なので上記の思考そのものに勘違いがあるかもしれません。 もしかして「CSSとはそういうもの」なのでしょうか？

  • CSS
  • 回答数4
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

質問の意図が違っていたらすみません。 下記参考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> 見出し行２ ・細目３ ・細目４ 　・ 　・ という風にとか・・・ この考え方、違うのであれば申し訳ないです。

参考URL：
http://www.htmq.com/style/top.shtml
bari_saku
質問者

お礼

こんばんは。ご回答ありがとうございます。 質問の意図はその通りです。 ただ、<p class="space1"></p>　のように、<p class="space1">　と　</p>　の間に何も書かないと、その行は反映されなくないですか？ 実は現在は、<p>　と　</p>　の間に全角スペースを入れて、 <p>　</p> という記述を、欲しい空白の高さに応じて書くことで対応しています。 ですがこの方法ですと、画面に無意味な全角スペースが表示されてしまうので（反転させないと見えませんが）、もっとスマートな方法はないものかと思い、質問させていただいた次第です。

その他の回答 (3)

  • Questa
  • ベストアンサー率48% (13/27)
回答No.4

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のマークアップがきちんとできていないと、この「技」は使えません。

bari_saku
質問者

お礼

こちらの皆さんの回答のお陰で、何とかうまく表示できるようになりました。 それまでCSSが嫌で仕方なかったのですが、現金なもので、思った通りの表示ができると楽しいですね(^^;) 本当にありがとうございました。

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.3

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を付けておく方法が現実的です。

参考URL：
http://www6.plala.or.jp/go_west/nextcss/ref/slctr/ps_clas.htm#first-child
bari_saku
質問者

お礼

お礼が大変遅くなりました… 紆余曲折の末、こちらの皆さんのお陰で、何とかうまくいっています。 本当にありがとうございました。

回答No.2

No.1のchocopri55です。 <p class="space1">　と　</p>　の間に何も書かなくても反映されるはずですが・・・ 一度試して見てください。 一応IEでは軽く試してでの発言です。 それでも何か違うとのことでしたら、私が言えるのはここまでです。 力不足でごめんなさい。

bari_saku
質問者

お礼

何度もありがとうございます。 今はclass指定をしていませんので、もしかしたら指定をすれば反映されるのかもしれません。 作業を行うのは今週末になってしまいますので、その頃また結果を書き込みたいと思います。 回答を下さった皆様、お礼は少々お待ち下さい。

bari_saku
質問者

補足

【後日補足】 chocopri55さんの、こちらのご回答は正しかったです。 どうもありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • CSSでページ毎に見出し画像を変更したい

    こんにちは。 今CSSの勉強をしながらサイトを作っています。 まだまだ基本知識くらいしかなく応用出来ず困っています。 各ページのタイトル（見出し<h●>）を背景画像に設定して表示していますが、タイトルがページ毎に違うため１ページ毎にCSSを作っています。各ページの見出し画像を一つのCSSまとめて記述する方法はないでしょうか？ よろしくお願い致します。

  • CSSについて

    下記ののCSSでmainContentの780px を250pxと530pxに分割する方法を教えてください。 DW CS3を使用しています。 よろしくお願いいたします。 <style type="text/css"> <!-- body { background: #666666; margin: 0; /* 複数の異なるブラウザの初期設定値に対応するため、body エレメントのマージンと余白を 0 にすることをお勧めします */ padding: 0; text-align: center; /* これにより、IE 5* ブラウザではコンテナが中央揃えになります。そして、テキストは、#container セレクタの初期設定である左揃えに設定されます */ color: ffffff; background-color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; } .oneColFixCtrHdr #container { width: 780px; /* 最大幅である 800px より 20px 小さくすることにより、ブラウザクロームの使用が可能となり、水平スクロールバーが表示されなくなります */ background: #000000; margin: 0 auto; /* 自動マージン（幅と連動）により、ページが中央揃えになります */ border: 0px solid #000000; text-align: left; /* この設定は body エレメントの text-align: center より優先されます。 */ } .oneColFixCtrHdr #header { padding: 0 0px 0 0px; /* この余白は、その下に表示される div のエレメントの左揃えと一致します。#header でテキストの代わりにイメージが使用される場合は、必要に応じて、余白を削除してください。 */ background-color: 000000; } .oneColFixCtrHdr #header h1 { margin: 0; /* #header div の最後のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間の原因不明のスペース）が回避されます。div の周囲に境界線が適用されている場合は、境界線によってマージンの相殺が回避されるため、この操作は不要です */ padding: 10px 0; /* マージンの代わりに余白を使用して、エレメントを div の端に接触しない位置に維持することができます */ } .oneColFixCtrHdr #mainContent { padding: 0px; background-color: #000000; } .oneColFixCtrHdr #footer { padding: 0 0px; background-color: #444444; } .oneColFixCtrHdr #footer p { margin: 0; /* フッターの最初のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間のスペース）が回避されます */ padding: 10px 0; /* このエレメントの余白により、マージンの相殺を発生させることなく、マージンの効果とまったく同じように、スペースが設定されます */ } --> </style>

  • HTML.CSSの質問です

    HTML,CSSを勉強している初心者です。 ＣＳＳでの、ブロックレベル要素のセンタリグについての質問です。 縦のセンタリングはどうすればいいのでしょうか？ 横のセンタリングは、左右のマージンをautoにすると上手くいくのですが、上下のマージンにautoを設定してもセンタリングされません。 縦６００px、横６００pxのdivbox（トップページ)を作って、bodyのなかで縦横ともにセンタリングさせて、モニタ画面の真ん中にdivbox（トップページ）を配置させたいのです。 制作したトップページをサーバにアップロードして、色々なサイズのモニタ画面で見た時に、常にモニタ画面の真ん中に作ったトップページを配置させるのが目的です。 どなたかお知恵をおかしくださいませ。 宜しくお願いいたします。

  • ＨＴＭＬ、ＣＳＳの質問です

    HTML,CSSを勉強している初心者です。 ＣＳＳでの、ブロックレベル要素のセンタリグについての質問です。 縦のセンタリングはどうすればいいのでしょうか？ 横のセンタリングは、左右のマージンをautoにすると上手くいくのですが、上下のマージンにautoを設定してもセンタリングされません。 縦６００px、横６００pxのdivbox（トップページ)を作って、bodyのなかで縦横ともにセンタリングさせて、モニタ画面の真ん中にdivbox（トップページ）を配置させたいのです。 制作したトップページをサーバにアップロードして、色々なサイズのモニタ画面で見た時に、常にモニタ画面の真ん中に作ったトップページを配置させるのが目的です。 どなたかお知恵をおかしくださいませ。 宜しくお願いいたします。

    • ベストアンサー
    • CSS
  • <TABLE>を複数個使うときのCSS問題勃発！

    DreamweaverMXでホームページを作っています。 先ほど大問題が発生しました。ページ内にテーブルを使って表を設置したのですが、CSSからtableに対してマージンやパディングを指定したのですが、当然のことながら、すべてのtableに反映されてしまいます。 特に最上部にあるスライスで切り出したバナー画像はは見る影もありません。 そこでお聞きしたいのですが、複数のtableにそれぞれCSSを指定するのはどうしたらよいのでしょうか？ よろしくお願いします。

  • CSSで、表をデザインしたいのですが…

    CSS初心者です。 現在作っているサイトは、CSSの部分とHTMLは別ファイルになっています。 CSSで表をデザインしたいのですが、ページによって表のレイアウトが違い、パターンが5～6種類あります。 CSSでの表の設定はおおむねわかりますが、 ・1つの表にしか使わない記述を、それぞれの表の数だけいくつもいくつも書くのか？ ・それだったら、HTMLの中にHTMLとして記述してもいいのでは？ ・でも、CSSで書いた方がいいであろう設定をHTMLに書いて混在させるのはあまりすっきりしない… と、悩んでいます。 このようなサイトを作る場合は、普通どのようにするのでしょう？ また、いくつものパターンの表の設定をするのに、一気に設定できるような方法はあるのでしょうか？ 表は、○列○行といったようなごくシンプルなものばかりで、ただそれぞれが列と行の数が違うものです。 もしかしたらとんでもない考え方をしているのかもしれませんが、どうかご教示下さい。

    • ベストアンサー
    • CSS
  • 特定の見出しのみ前後の空白を消したい。

    CSSに書き込んで、h1～6までそれぞれに設定を割り振れる事は分かったのですが、h2～6のどれかで囲った見出しが複数あり、その中の一つだけにclass、idを設定して装飾などの設定を変えることは可能ですか？ h2タグを使って見出しをいくつか作成しました。 ですが最初の1つだけ前後の改行が邪魔で消したいです。 試しにHTMLを <span class="name"><h2>見出し</h2></span> CSSを .name { margin: 0px; } としたのですが、変わりません…。 HTML初心者なので、とんでもないレベルのミスをしてしまっているかもしれませんが、教えてくださると嬉しいです。

    • ベストアンサー
    • HTML
  • css

    プリント時のCSS設定についておたずねします。 現在index.htmlとindex.cssがあります。 index.htmlに ----------------------------------------------------------- <link href="index.css" rel="stylesheet" type="text/css" media="all" /> ----------------------------------------------------------- としてindex.cssを読み込み index.css内では ----------------------------------------------------------- body{ background:url("../images/bg_body.gif") repeat-x; } ----------------------------------------------------------- として、bodyの背景に画像を貼り付けています。 これを印刷時にはbodyに指定している背景画像を非表示にして 印刷させたいのです。 ※ブラウザの詳細設定「背景の色とイメージを印刷する」にはチェックを入れたまま。 別途cssを用意しhtml側で ----------------------------------------------------------- <link href="print.css" rel="stylesheet" type="text/css" media="print" /> ----------------------------------------------------------- とすれば出来そうなのですが、ちょっと答えが出ません・・・ そもそもなぜこのような事がやりたいのかというと コンテンツ内容が長くなった時、印刷すると複数ページに渡りますが、 <body>に指定した画像が、2ページ目、3ページ目にも表示される為です。 背景にしている画像は高さを十分に確保しており横32px×縦3000px位で、 一番上（0pxの高さ）から150px位の高さまで単純なグラデーションをかけたものです。 151px以降は1色のベタ塗りという感じです。 ブラウザ閲覧上はコンテンツ内容が長くても背景画像のグラデは ページ上部のみ表示されるのですが、印刷時に2ページ目、3ページの上部に グラデが表示されてしまうという事です。

  • cssについて

    ホームページでcssにしたいページがあります。そこで判らない点がありまして皆さんの教えを乞いたいと思い質問した次第です。 1.cssを作成したページはcssのフォルダを作って、その中にcssのソース(HTML)を格納し、サーバーに転送するそうなんですが、これはページ全体のソースのことですか。cssの部分だけですか？ 2.cssのページはバック(壁紙)が“白”と“緑”のページがありますが、この場合はcssのフォルダを別々に作るのですか？ 3.cssフォルダによってページが一括管理出来て更新が簡単になるとのことですが、ページ全体をcssにした方が管理しやすいですか？ 4.cssのソースはホームページを作ってるソフト以外のエディタにコピーしても宜しいですか？ Dreamweaver3で作成してますが、以外とアバウトなソフトなので、細かい設定はソフトの機能に頼らず、ソフトのタグをいじっています。なんせ初心者です。判りやすく解説お願いします。

  • 誰か安くCSS作ってくれませんか？

    ■依頼内容：CSS作成＆サンプルページ作成 例：http://catfrog.net/PHP/AV/AV.php 「そのサイト用のCSS」と「そのCSSを扱う上でどこに何を置けばいいのかがわかるサンプルページ」を作成して欲しい。実際のページ作成はそのサンプルをみて自分で行うつもりです。 現在はhatenaダイアリー用に別の人に作ってもらったものを適当に自分でいじっている。現状のCSSをもう少しまともなものにしてほしい。 ■希望CSS構成 「ヘッダー・メイン部分・サイドメニュー（ひとつ）・フッター」という感じ。特に画面遷移とか必要なく、１ページがシンプルかつ綺麗にでればそれでOK。 こういう依頼で作業してくれる最安値業者はどこですか？もしくは誰かやってくれる個人の方教えてください。

    • 締切済み
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する