• ベストアンサー

スマホから見た時の文字位置

カテゴリ間違いにてもう一度すみません 前にも質問をさせて頂きましたが 未だに解決に及ばないのでもう一度聞かせて下さい。 PCから見ると添付した画像の様に イラストの真下にリンクが来てくれるのですが、 スマホから見ると添付した画像の様にずれて表示されてしまいます <meta name="viewport" content="width=device-width"> を打ち込むと良いと言うコメントを頂いて metaの所にプラスしてみましたが変わりは無く・・・ この他に何かするべき点は御座いますでしょうか？ 宜しくお願い致します。

画像を拡大する
  • CSS
  • 回答数4
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
  • Proof4
  • ベストアンサー率78% (151/192)
回答No.4

No.3の補足コメントに対して回答します。 ソースを拝見いたしました。 画像が画面からあふれるときに中央ぞろえがうまくいかないとのこと、関係あります。 imgタグの末尾にstyle="max-width: 100%;"を追加して下記のようにするとうまくいきますでしょうか <img hspace="0" src="http://xxx" align="baseline" border="0" style="max-width: 100%;"> 画像がスマホ画面の幅からはみ出ないようになります。（はみ出る場合は画面の幅に合わせて表示） もし画面からはみ出るように表示させたい場合は別の方法を検討する必要があります。

aidae12
質問者

お礼

コメント有難う御座います 早速試してみた所きちんと希望の中央ぞろえになりました！ ようやく悩みが解消されて嬉しい限りです・・・！ この度は本当に有難う御座いました！

その他の回答 (3)

  • Proof4
  • ベストアンサー率78% (151/192)
回答No.3

ソースを見ないと何とも言えないのですが、リンクを下記のように修正すると中央に表示されるかと思います。 <a href="#" style="display: block; width: 2em; margin: 0 auto;">戻る</a> 簡単のためstyle属性にCSSを記述しています。適宜変更してください。 リンクをブロック要素にしてmarginで左右中央揃えにしています。

aidae12
質問者

お礼

コメント有難う御座います！ 打ち込んでみましたが変わらずでした・・・

aidae12
質問者

補足

※先程気付きましたが、 　スマホの枠に収まるサイズの画像だと中央に来て、 　スマホの枠より大きいサイズの画像だとズレが生じるようです。 　これも関係あるのでしょうか？

  • 9133313
  • ベストアンサー率19% (267/1346)
回答No.2

<meta name="viewport" content="width=device-width"> これは、画像画像ファイルの位置を設定するものであり、文字列の場合は使いません。 単純に　<align="center">戻る で良いのでは無いかと思いますが。

aidae12
質問者

お礼

コメント有難う御座います！ 画像ファイルのmetaだったのですね勉強になります <align="center">は最初に打ち込んであります その上でずれるので「？？」になっています

aidae12
質問者

補足

こちらに失礼しますソース <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-style-Type" content="text/css"> <meta name="generator" content="HomePage Creator v5.0J"> <meta name="viewport" content="width=device-width"> <title>ラクガキ</title> </style> </head> <BODY text="#000000" link="#000000" vlink="#000000" alink="#000000"> <CENTER><img hspace="0" src="http://xxx" align="baseline" border="0"> <br><br> <div align="center"><a href="http://xxx">戻る</a></div> </center> </body></html> となっています

  • bardfish
  • ベストアンサー率28% (5029/17765)
回答No.1

画像なら中央に配置されるんですよね？ だったらもう「戻る」という文字が書かれた画像を配置して画像に戻るリンクを張ったらどうですか？

aidae12
質問者

お礼

コメント有難う御座います！ どうにもならない場合、最終的にはそれも考えて見ます

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • テーブル固定幅のサイトをスマホ対応させるには？

    PC用ページ(テーブル固定幅のデザイン)を作ったのですが、 スマホで見ると、画面に収まっておらず横スクロールをしないと画面上に収まりません。 viewportのmetaタグをhead内に記述しても何も変わりませんでした。 テーブルの幅はwidth="515" タグは<meta name="viewport" content="width=515px"> <meta name="viewport" content="width=device-width"> それぞれhead内に記述してみましたが、全く反映しません(515pxの数値を変えても無理) 何が間違っているのでしょうか？？ どうすれば、スマホで画面に収まるようにできますか？

    • ベストアンサー
    • HTML
  • ジオシティーズ　横幅　広告のサイズになる

    ジオシティーズでＨＰを作っているのですが <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="format-detection" content="telephone=no" /> を入れているのに、 スマホで表示するサイズが 広告のサイズより小さくなりません。 <div id="main"> にたしいて #main{ width: 200px; } としているのですが、添付画像の様になってしまいます。 広告に合わせて作るしかないのでしょうか？

  • viewport

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> と <meta name="viewport" content="width=device-width, initial-scale=1" /> は意味は同じですか？ 違いは 1.0か1かと 最後にスラッシュがあるかです。

    • ベストアンサー
    • HTML
  • <meta name="viewport" con

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> と言うタグ・ソースは 「サイトをスマホで表示させるためのタグ・ソース」 と覚えればいいのでしょうか?

    • ベストアンサー
    • HTML
  • ホームページの頭の記述

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> という書き方を消して、 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UFT-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> と書いたところ、 今までスマートフォンにきっちり表示されいたホームページが、 急に倍のサイズに表示され、ピンチしても縮小されません。 いろいろやってみたところ、 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> の一行を <meta name="viewport" content="width=device-width,initial-scale=1"> に変えると、表示をピンチで縮小できる事が分かったのですが、 最初から縮小した表示を出したい場合、 何と書けば良いでしょうか？

    • ベストアンサー
    • HTML
  • スマホで見るとリンクが中央に来ない。

    まだ解決していないので宜しくお願いします。 ＰＣから見ると正常に中央にリンクが表示されるのですが、 スマホから見るとリンクが左寄りになってしまいます。（添付画像がそうです。） どうにか中央に持って来たいのですがいくらやっても出来ません。中身は下記です。 下記の内容で間違い等ありましたらご指摘の方お願い致します。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-style-Type" content="text/css"> <meta name="generator" content="HomePage Creator v5.0J"> <meta name="viewport" content="width=device-width"> <BODY text="#000000" link="#000000" vlink="#000000" alink="#000000"> <div align="center"><img hspace="0" src="http://oht.holy.jp/e/k_h_o/b27.jpg" align="baseline" border="0"> <br><br> <a href="http://oht.holy.jp/k/h_o">戻る</a></div> </body></html>

  • タグを入れてるのにスマホ用サイズで表示されない

    スマホならスマホ用サイズで表示されるように、 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" > を入れていて、今まで問題なく表示されていたのですが、 タグをいじったら、スマホでもＰＣサイズで表示されるようになってしまいました。 上記のコードはいじってないので、入れっぱなしです。 タグヲいくつか変更したので、どれが原因なのかわからないのですが、 今までは同じページ内にスタイルシートを書いてたのですが、 <link rel="stylesheet" type="text/css" href="http://Server/test.css">" のようにして、読み込むように変更しました。 これが原因なのでしょうか？

    • 締切済み
    • CSS
  • スマホで見るとリンクが中央に来ないです

    スマートフォンサイトを作っているのですがタイトルのとおり、スマホでリンクの文字が 少し左寄りになってしまい中央に来なくて困っています。(添付ファイルがそうです) 出来る限りで色々試してみましたが、自分の力量では駄目でした。 これは中央に持って来る事は出来るのでしょうか？ 宜しければお教え頂けると幸いです。 ソースは詳しくないので色々間違っているかもしれませんが、こちらになります。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-style-Type" content="text/css"> <meta name="generator" content="HomePage Creator v5.0J"> <meta name="viewport" content="width=device-width"> <title>ひとがた</title> </style> </head> <BODY text="#000000" link="#000000" vlink="#000000" alink="#000000"> <CENTER><img hspace="0" src="http://oht.holy.jp/e/k_h/3.jpg" align="baseline" border="0"> <br><br> <div align="center"><a href="http://oht.holy.jp/k/h">戻る</a></div> </center> </body></html>

  • 画像の表示をリキッドにする方法

    android端末向けのHPを作成しています。 viewport を以下のように書きリキッドレイアウトで作成しているのですが、img srcで貼っている画像のサイズが変わらず横のスクロールバーがでてしまいます。 画面サイズに変更するにはどうすれば良いでしょうか？（BG指定でしか画像のサイズは変わらない？） <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

    • ベストアンサー
    • HTML
  • 文字化けを解決したい

    サイトを持つ管理人です。タグなどについてはかなり初心者です。 iPhoneなどの海外OSから閲覧すると文字化けしてしまうという報告を受けて、タグを色々いじっています。 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">を追加してみたのですが、これ単品だと私のPCから閲覧したときに文字化けしてしまいました。 そのため<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">と<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">を並べてみたのですが、これで海外OSからも文字化けを起こさなくなったのでしょうか？ こんな感じのタグです↓ <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META NAME="GOOGLEBOT" CONTENT="NOINDEX, NOFOLLOW,NOARCHIVE"> <META NAME="ROBOTS" CONTENT="NOARCHIVE,NOINDEX,NOFOLLOW"> <meta name="viewport" content="width=380, maximum-scale=1.6" /> <title>練習</title> </head> 全てのスマホからもサイトを閲覧出来るようにするにはどうしたら良いでしょうか？それとも、全てのスマホから文字化けを防ぐことは不可能なのでしょうか？ お知恵をお貸しください。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する