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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

1回答

735閲覧

背景画像上にある文字を中央配置したい

free_teku

総合スコア103

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2021/12/02 05:55

前提・実現したいこと

@media screen and (min-width: 600px) and (max-width: 1179px)
時に、.jp-textを中央配置したい

@extendで中央配置したい](9194266892f8beac04f6b5d0a7d1ac6a.jpeg)

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

develop toolで transform: translate(-50%,-50%)をすると、中央配置になる。 そこで、@extend or @mixinを使って、.jp-textのCSSをこのセクションだけに変更させたい

試したこと

ディベロップツールで確認しても、原因特定が不明。@extend or @mixin を調べても、解決できない。
@mixinを使って、.js-textを書いています。
@include name(ここで、任意の値を書き、変更しているが、transformの場合はできない。)

該当のソースコード

HTML

1<!DOCTYPE html> 2<html> 3<head> 4 <title></title> 5 <link rel="stylesheet" type="text/css" href="../css/destyle.css"> 6<link rel="stylesheet" type="text/css" href="../Onsen/css/onsen.css"> 7</head> 8<body> 9 <ul class="onsen-list"> 10 <!-- 1 --> 11 <li class="onsen-item"> 12 <div class="onsen-item-img onsen-contents-left aos-init aos-animate" data-aos="fade-up" data-aos-delay="100"><img alt="温泉1" src="../Onsen/img/onsen01.jpg"></div> 13 <div class="onsen-item-txt onsen-item-txt-right aos-init aos-animate" data-aos="fade-up" data-aos-delay="500"> 14 <div class="jp-text"> 15 <p class="ttl">貸し切り露天風呂「雲居の湯」</p><!-- /.ttl --> 16 <p class="desc1">弱酸性の湯質が優しく肌を包み込むような心地よさ<br> 17 最上階の露天風呂「雲居の湯」では、湯冷めしにくい食塩泉を<br> 18 熱海の町並みを遠方に望みながら・・・</p> 19 </div><!-- /.jp-text --> 20 </div><!-- /.onsen-contents-right --> 21 </li><!-- /.onsen-item --> 22 </ul> 23</body> 24</html>

CSS

1 2.onsen-list { 3 -webkit-box-pack: justify; 4 -webkit-justify-content: space-between; 5 -ms-flex-pack: justify; 6 justify-content: space-between; 7 margin-top: 80px; 8} 9 10@media screen and (max-width: 599px) { 11 .onsen-list { 12 display: -webkit-box; 13 display: -webkit-flex; 14 display: -ms-flexbox; 15 display: flex; 16 -webkit-box-orient: vertical; 17 -webkit-box-direction: normal; 18 -webkit-flex-direction: column; 19 -ms-flex-direction: column; 20 flex-direction: column; 21 -webkit-box-align: center; 22 -webkit-align-items: center; 23 -ms-flex-align: center; 24 align-items: center; 25 } 26} 27 28.onsen-item { 29 position: relative; 30 margin-bottom: 290px; 31} 32 33@media screen and (min-width: 600px) and (max-width: 1179px) { 34 .onsen-item { 35 display: -webkit-box; 36 display: -webkit-flex; 37 display: -ms-flexbox; 38 display: flex; 39 -webkit-box-orient: vertical; 40 -webkit-box-direction: normal; 41 -webkit-flex-direction: column; 42 -ms-flex-direction: column; 43 flex-direction: column; 44 -webkit-box-pack: center; 45 -webkit-justify-content: center; 46 -ms-flex-pack: center; 47 justify-content: center; 48 -webkit-box-align: center; 49 -webkit-align-items: center; 50 -ms-flex-align: center; 51 align-items: center; 52 margin-bottom: 550px; 53 } 54} 55 56.onsen-item:nth-of-type(2) { 57 position: relative; 58 margin-bottom: 290px; 59 display: -webkit-box; 60 display: -webkit-flex; 61 display: -ms-flexbox; 62 display: flex; 63 -webkit-box-orient: horizontal; 64 -webkit-box-direction: reverse; 65 -webkit-flex-direction: row-reverse; 66 -ms-flex-direction: row-reverse; 67 flex-direction: row-reverse; 68} 69 70@media screen and (min-width: 600px) and (max-width: 1179px) { 71 .onsen-item:nth-of-type(2) { 72 display: -webkit-box; 73 display: -webkit-flex; 74 display: -ms-flexbox; 75 display: flex; 76 -webkit-box-orient: vertical; 77 -webkit-box-direction: normal; 78 -webkit-flex-direction: column; 79 -ms-flex-direction: column; 80 flex-direction: column; 81 -webkit-box-pack: center; 82 -webkit-justify-content: center; 83 -ms-flex-pack: center; 84 justify-content: center; 85 -webkit-box-align: center; 86 -webkit-align-items: center; 87 -ms-flex-align: center; 88 align-items: center; 89 margin-bottom: 550px; 90 } 91} 92 93.onsen-item-img { 94 width: 525px; 95 height: 300px; 96} 97 98@media screen and (min-width: 600px) and (max-width: 1179px) { 99 .onsen-item-img { 100 margin-left: -350px; 101 } 102} 103 104.onsen-item-txt { 105 background-image: url(../../img/bg.png); 106 background-position: center; 107 background-size: cover; 108} 109 110@media screen and (min-width: 600px) and (max-width: 1179px) { 111 .onsen-item-txt { 112 width: 100%; 113 } 114} 115 116.onsen-item-txt-right { 117 position: absolute; 118 top: 50%; 119 right: 0; 120 -webkit-transform: translateY(-50%); 121 transform: translateY(-50%); 122 width: 810px; 123 height: 380px; 124 line-height: 1.5; 125 padding: 20px; 126 z-index: -2; 127} 128 129@media screen and (min-width: 600px) and (max-width: 1179px) { 130 .onsen-item-txt-right { 131 /* position: absolute; 132 top: 50%; 133 left: 50%; 134 transform: translate(-50%, -50%); */ 135 left: 0%; 136 margin-top: 300px; 137 margin-right: 450px; 138 -webkit-transform: translate(-50%, 50%); 139 transform: translate(-50%, 50%); 140 } 141} 142 143.onsen-item-txt-right .jp-text { 144 text-align: center; 145 position: relative; 146 top: 40%; 147 left: 50%; 148 -webkit-transform: translate(-40%, -50%); 149 transform: translate(-40%, -50%); 150} 151 152.onsen-item-txt-right .jp-text .ttl { 153 padding: 30px 0px 50px; 154 font-size: 2.4rem; 155} 156 157.onsen-item-txt-right .jp-text .desc1 { 158 line-height: 2.0; 159} 160

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

以前にも申し上げましたが、position と transform を使ってレイアウトをしない方がいいですよ。

css

1.onsen-item-txt-right { 2 display: grid; 3} 4.onsen-item-txt-right .jp-text { 5 text-align: center; 6 /* 7 position: relative; 8 top: 40%; 9 left: 50%; 10 -webkit-transform: translate(-40%, -50%); 11 transform: translate(-40%, -50%); 12 */ 13 place-self: center; 14}

投稿2021/12/03 01:40

Lhankor_Mhy

総合スコア35871

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

free_teku

2021/12/03 06:09

そうですよね・・ 私も使いたくはないのですが。gridだとエラーが出てしまい、せざるを得なくなりました。 悩んだのは2日程です。 何回もエラー検索(IE11非対応)しても、解決できず、しぶしぶ使いました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問