• ベストアンサー

iPhone用のサイトの文字がずれて困っています。

iPhone用のサイトの文字がずれて困っています。 iPhone用のサイトに設置したグローバルナビゲーションの文字が、 iPhoneのsafariで見ると中央揃えにならず若干左寄りになってしまって困っています。 制作環境はMacOS10.6でDreamweaverを使用しております。PCのsafariでは中央に配置されています。 URLはこちらになります。 html  http://iymdisk-design.com/test/test.html css http://iymdisk-design.com/test/test.css 解決策をよろしくお願い致します。

  • HTML
  • 回答数1
  • ありがとう数2

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

  • ベストアンサー
回答No.1

cssを変更された後かもしれませんが。 margin-right: 10px; margin-left: 10px; この記述を margin:auto; にしてやればいけると思います。 もしこれでできないのであれば、ul要素をセンタリングするのではなく、inline-blockを活用してli要素を直にセンタリングするのも一つの手でしょう。 #gnavi ul { text-align:center; } #gnavi li { display: inline-block; list-style: none; } #gnavi ul li a { height: 1.8em; width: 56px; line-height: 1.8em; color: #426866; text-decoration: none; background: #ffffff; font-size: 10px; text-align: center; display: block; border-left: 1px solid #222; } #gnavi ul #nTop a { border-left-style: none; }

chocho117
質問者

補足

ご回答ありがとうございます。 <body>に対して<ul>全体が左寄りではなく、<li>の横幅に対して<a>の文字がiPhoneのsafariで見ると左寄りになってしまうという問題です。 説明がわかりづらく大変申し訳ありませんでした。 その後[#gnavi ul li a ]に[letter-spacing:-1.3px;]を付ける事によってかなり中央寄りになりましたが、もっとベストな方法がわかれば知りたいと思います。

関連するQ&A

  • エクセルで文字を両端揃えにしたい!

    エクセルで文字入力をしているのですが、右寄り左寄り中央揃えの仕方はツールバーでできるのでいいのですが両端揃えはどうやればいいのでしょうか?

  • 全体を画面中央に表示させたい

    質問させていただきます。 Dreamweaver8を使用してHPを作成しているのですが、 Yahoo!のトップページのように常に画面の中央に配置させるのはどういう操作をすればいいでしょうか? 他のサイトで[テキスト]→[行揃え]→[中央]の操作で出来ると書いてあったのですが、左寄りのデザインのままで中央になりません。 お詳しい方、ご教授くださいませ。

  • ホームページを中央に配置(表示)したい

    ドリームウィーバーを使っています。作ったDivタグを中央に配置したいと思い、cssルールで、「ボックス」の「マージン」の左右をautoにしました。すると、safariではうまく中央表示されるのですが、firefoxでは左揃えになってしまいます。どうしたらいいか、教えてください。

  • 全てのセルの文字を中央揃えにしたい。(2010)

    Excel 2010 を使っております。 全てのセルに書き込む文字を中央揃えにしたいのですが、やり方を教えてください。 個々のセルに関しては[配置]→[中央揃え]で中央配置にできるのですが、 セルを移動するとまたデフォルトの配置に戻ってしまいます。 よろしくお願い致します。

  • iphone/ipod touch 用サイトの制作について

    iphone/ipod touch 用サイトの制作について 現在、iphone/ipod touch 用サイトの制作を行っています。 画面を縦固定で使いたいので、横向きにしたときに画面を回転させないようにしたいのですが、 HTML側(もしくはcss、JavaScript、Jqueru側)で実装する方法はありますか? 固定できるアプリは見つけたのですが、普通にSafariで見るときに実現したいので非常に困っています。

  • サイトのデザインを「スクラッチ技法(文字や罫線の隙間からだけ、その下の色が見える)」にしたい。

    サイトのデザインを「スクラッチ技法(文字や罫線の隙間からだけ、その下の色が見える)」にしたいのですが、ご指導ください。 なお、作りたいのは、http://www.re-wish.com/sample.gifのようなものです。 背景は黒、テキストや罫線の部分(テキスト背景ではなく、文字の太さ)にだけグラデーションを表示させたいと考えています。グラデーションはページ全体で変化させたいです。 黒い紙を文字の形に穴を開け、その穴からグラデーションが見える、そんな風にしたいのですが、cssでどのようにしたらいいでしょうか? http://www.moongift.jp/2008/01/css_gradient_text_effect/を参考にはしたのですが、どうもしたいことと少し違うように思いました。 今、制作段階のものは、Photoshop CS3のレイヤーでとらえますと、 1.模様 2.テキスト 3.背景色 という重なりで、「1.模様」で「2.テキスト」をクリッピングマスクしています。 ソフトはIllustrator、Photoshop、DreamweaverのそれぞれCS3を使用しています。よろしくお願いいたします。 最終的にはDreamweaver CS3でのサイト制作を予定しています。 何卒よろしくお願いします。

  • サイトを左寄りにする理由

    サイトのデザインを左寄りにしてる理由はなんでしょうか? 例えば、 http://www.ichiban-kalbi.jp/h/ http://www.teng.co.jp/tenpo/washoku/ http://www.wasyokuken.com/ のサイトは、なぜ中央寄せではなく左寄せなのでしょうか?

    • 締切済み
    • CSS
  • ホームページをCSSで配置しているサイトを最近見かけます。

    CSSでデザインすると、HTMLのテーブルよりもすっきり見えるからだと思うのですが。 しかしCSSだけで配置やデザインをしっかり組むと、 HTMLのテーブルタグで作成した場合とタグの量がそんなに変わるとは思えません。 よく変わっても倍半分くらいかなと思います。 CSSでデザインするとDreamWeaverなどではデザインをチェックすることができません。 ブラウザに表示して確認しないといけません。 ↑これが結構手間 あとCSSを使う理由としてデザインの変更が簡単ということや、 検索エンジンに優しい?というのもあります。 以上を考えるとCSSでの大きなメリットがあまり見出せないのですが、 スッキリとしたサイトはCSSでデザインされています。 なぜCSSでデザインするほうがいいのでしょうか? CSSでデザインすることの大きなメリットを教えてください。

    • ベストアンサー
    • HTML
  • 画像の中に配置した文字の高さを調整する方法

    画像の中に文字を配置したのですが、文字の高さの調整ができなくて困ってます。 文字の位置の高さを中央ではなくて、少しだけ上に表示したいです。 なぜかというと、画像は次のサイトにある、グローバルナビゲーションのような画像だからです。 http://www.bookoff.co.jp/ 画像を中央に表示してしまうと、上記サイトのグローバルナビゲーションのように下にラインがあるから、画像と文字のバランスが悪くなってしまいます。 そのため、少しだけ、文字を上に移動させたいのです。 このような場合、文字を調整することはできるのでしょうか?

    • ベストアンサー
    • CSS
  • オートシェイプの中の文字の配置について

    ワードでオートシェイプの中の文字の配置を水平方向の中央揃えは簡単ですが垂直方向の中央揃えをするのは可能でしょうか。 あちこち探したのですがどうもその設定をするところが見つかりません。 宜しくお願い致します。

専門家に質問してみよう