こちらで丁寧に教えていただき、それを元に挑戦している素人です。
ここ数日、グリットレイアウトを使って画像上に文字を配列しているのですが、どうしてもうまくいきません。手詰まりです。
再度、皆様のお力をどうかお貸しください。
・携帯表示とタブレット表示時の際、ボタンがバックグラウンドからハミ出てしまい戻らなくなってしまいました。
やりたい事は、ボタンを文言下部分、左右中央の位置に戻したい。
・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;
}
}