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

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

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

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

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

HTML5

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

Safari

SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

Q&A

解決済

1回答

2420閲覧

safariで表示した際のレイアウトがどうしても崩れてしまう

sibazi

総合スコア1

CSS3

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

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

HTML5

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

Safari

SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

0グッド

0クリップ

投稿2023/03/22 15:13

編集2023/03/23 21:02

困っている事

safariのみでCSSが崩れてしまう…

内容

ChromeやEdgeではすごく綺麗に整っているレイアウトもsafariになるとどうしてもレイアウトが崩れてしまいます…
ipad用のに作ったwebアプリなのでどうしてもsafariで綺麗なレイアウトにしたいです。
自分なりに色々調べてみてCSSハックのやり方や、改善策を全体的に試しているのですがどうしても上手くいかず…
フォントもChromeと同じにしたいのですが合わせられません…
15日ほど足止めを食らっています…

該当のソースコード

HTML
<span class="catalogue" style="--i:5;--x:-1;--y:-1;"><ion-icon name="car-sport-outline"></ion-icon>

<li class="around10" style="--i:9;"> <img src="img/ROADSTER.png" alt="ROADSTER"> <p class="car-name-ROADSTER">ROADSTER</p> <p class="car-size-ROADSTER">3,915×1,735×1,235</p> </li> </span>

CSS
白丸枠、action前CSS
.catalogue li {
color: #000000;
scale: 0;
position: absolute;
left: 30px;
top: 20px;
transform-origin: 0px;
background: #ffffff;
transition: 1s;
transform: rotate(calc(360deg/10 * var(--i)));
list-style: none;
width: 10px;
height: 10px;
justify-content: center;
align-items: center;
border-radius: 50%;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.20);

}
白丸枠、action後CSS
.catalogue.action li {
position: absolute;
left: -265px;
top: 30px;
list-style: none;
transition: 1s;
transform: rotate(calc(360deg/10 * var(--i)));
transform-origin: 370px;
scale: 1;
width: 165px;
height: 165px;
background: #ffffff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.20);
}
画像CSS
.catalogue li img {
transform: rotate(calc(360deg/-10 * var(--i)));
scale: 0;
transition: 0.4s;
display: inline-block;
align-items: center;

}
「ROADSTER」、CSS
.car-name-ROADSTER {
position: absolute;
top: 35px;
left: 36px;
font-size: 25px;
font-weight: 20px;
color: #000000;
transform: rotate(calc(360deg/-10 * var(--i)));
font-family: 'Roboto', sans-serif;

}
「3,915×1,735×1,235」、CSS
.car-size-ROADSTER {
position: absolute;
top: 112px;
left: -8px;
font-size: 12px;
font-weight: 20px;
color: #000000;
transform: rotate(calc(360deg/-10 * var(--i)));
font-family: 'Roboto', sans-serif;

}

対象画像

Chromeのレイアウト
イメージ説明
safariのレイアウト
イメージ説明

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

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

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

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

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

int32_t

2023/03/22 23:49

質問文の画像で、どこが崩れていて、どうなればOKなのでしょうか。
sibazi

2023/03/23 01:16

コメントありがとうございます。 上画像のChromeのレイアウト画像と全く同じもしくは近しいものにしたいです…
int32_t

2023/03/23 01:32

フォントが違うようなので、全く同じにはなりません。 どこがおかしいと考えているか具体的に書いてください。ROADSTERの文字がおかしいのですか、車の画像がおかしいのですか、数値がおかしいのですか、白丸がおかしいのですか。
int32_t

2023/03/23 01:36

あと、画像のサイズや around10 のスタイルなど、状況を再現できる情報すべてがないと助言は難しいです。
sibazi

2023/03/23 05:05

詳しく聞いて頂き本当にありがとうございます。 フォントは違う状態で大丈夫です。 直したい点は現在私はWindowsPCしか持っておらず、Chromeの検証でipadの画面サイズに合わせて作成を進めています。 ですがいざipadのsafariで開いてみると「ROADSTER」の車の文字が白い丸枠に収まっていなかったり、車の大きさ(画像でいえば3915×1735×1235の文字)がChromeの検証と比べて左に寄って丸枠からはみ出ているしおそらく白枠にたいして文字が小さくなっているようにも見えます。 それをすべてipadでもChromeの検証でみているような形にしたいと考えています。 around10というのいうのはaround1-10まで同じ形のliを作成していてスタイルなどは特に設定していないのですが、どうやって丸枠に指定しているかというとspanの要素の中にaround1-10(li要素)を入れている状態なのでHTMLとCSSはこちらになります。 HTML <span class="catalogue" style="--i:5;--x:-1;--y:-1;"><ion-icon name="car-sport-outline"></ion-icon> CSS .catalogue li { color: #000000; scale: 0; position: absolute; left: 30px; top: 20px; transform-origin: 0px; background: #ffffff; transition: 1s; transform: rotate(calc(360deg/10 * var(--i))); list-style: none; width: 10px; height: 10px; justify-content: center; align-items: center; border-radius: 50%; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.20); } .catalogue.action li { position: absolute; left: -265px; top: 30px; list-style: none; transition: 1s; transform: rotate(calc(360deg/10 * var(--i))); transform-origin: 370px; scale: 1; width: 165px; height: 165px; background: #ffffff; display: flex; justify-content: center; align-items: center; border-radius: 50%; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.20); } around1-10までをまとめてcatalogueというclsaa名にしてスタイルを設定しています。 catalogueを押すとactionが付与されて消えていたcatalogueが現れるというjavascriptを設定しているので、動作前と動作後のCSSを載せさせて頂きました。 画像サイズは幅が150pxで高さが75pxになります。
sibazi

2023/03/23 05:10

すみません…上の文の「スタイルなどは特に設定していないのですが、」部分は自分でもよくわからない事を言っているので無視してください…
int32_t

2023/03/23 05:28

問題を再現するための CSS と HTML をコメントに書くのではなく、質問文を更新してください。 フォントの差は仕方ないとして、けっきょくどういう意図で配置されればいいのですか? 車名・画像・サイズが中央揃えされていればいいですか。
sibazi

2023/03/23 09:26

失礼いたしました。 はい、その通りです。 safariでの表示で白枠の中に文字が収まった状態で車名・画像・サイズが中央揃えされてほしいです…
guest

回答1

0

ベストアンサー

状況を再現することはできませんでしたので、完全な修正案ではありません。

修正する方針です:

  • <li> 全体を rotate させて、3つの要素それぞれ別個に逆回転させて位置を調整するという奇妙なことはやめましょう。なぜそんなことをしているのか理解できませんでした。最初から rotate させなければいいのですし、rotate しなければならない事情があるなら、3要素を囲む要素を作って逆回転させましょう。
  • 上記が解決したら、<li>flex-direction: column を付け、.car-name-ROADSTER.car-size-ROADSTERposition: absolute を消します。.car-name-ROADSTERorder: 1<img>order: 2.car-size-ROADSTERorder: 3 を付けて順番を入れ替えます。3要素の間隔はそれぞれの margin-top margin-bottom で調整します。

投稿2023/03/23 10:00

int32_t

総合スコア20761

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

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

sibazi

2023/03/23 12:02

綺麗に整えることが出来ました!! 本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問