ホームページビルダーのフルCSSテンプレートを元に作ったHPが、iPad、iPhoneのSafariで見ると、<h1>や<p>が、そのdiv幅の横半分くらいのところでなぜか勝手に折り返してしまい、レイアウトが崩れてしまいます。
PC版のSafariでは大丈夫なのですが、どこをいじれば直りますでしょうか?
いろいろやってみましたがわかりません。
下記がHPです。
http://www.ab.auone-net.jp/~pattiko/
同じテンプレートを使ったと思われるよそのHPもみんな同じように折り返しているので、そもそものビルダーのCSSがおかしいのだと思います。
http://www.wakaclinic.justhpbs.jp/
http://park7.wakwak.com/~tsmc.index/index.html
どなたか教えてください。よろしくお願い致します。
No.2ベストアンサー
- 回答日時:
>CSSがおかしいのだと思います。
A
おかしい訳ではなく、
方向性によって違うのだから、見せ方に正解はないです。
スマホ側の仕様です。
ディスプレイの幅で見せる、いや、読ませる為ですよ。
iOS系以外もだけどね。アンドロイドとか。
body{
-webkit-text-size-adjust:100%;
}
meta viewport も調べると面白いかも。
さっそくのお返事ありがとうございます。
body{
-webkit-text-size-adjust:100%;
}
だけではダメでした。
meta viewport調べました。metaに書いて、さらにスマホ用CSSを書くということですね。調べているうちに、<p>が320pxくらいで折り返してしまうというのがよくわかりました。
時間がかかると思いますが、がんばってスマホ用CSSを作ってみます。ありがとうございました。
No.1
- 回答日時:
iphoneは詳しくないのであてにならないかもしれませんが、自動調整機能が悪い方向に働いている可能性があるかもしれません。
body{
-webkit-text-size-adjust:100%;
}
これをcssに記述してみてください。
さっそくのお返事ありがとうございます。
body{
-webkit-text-size-adjust:100%;
}
だけではダメでした。
さらにNo.2さんのアドバイスで、meta viewport調べました。metaに書いて、さらにスマホ用CSSを書くということですね。調べているうちに、<p>が320pxくらいで折り返してしまうというのがよくわかりました。
時間がかかると思いますが、がんばってスマホ用CSSを作ってみます。ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS サイトをマルチデバイス対応にする為の準備や、CSSなどのおすすめサンプル集やアドバイスを頂きたいです 1 2022/07/13 22:15
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- iCloud Apple Watch とiPhone のカレンダー同期 1 2022/12/09 22:12
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- ホームページ作成・プログラミング web制作(HP作成について教えてください) 閲覧ありがとうございます。 今、WEB制作の勉強をして 2 2023/04/13 07:23
このQ&Aを見た人はこんなQ&Aも見ています
-
外出時に「待たせる妻」vs イライラする「待つ夫」は日本だけ?見習いたい海外事情
夫の家事参加に積極的なイメージのある海外でも、同様の事例はあるのか。結婚カウンセラーの佐竹悦子さんに伺ってみた。
-
ホームページビルダー21spでお問合せのフォームにある送信ボタン
LANケーブル・USBケーブル
-
ホームページビルダーで作成したサイト情報の保存場所は?
ホームページ作成・プログラミング
-
ビルダー20 お問合せフォーム フォームの設定について
ホームページ作成・プログラミング
-
-
4
ホームページビルダー 21 sp で保存したファイル
ホームページ作成・プログラミング
-
5
画面がずれて表示されてしまう・・・。どうすればいいの?
InternetExplorer(IE)
-
6
ホームページビルダーの”全体の確認”画面のページの赤い×印は何?
ホームページ作成・プログラミング
-
7
PDFファイルをホームページビルダーでアップするには?
ホームページ作成・プログラミング
-
8
ホームページビルダーで編集しようとするとページレイアウトが崩れる
その他(ソフトウェア)
-
9
ホームページビルダー作成にて画面サイズでつまづいています
ホームページ作成・プログラミング
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSを一部無効にしたい
-
アコーディオンメニューが思う...
-
アンダーラインのカラー
-
特定の文字のみcssを適用するに...
-
ブラウザによって異なるフォン...
-
<input type="file"> の幅
-
HTMLの効力が発動しない!
-
全角半角含めて等幅で表示したい
-
HTMLとCSSの違い
-
A:link等の指定をstyle属性でタ...
-
CSSについて教えてください。 ...
-
PC版のサイトをスマホに対応さ...
-
CSSのid名class名の重複回避方...
-
DreamWeaverで</head>の前のス...
-
リンク文字
-
background-color: #ddd;の意味...
-
マイクロ(μ)の文字を半角で出...
-
教えてください。
-
outlook 文字を揃えたい。tab...
-
「MS Pゴシック」と同じ幅の...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSについて教えてください。 ...
-
文字の位置、上下のマージンが...
-
リストの前後の行間をなくす方...
-
Format 関数 表示書式指定文字...
-
HTMLで特定の文字だけ色を変え...
-
全角半角含めて等幅で表示したい
-
特定の文字のみcssを適用するに...
-
ホームページビルダー作成HPがi...
-
テキストファイルの行を指定し...
-
リンク文字
-
アコーディオンメニューが思う...
-
テキストエリア内の文字の装飾
-
API Sleep関数について
-
Excel VBA メール作成について ...
-
<pre>のフォントサイズを指定す...
-
上付き文字と下付き文字を同時...
-
指定の文字だけ色を変える
-
background-color: #ddd;の意味...
-
CSSを一部無効にしたい
-
h1タグのパンくずリストへの設置
おすすめ情報