サポート » 使い方全般 » 固定ページ上部のマージンを減らしたい

  • 解決済 3mcdt

    (@3mcdt)


    コンテンツとサイドバーのみ(ヘッダー、フッター無し)の固定ページで、PCで見た時に、コンテンツのなるべく下方までスクロール無しで見せたいのです。CHROME検証ツールで調べるとページの一番上にパディングがあり、その下にマージンがあります。各々横一杯です。そこで、マージンの方がそこそこ上下幅があるので、これをある程度少なくしたいです。どの様にすれば良いでしょうか?

    因みに、該当のページは、このサイトの「イラストレーション」ページで、画像サムネイル(上段左端)をクリックで出るページです。

    HTMLを書き換えれば良いかと思い、コードエディターからコードを覗いてみましたが、マージンやパディングの記述は見当たりません。CSSで定義してるからなのでしょうか。その辺の基本が良く分かっていないのです。よろしくお願いします。

    ヘルプの必要なページ: [リンクを見るにはログイン]

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック投稿者 3mcdt

    (@3mcdt)

    こんにちは

    CHROME検証ツールで調べるとページの一番上にパディングがあり、その下にマージンがあります。

    検証ツールで調べた、styles タブの CSS をそのままコピーして、カスタマイズの [追加 CSS] にペースト(追加)されると良いかと思います。

    @media (min-width: 992px) {
    .siteContent {
        padding: 3rem 0 3.5rem;
    }
    }

    上パッティング3rem、下パッティング3.5rem の値を調整してみてください。

    トピック投稿者 3mcdt

    (@3mcdt)

    ishitaka様、ありがとうございます。

    CSSを追加してパディイングを調整することが出来ました。私はマージンとパディングを取り違えていたようです。

    これまでCSSが何処に書いてあるかが分かっていませんでしたが、ようやく理解出来ました。また、CSSをコピーした上で値を書き換えたものを追加CSSするというやり方が分かりました。

    追加の質問ですが、元々のCSSは以下の通りで、今回追加CSSをしたのはstyleタブの上から2段目の@media (min-width: 992px)のものでした。またこのパディング値には、取り消し線が(ここでは書けないのですが)元々引いてありました。何故1段目ではなくて、この2段目を使ったのでしょうか?

    @media (min-width: 1200px)
    style.css?ver=13.8.11:1
    .siteContent {
    padding: 3.5rem 0 4rem;
    }
    
    @media (min-width: 992px)
    style.css?ver=13.8.11:1
    .siteContent {
      padding: 3rem 0 3.5rem;
    }

    @media (メディアクエリ) は、デバイスの幅(ブラウザ画面の幅)などに応じて、適用する CSS を指定することができます。
    詳細は下記ページをご覧ください。
    https://www.tohoho-web.com/css/rule/media.htm

    以下の例では、幅が1200px以上の場合は上段、992px以上は下段の CSS が適用されます。

    @media (min-width: 1200px) {
    	.siteContent {
    		padding: 3.5rem 0 4rem;
    	}
    }
    @media (min-width: 992px) {
    	.siteContent {
    		padding: 3rem 0 3.5rem;
    	}
    }
    トピック投稿者 3mcdt

    (@3mcdt)

    詳しいご説明ありがとうございました。勉強になります。少しづつですが分かってきました。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「固定ページ上部のマージンを減らしたい」には新たに返信することはできません。