• 解決済 Chanchan.

    (@eureka20080321)


    こちらで丁寧に教えていただき、それを元に挑戦している素人です。
    ここ数日、グリットレイアウトを使って画像上に文字を配列しているのですが、どうしてもうまくいきません。手詰まりです。
    再度、皆様のお力をどうかお貸しください。

    ・携帯表示とタブレット表示時の際、ボタンがバックグラウンドからハミ出てしまい戻らなくなってしまいました。
    やりたい事は、ボタンを文言下部分、左右中央の位置に戻したい。

    ・PC画面の際は画像を差し替え、画像上に文字とボタンを表示したいのですが、どうやっても動いてくれません。文字の順番も変化してくれません。
    やりたい事は、画像上に文字列センター揃え、左右位置中央。
    ボタンは文言下部分、文字列センター揃え、左右位置中央を考えています。

    試したhtmlとcssです。
    よろしくお願いします。

    <div class="box_bubble">
    <picture>
    <source media="screen and (max-width:480px)" srcset="https://eureka.salon/wp-content/uploads/2024/11/bubble_04-scaled.jpeg">
    <source media="screen and (min-width:480px) and (max-width:768px)" srcset="https://eureka.salon/wp-content/uploads/2024/11/bubble_04-scaled.jpeg">
    <source media="screen and (min-width:768px) and (max-width:1024px)" srcset="https://eureka.salon/wp-content/uploads/2024/11/bubble_04-scaled.jpeg">
    <source media="screen and (min-width:1024px)" srcset="https://eureka.salon/wp-content/uploads/2024/11/bubble_01-scaled.jpeg">
    <img class="bub_top-img" src="https://eureka.salon/wp-content/uploads/2024/11/bubble_04-scaled.jpeg" alt="画像">
    </picture>
    <div class="bub_top-p1">デトックスで始める予防美容<br>プロ用ナノバブルの登場です。</div>
    <div class="bub_top-p2">使うのは閉じ込めた水と空気だけ。</div>
    <div class="bub_top-p3">大切なのは「無害」であるということ。</div>
    <a href="https://eureka.salon/予防美容/">もっと詳しく</a>
    <video class="bub_top-video" autoplay loop muted playsinline width="100%" controlslist="nodownload nofullscreen noremoteplayback" src="https://eureka.salon/wp-content/uploads/2024/11/EUREKA_marbb-White02.mp4"></video>
    </div>
    .box_bubble{/*携帯*/
    position: relative;
    display: grid;
    height: auto;
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, auto);
    width: 100vw;/*画像幅いっぱい*/
    margin-left: calc(-50vw + 50%);
    max-width: none;
    }
    .bub_top-img{
    vertical-align: bottom;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    }
    .bub_top-p1{
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    background-color: #000;
    color: #3d87c3;
    font-weight: bold;
    font-size: 1.8em;
    line-height: 1.3em;
    /*height: 100px;*/
    padding-top: 1em;
    padding-left: 1em;
    }
    .bub_top-p2{
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    background-color: #000;
    color: #fff;
    font-size: 1.3em;
    padding-top: 10em;
    padding-left: 1em;
    }
    .bub_top-p3{
    grid-column: 1 / 2;
    grid-row: 4 / 5;
    background-color: #000;
    color: #fff;
    font-size: 1.3em;
    padding-top: 0.3em;
    padding-bottom: 10em;
    padding-left: 1em;
    }

    /* ボタンのスタイル */
    .box_bubble a {
    grid-column: 1 / 2;
    grid-row: 5 / 6;
    justify-self: center; /* 横中央揃え */
    align-self: center; /* 縦中央揃え */
    font-size: 0.875em;
    font-weight: bold;
    border: solid #000 0.8px;
    padding: 10px 20px;
    color: #000;
    text-decoration: none;
    border-radius: 60px;
    /* z-index: 3; ボタンを前面に表示 */
    background: rgba(255, 255, 255, 0.8);
    }

    .box_bubble a:hover {
    background: rgba(255, 255, 255, 0.3);
    }

    .bub_top-video{
       grid-column: 1 / 2;
       grid-row: 6 / 7;
    }

    @media screen and (min-width: 768px)/*タブレット*/{
    .box_bubble{
    position: relative;
    display: grid;
    height: auto;
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, auto);
    width: 100vw;/*画像幅いっぱい*/
    margin-left: calc(-50vw + 50%);
    max-width: none;
    }
    .bub_top-img{
    vertical-align: bottom;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    }
    .bub_top-p1{
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    background-color: #000;
    color: #3d87c3;
    font-weight: bold;
    font-size: 1.8em;
       line-height: 1.3em;
    padding-top: 1em;
    padding-left: 1em;
    }
    .bub_top-p2{
       grid-column: 1 / 2;
    grid-row: 3 / 4;
    background-color: #000;
    color: #fff;
    font-size: 1.4em;
    padding-top: 10em;
    padding-left: 1em;
    }
    .bub_top-p3{
    grid-column: 1 / 2;
    grid-row: 4 / 5;
    background-color: #000;
    color: #fff;
    font-size: 1.6em;
    padding-top: 0.3em;
    padding-bottom: 10em;
    padding-left: 1em;
    }

    /* ボタンのスタイル */
    .box_bubble a {
    grid-column: 1 / 2;
    grid-row: 5 / 6;
    justify-self: center; /* 横中央揃え */
    align-self: center; /* 縦中央揃え */
    font-size: 0.875em;
    font-weight: bold;
    border: solid #000 0.8px;
    padding: 10px 20px;
    color: #000;
    text-decoration: none;
    border-radius: 60px;
    /* z-index: 3; ボタンを前面に表示 */
    background: rgba(255, 255, 255, 0.8);
    }

    .box_bubble a:hover {
    background: rgba(255, 255, 255, 0.3);
    }

    .bub_top-video{
       grid-column: 1 / 2;
      grid-row: 6 / 7;
    }
    }

    @media screen and (min-width: 1024px) /*PC*/ {
    .box_bubble {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto; /* 行を自動調整 */
    height: auto;
    width: 100%;
    }

    .bub_top-img {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    /* width: 100%;*/
    height: auto;
    width: 100vw;/*画像幅いっぱい*/
      margin-left: calc(-50vw + 50%);
    max-width: none;
    z-index: 1;
    }

    .bub_top-p1,
    .bub_top-p2,
    .bub_top-p3 {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    /* color: #3d87c3;*/
    /* font-size: 3em;*/
    /* font-weight: bold;*/
    /* text-align: left;*/
    /* z-index: 2; 文字を前面に表示 */
    /* align-self: center; 縦中央揃え */
    /* justify-self: center;*/
    /* padding: 10px;*/
    background-color: transparent;
    }
    .bub_top-p1{
    color: #3d87c3;
    font-weight: bold;
    font-size: 3em;
    align-self: center; /* 縦中央揃え */
    justify-self: center;
    z-index: 2;
    }

    .bub_top-p2 {
    color: #000;
    font-size: 2em;
    /* padding-top: 200px;*/
    align-self: center;
    justify-self: center;
    z-index: 3;
    }

    .bub_top-p3 {
    color: #000;
    font-size: 2.5em;
    /* padding-top: 300px;*/
    align-self: center;
    justify-self: center;
    z-index: 4;
    }

    /* ボタンのスタイル */
    .box_bubble a {
    grid-column: 1 / -1;
    grid-row: 2 / 3;
    justify-self: center; /* 横中央揃え */
    align-self: center; /* 縦中央揃え */
    font-size: 0.875em;
    font-weight: bold;
    border: solid #000 0.8px;
    padding: 10px 20px;
    color: #000;
    text-decoration: none;
    border-radius: 60px;
    z-index: 5; /* ボタンを前面に表示 */
    background: rgba(255, 255, 255, 0.8);
    }

    .box_bubble a:hover {
    background: rgba(255, 255, 255, 0.3);
    }
    .bub_top-video{
    display: none;
    }
    }


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

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • モデレーター Takayuki Miyoshi

    (@takayukister)

    Chanchan. さん、

    ここは WordPress のサポートフォーラムですので CSS に関する一般的な質問はここではなく CSS 関連の専門の掲示板等でされた方がよろしいかと思います。

    少なくともこの投稿の中に WordPress に関係する内容は見当たりません。

    トピック投稿者 Chanchan.

    (@eureka20080321)

    Takayuki Miyoshiさま

    確かに考えてみればそうですね。
    お伝えしていただきありがとうございます。

    ブロック等を使用して疑問の出た際には、ぜひよろしくお願いします。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • このトピックに返信するにはログインが必要です。