ホームページビルダーのフル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も見ています
-
賃貸で可能な古民家風レトロな部屋作りのコツ!改めて知る畳の高い機能性と魅力も紹介
畳の部屋を雰囲気のよい部屋に仕上げたい!賃貸住宅でもできる古民家風のレトロな部屋作りのコツを伺った。
-
ホームページビルダー 21 sp で保存したファイル
ホームページ作成・プログラミング
-
ホームページビルダー21spでお問合せのフォームにある送信ボタン
LANケーブル・USBケーブル
-
PDFファイルをホームページビルダーでアップするには?
ホームページ作成・プログラミング
-
-
4
ホームページビルダーで作成したサイト情報の保存場所は?
ホームページ作成・プログラミング
-
5
ビルダー20 お問合せフォーム フォームの設定について
ホームページ作成・プログラミング
-
6
画面がずれて表示されてしまう・・・。どうすればいいの?
InternetExplorer(IE)
-
7
ビルダーを使ってますがパソコンが変わった場合は?
ホームページ作成・プログラミング
-
8
ホームページビルダー作成にて画面サイズでつまづいています
ホームページ作成・プログラミング
-
9
ホームページビルダーで編集しようとするとページレイアウトが崩れる
その他(ソフトウェア)
-
10
ホームページビルダーのスマホ同期の解除
ホームページ作成・プログラミング
-
11
ホームページを作っているのですが、PCサイトとスマホサイトを自動切り替えする方法が分かりません。
HTML・CSS
関連するカテゴリからQ&Aを探す
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<pre>にフォントを・・・。
-
特定の文字のみcssを適用するに...
-
テキストファイルの行を指定し...
-
文字の位置、上下のマージンが...
-
<pre>のフォントサイズを指定す...
-
テーブルの中のフォントサイズ...
-
ホームページビルダー作成HPがi...
-
CSSで14px/1.4の部分の記述は正...
-
cssでボーダーを消したい
-
行間隔を無くす方法
-
HTMLとCSSの違い
-
リストの前後の行間をなくす方...
-
HTMLで行間隔調整の方法をお教...
-
タグで字間を指定すると改行が...
-
HPの文字化け対策
-
テキストボックスの枠を非表示...
-
リンク文字
-
ウィンドウズとマックのフォン...
-
API Sleep関数について
-
マウスオーバーで下線を表示さ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストの前後の行間をなくす方...
-
特定の文字のみcssを適用するに...
-
リンク文字
-
Format 関数 表示書式指定文字...
-
文字の位置、上下のマージンが...
-
テキストファイルの行を指定し...
-
API Sleep関数について
-
テキストエリア内の文字の装飾
-
CSSを一部無効にしたい
-
fontサイズ指定の ”-(マイナ...
-
ホームページビルダー作成HPがi...
-
全角半角含めて等幅で表示したい
-
CSSについて教えてください。 ...
-
<input type="file"> の幅
-
background-color: #ddd;の意味...
-
上付き文字と下付き文字を同時...
-
h1タグのパンくずリストへの設置
-
Excel VBA メール作成について ...
-
Excel VBA メール作成について ...
-
指定の文字だけ色を変える
おすすめ情報