質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.81%

一部のコンテンツがスクロールに追従する方法を探しています。

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 777

shibakoppe

score 13

前提・実現したいこと

最近、ウェブページの作成を行い始めた初心者です。
上手く説明できない点が多々あるかとは思いますが、
皆さまの知恵をお借りしたいと思い、質問させていただきます。

2カラムのウェブページを作成しており、
html及びcssは、フリーのテンプレを使用させていただいております。
サブコンテンツとしてバナーの設置をしようとしているのですが、
スクロールに追従するようにしたいと考えています。

以下に記載の理由から、position:sticky;を使用しないで、
スクロール追従にできる方法がないか探しています。

発生している問題・エラーメッセージ

どうすればよいのか調べていたところ、position:sticky;の使用を推奨している方が多かったため、
詳細を確認してみたところ、要素にoverflow:hidden;が設定されているため、
効かないということがわかりました。

文字が隠れてしまうほど文章量が多いわけではないのですが、
レスポンシブ対応にしているため、横スクロールをしないような構成にしたいので、
hiddenではなくautoやscroll、visibleにすることは考えておりません。
(cssを変更したことにより、レイアウトが崩れてしまうことは避けたいと思っています。)

抜粋ですが、必要と思われる箇所を掲載してみます…
(ファイル名を特定されないものに変更した状態です)

※ご指摘を受けました.submenuのコンテンツですが、
今回の作成では使用していないものでした。
そのため、該当箇所は削除させていただきました。
(+<div id="contents">の箇所も削除させていただきました。)

HTML

<div id="sub">
  <ul class="bnr">
    <li>
    <img src="image.png" alt="" class="auto-style4" style="width: 98%"></li>
    <li><a href="index.html">
    <img src="image.jpg" alt="" class="auto-style4" style="width: 98%"></a>
  </li>
  </ul>
</div><!-- /#sub -->

CSS
}

#sub {
    box-sizing: border-box;
    overflow: hidden;
    float: right;
    width: 28%;
    padding: 10px;
    background: #fff;
}

/*================================================
 *  サブコンテンツ
 ================================================*/
.bnr {
    overflow: hidden;
}
.bnr ul {
    overflow: hidden;
}
.bnr li {
    margin: 0 0 10px 0;
    padding: 0;
    list-style: none;
}
.bnr li a:hover {
    opacity: 0.8;
    filter: alpha(opacity=80);
    -ms-filter: "alpha( opacity=80 )";
}
.bnr img {
    width: 100%;
}

試したこと

・classを新たに設けて、公開されているコードを試したのですが、
親要素でhiddenが使用されているため無効でした。
・親要素に依存しないように、新たに属性?を設けたのですが、
レイアウトが崩れてしまい、お粗末な見た目になってしまいました。

補足情報(FW/ツールのバージョンなど)

Microsoft Expression Web4 を使用しております。

初めての作成で、知識も不十分なので説明不足であったり、
抜けていることも多いかとは思いますが、ご教授いただけると幸いです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • shibakoppe

    2019/05/28 15:53

    ご丁寧にありがとうございます。
    position: fixed;にしてしまうと、スマホやタブレット等で閲覧した際に、本来見てもらいたいメインのコンテンツにかぶってしまいます。
    スマホ等の場合、サブコンテンツ→メインコンテンツの順で縦長に表示されるようにしているので、かぶってしまうというか、メインが小さいというか…
    上手く表現が出来なくて申し訳ありません。
    例えばなのですが、スマホ向けのCSSではposition: fixed;にしなければよいのでしょうか?

    キャンセル

  • x_x

    2019/05/28 15:58

    メディアクエリを使って、ある幅以上のときのみ fixed にすることは可能ですね。それで目的は達成されるのでしょうか?

    キャンセル

  • shibakoppe

    2019/05/28 16:11

    スマホサイズの時はスクロールとともに見えなくなって、デスクトップやタブレットサイズの時は追従させることができるという解釈でいいのでしょうか…?
    もしそうなのでしたら、目的達成です…!

    キャンセル

回答 2

checkベストアンサー

+2

幅 768px でわける例

@media (min-width: 768px) {
  #sub {
    position: fixed;
    top: 10px;
    right: 10px;
  }
}


https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/28 16:30

    無事できました!!
    ありがとうございます…!!
    説明不足も多く、知識も乏しかったため、
    お手を煩わせてしまい、大変申し訳ございませんでした…。
    一からご丁寧に対応してくださったので、こちらの方をベストアンサーとさせていただきます!
    本当にありがとうございました!!

    キャンセル

+1

多分これでいけると思います。

.parentClass{
   overflow: visible !important;
}
.childBannerClass{
   position: -webkit-sticky;
   position: sticky;
   top: 0;
}

!important

編集出来ない別のCSSファイルのプロパティ値を変更したい場合、こちら側で上書きする方法があります。

プロパティの末尾に!impprtantと記述する事で、その値が最優先されます。

セレクターの詳細度やCSSの読込み順に関係なく、!impprtantが付いている値が最優先されます。

詳細度 CSSスタイルシート | MDN

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/28 16:34

    ご丁寧にお教えいただきありがとうございました!
    x_xさんのやり方で無事に解決することが出来ました。
    AzumaOさんのやり方でもできるか試してみます!
    拙い文章の中、ご回答いただきましてありがとうございました!

    キャンセル

  • 2019/05/28 17:03 編集

    いえいえ🌟 解決出来たのなら何よりです🤗🌟 ご丁寧にありがとうございます(*´ω`*)

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.81%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る